Vue 3 Projects 2023 - Learn by doing with Hands-on exercises

Build a simple reusable tags component; type something and press enter, tab, or comma to add items, and remove items with backspace or delete when the textbox is empty.

Explore creating Vue.js projects with modern build tools like vite, install dependencies, run the development server, and compare minimal and maximal setups—including cloud options such as Stack Blitz.

Explore the single file component in Vue 3, including its script, template, and style sections; understand setup attribute options, and register components locally or globally with kebab and pascal case.

Learn to manipulate the DOM with Vue directives like v-text, v-if, v-for, and v-bind, bind data to attributes, and display tags with indices.

Bind events in Vue.js and handle them with code; push input values into a tags array using v-on with keydown, enter, and tab modifiers, including the prevent modifier.

Learn how two-way bindings in Vue.js sync data and the DOM with v-model. See how input events enable live updates and modifiers like trim, lazy, and number refine values.

Manage a dynamic tags input in Vue 3 by moving logic into methods to add and remove tags, and handle enter, tab, delete, or backspace for tag management.

Master style and class bindings in Vue 3 to dynamically style inputs and apply a red color and line-through for duplicate tags, using string and object notation.

Prevent duplicate tags by validating new entries before adding to the tags list, and leverage a computed property to check existence, cache results, and keep code dry.

Watchers in Vue.js detect data changes and run a function named after watched property to prevent duplicates, log new and old values, and trim commas before adding to tags array.

Beautify the tags input component with provided Vue styles. Add a unique key for v-for, wrap the tags and input in a wrapper, and style tag items and remove actions.

Master component communication in Vue 3 by using props to pass data from parent to child, observe reactivity, and enforce prop types, defaults, and requirements with a live tag example.

Master child-to-parent communication in Vue 3 by emitting events from the tags input component and handling a change event in the parent, ensuring reusable components.

Learn to build a toast notification in Vue 3, with auto dismissal, a close button, three types (success, warning, error), and positions (top left, top right, bottom left, bottom right).

Create a basic toast component in a Vue 3 project by scaffolding the file structure, importing and registering the component, and implementing icon variations with bootstrap icons.

Apply scoped styles to the toast component. Set 300px width and a light green background, use a flex layout with a left border and style the icon, title, and message.

Learn to create dynamic toasts in Vue 3 by passing title, message, and show props, with default values and visibility controlled by v-show and a button.

Learn how to hide a toast in Vue 3 by emitting a hide event to the parent, and implement auto dismissal with a timeout and a watcher.

Learn to customize toast notifications by creating three CSS classes for success, warning, and error, applying dynamic type and icon via a Vue prop, computed properties, and a dynamic component.

Validate toast type in a Vue 3 component using a validator prop, enforce allowed values, show console warning for invalid types, and auto-correct with a computed toast title.

Master toast placement in a Vue 3 project by building a toast component with four positions—top left, bottom left, top right, bottom right—driven by a position prop and computed logic.

Add a transition effect to the Vue toast notification by wrapping it in a transition component, naming rtl and ltr transitions, and styling enter and leave animations.

Explore static and dynamic props in Vue 3, using v-bind and shorthand to pass strings, numbers, booleans, and arrays, and control visibility with a show prop.

Learn to define Vue props with object syntax, mark required props, provide defaults, allow multiple types, and enforce values with a validator, observing console warnings for invalid or missing data.

Learn how to emit and listen to custom events in Vue 3, enforce one-way data flow with props, and use emits to document events, including parent listening via v-on.

Emit a submit event with email and password from a login form and handle it in the parent, validating the payload with object syntax to prevent invalid data.

Learn how to enable v-model in Vue 3 components by binding a model value prop, emitting update model value on input, and exploring a computed property alternative.

Learn to implement v-model modifiers in a custom input component by defining model modifiers in props, adding a lowercase modifier, and emitting update:model-value on input.

Learn to use v-model arguments to implement multiple v-model bindings, binding props and update events for email and password inputs, and apply modifiers for prop-based model handling.

Explore fall through attributes in Vue 3 by passing undeclared attributes and events to components, observe how class and id merge on root elements, and access them via $attrs.

Disable attribute inheritance in a base input component by setting the inherent attributes option to false, ensuring fall-through attributes apply only to the input and avoiding warnings with multiple roots.

Explore Vue 3 slots to pass HTML content or templates from a parent to a child, making components flexible and reusable with fallback slot content and parent scope access.

Learn how to use multiple named slots in a Vue 3 modal component, with header, body, and footer, using v-slot or hash shorthand, and understand the default slot behavior.

Explore scoped slots in Vue 3 to pass attributes to slot outlets, enabling access to child data. Create a reusable alert link bound through v-slot to apply dynamic classes.

Learn to implement named scoped slots in Vue 3, passing item data via slot props and using named slots to customize item rendering and statistics.

Explore how to render and switch between Vue 3 components, including login and register forms, and learn how keep-alive preserves state across switches.

Build a reusable dropdown component that manages open state and the selected option, expanding from a trigger to reveal options and collapsing after selection, for language selection, filtering, or navigation.

Create a base dropdown component in Vue 3 using Bootstrap 5 styles, with dedicated Trigger and Menu slots and a computed menu styles object to control visibility and positioning.

Create a local isOpen state and a toggle method; bind a computed tableClass to show dropdown when open, remove show class from the menu, and pass toggle via slot props.

Create dedicated dropdown item and dropdown trigger components, adopt bootstrap structure, use slots and $attrs to pass through attributes, and a tag prop to render as button or anchor.

Install and apply the v3 click outside directive to close the dropdown when clicking outside, register it locally, and handle outside clicks by setting open to false.

Build a reusable image carousel component in Vue.js from scratch, featuring automatic cycling at a set interval, manual previous/next controls, and indicators that show and switch the active image.

Build a Vue 3 carousel by creating a main app component and a reusable carousel with a carousel item, passing slides as props and using v-for to render images.

Style a Vue 3 carousel by centering the component with flexbox, constraining images with overflow hidden, stacking slides absolutely, and controlling visibility with a current slide index.

Create an auto-advancing Vue 3 carousel using a mounted interval to cycle slides, resetting to zero, and apply left-to-right and right-to-left transitions with Vue's transition component.

Create a carousel controls file, add prev and next buttons, import them into the carousel in Vue 3, and style with a translucent background and hover effects.

Build a vue 3 carousel that emits prev and next events on clicks, and manage parent listening, direction-based transitions, and index logic with computed transition names.

Fix the carousel so controls reset the slide interval and enable pause on hover by stopping and starting the slide timer when mounted and on mouse enter/leave events.

Add carousel indicators in a Vue 3 project to show the number of images and highlight the active one, with clickable dots to switch images.

Make carousel indicators dynamic by introducing count and active props, using v-for and a key attribute to render five indicators, and enabling clickable indicators with switch events to navigate slides.

Convert slides to an array and add props for controls, indicators, and interval to customize the carousel. Bind a dynamic width-height dimension and use v-if to toggle controls and indicators.

Explore the Vue 3 composition API to organize and reuse logic with a declarative, function-based style, improving readability, testability, and type safety across components.

Master the Vue 3 composition API by using a setup method and returning variables for template access. See how reactive data renders and how the setup return enables template binding.

Learn how the composition API uses the ref function to create reactive data in Vue components, expose it in setup, and use value for updates while templates unwrap automatically.

Learn to create reactive objects in Vue 3 using the reactive function, compare it with ref for simple values, and see how changes update the template in real time.

Create reactive references from a reactive object using the deref and tariffs functions to expose single properties or all properties as reactive references, enabling direct template usage and dynamic updates.

Define and use computed properties with the Vue composition API to derive a total from item price and quantity, with automatic updates as dependencies change and cached results.

Explore how to observe reactive data and computed properties using Vue's watch and watchEffect, using the option api or composition api, with immediate, lazy behavior, and watching properties or objects.

Learn how to use props in the Vue 3 composition API and emit events to enable one-way data flow between parent and child components, with a practical cart item example.

Learn to emit events in the Vue composition API to enable child-to-parent communication, declare emits, and handle remove actions that update a reactive items array.

Master Vue.js lifecycle hooks from creation to destruction, including mounted, updated, and unmounted phases. Use the Composition API to fetch data, respond to changes, and clean up resources.

Discover how composable functions use the composition API to encapsulate logic, provide reactive features, and promote code reuse and maintainability across Vue.js components.

Learn to use the Vue composition API script setup to write succinct, type safe components in single file components with defineProps and defineEmits, improving runtime performance and type inference.

Convert the dropdown component from option API to composition API by adding script setup, define props, define options, and ref to manage state, mixing option-based and composition API components.

Create a reusable modal component in Vue.js from scratch, encapsulating its logic and styling for consistent application-wide behavior, including close buttons and backdrops for alerts and forms.

Create a base modal component in Vue 3 with an overlay, a dialog wrapper, and a slot for content, controlled by a show prop and overlay click closes the modal.

Learn to implement smooth transitions for a Vue 3 modal by applying a fade effect to the backdrop and container using v-show-driven visibility and style-based opacity controls.

Learn to manage modal events in Vue 3 by wiring a close function to a close event, closing on escape key and backdrop clicks, with proper mount and unmount cleanup.

Learn to build a multi-slot modal in Vue 3 by defining named slots for header, body, and footer, conditionally rendering them with v-if, and applying flexible styles.

Build a reusable autocomplete component from scratch that provides real-time suggestions as users type in a search box or text field, saving time and enhancing user experience.

Create a base autocomplete component in a Vue 3 project, connecting an input to a dynamic list sourced from a local countries.json and computed real-time search results.

Display real-time autocomplete by filtering a source with a reactive search variable and a computed result; show hints when the list is not empty and select via click using setSelected.

Implement a Vue 3 autocomplete component by wiring v-model to a reactive country, using the modelValue prop and update:modelValue emission, and manage open state to hide the menu after selection.

Learn to style an autocomplete component with Tailwind CSS using a Tailwind CDN for simplicity, applying Tailwind classes to input, ul, and li, and centering and width adjustment in parent.

Build a Google Drive style files uploader by displaying API files, renaming via a modal with highlighted names, and removing files with a toast update.

Copy a starter Vue app, choose Vue CLI or Vite, install dependencies with npm install, and run npm run dev to preview a bootstrap five file manager with search.

Set up a mock API for a Vue front end by installing json-server, multer, and concurrently, creating a db.json, and running api and dev servers with npm scripts.

Set up an http client in a Vue 3 app using axios, create a reusable api layer, and manage base URLs via .env for reliable server communication.

Define a local files state in Vue and fetch data with async/await, assigning the destructured response data to files. Render the files with v-for, showing an image when url exists.

Create a new files folder and build two Vue 3 components, files list and file item, to render a dynamic icon per mime type and validate image files.

refactor your Vue components from the options API to the composition API in Vue 3, using setup, ref, and onMounted to manage reactive data and lifecycle.

Add a sorting feature in a Vue 3 app with a sort toggler that switches ascending or descending and emits a sort change to fetch files from a mock API.

Learn to use watch and watch effect in Vue 3 to trigger the fetch files call when the sort changes, replacing on mounted with watch effect for immediate, reactive updates.

Learn to add a search form component in Vue 3 using two-way data binding with v-model, props, and update:modelValue. Connect it to the navbar to filter files by search term.

Learn how to use teleport to move a search form, enable two-way data binding with v-model for reactive queries, and connect it to a files component via a q property.

Learn to implement file selection (single and multi) in a Vue 3 app by using a reactive set of selected files in the files list component and emitting select-change events.

Learn to unselect items in Vue 3 by adding a clear selected function, stopping propagation, and emitting rename and remove events via the selected count.

Learn to implement a working remove feature for selected files in a Vue 3 app by confirming deletion, calling the server API, updating the UI, and showing a toast notification.

Show a form modal for renaming a file, with an input and cancel or ok buttons to persist changes, using a Vue 3 modal component.

Rename a file in a Vue 3 project using the Options API, with props and data, calling the files API and emitting file updated and close events.

Master custom directives in Vue 3 to auto-focus and highlight the base file name in a rename modal, using v-focus, v-highlight, mounted hooks, and nextTick.

Learn to handle a file updated event and rename a file in a Vue 3 app by locating the file index, splicing the array, and showing a toast notification.