Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)

Create a new Vue 3 project by visiting the Vue 3 docs, switch to staging for the latest build, and ensure Node.js is installed.

Create a Vue 3 project with the build tool using npm init vue@latest, enable the router, install dependencies, and launch the dev server to view the app in the browser.

Set up a minimal Vue 3 project using the Composition API by simplifying views to home and about and wiring a header with route links.

Create a simple counter with the Options API and convert it to the composition API in the home view to compare both approaches, then style and center the UI.

Demonstrate how to use the options API to define a data object with a counter, plus methods to increase or decrease it, connected to template buttons.

Switch this app to the composition api while keeping the template unchanged; start with setup function pattern and use the script setup pattern, with data, computed properties, methods, and watches.

Create a reactive counter using the Vue 3 composition API with refs and a setup function. Define increase and decrease methods that use counter.value and bind to the template.

Learn how the script set-top pattern simplifies the Vue 3 composition API by removing export default, setup, and return statements, making data, methods, and computed properties auto-available in templates.

Introduce refs in the Vue.js 3 composition API, importing ref and using its value to manage reactive and non-reactive data, enabling two-way binding of titles in templates.

Explore how two-way data binding works in Vue JS 3's composition API by binding an input to a counter title ref, updating the heading in real time with v-model.

Learn to use a reactive object in Vue 3 composition API to store related data like count and title, enabling two-way data binding and template updates via methods.

Explore non-reactive data in Vue 3's composition API by using a constant title instead of ref or reactive, and bind it in the template for performance gains.

learn how to pass parameters to Vue 3 composition API methods to adjust a counter by a specified amount, use shorthand syntax, and access the event object in handlers.

Learn how to use computed properties with the Vue 3 composition API to determine if a counter is odd or even and render the result dynamically.

Vue 3 removed filters from the composition API; replace them with methods or computed properties per the migration guide. Use composables to create global, reusable logic like currency formatting.

Learn to use the Vue watch in the composition API to monitor a reactive count and alert when it reaches 20, contrasting with the options API.

Explore the Vue 3 composition API lifecycle with onBeforeMount and onMounted to run code at key component moments, and why avoiding mixing with the options API matters.

Explore activated and deactivated hooks in Vue 3’s composition API using onActivated and onDeactivated, and learn to keep components alive with keep-alive and route-to-view adjustments.

Explore Vue 3 Composition API lifecycle with on before update and updated hooks, applied to a home view; see how template changes trigger hooks in order during counter updates.

Apply the composition API to run multiple onMounted hooks for different concerns, keeping app title and counter logic together with block comments and organized imports.

Create and use custom directives in Vue with both options api and composition api, including a local v-autofocus directive that focuses an input on mount.

Create a global custom directive by moving the auto focus directive into a directives file, exporting and importing it for use across home and about views.

Learn how to use the route object in the composition API to access the id parameter, build a posts page, and configure a post detail route with dynamic id.

Create router links for post detail pages, pass id parameters, and read them with useRoute in a Vue 3 composition API app, including a back button.

use the Composition API with Vue Router's useRoute to access route params and display the post id in an alert when clicking a button.

Use the useRouter composable to programmatically navigate in the composition API, pushing by path or route name and using setTimeout to the post detail page by id after 3 seconds.

Dynamically render a list of posts using v-for with the composition API and a ref-based posts array. Bind post titles and dynamic routes with template strings and keys.

Learn how to use template refs in Vue 3's composition API to access DOM elements, read their width with ref.value and offsetWidth, and apply responsive adjustments.

Practice using vue's nextTick in the composition API to wait for DOM updates after state changes, and apply async/await to handle post-update actions.

Explore Teleport in Vue 3, moving DOM elements across the app, usable with both the composition and options APIs, and apply it to a models page with a modal.

Demonstrates using the Vue 3 teleport component to render a full-screen modal by moving it to the body or another container, with absolute positioning, z-index, and ancestor style overrides.

Refactor a modal into a reusable child component using the composition API, highlighting prop limits, model-value patterns, and provide/inject with dynamic components.

Learn how to eliminate first-load delays by eagerly importing lazy-loaded views in a Vue 3 composition API setup with Pinia, Firebase 9, and Vite.

Explore how the composition API handles slots, including named slots, with examples passing content from a parent to a modal view and accessing slot data in templates.

Explore passing props from a parent to a child with Vue 3's composition API. Define props with defineProps, set defaults, and access them in templates and scripts.

Close a modal in Vue 3 by emitting a custom event from the child. Use defineEmits to declare emits and set the parent's show modal ref to false on receipt.

Explore controlling a modal in Vue 3 with the composition API by passing a show modal boolean via v-model, using the modelValue prop and update:modelValue to toggle visibility.

Demonstrates how to replace custom events with update:modelValue in Vue 3, simplifying child-to-parent communication for showing and hiding modals.

Switch between components in Vue.js 3 composition API by using the is prop and a checkbox to toggle light and dark models.

Demonstrate dynamic components by switching between a light modal and a doc modal using a prop and a ternary, illustrating component reuse and the show doc models toggle.

Learn how provide/inject avoids prop drilling by passing data through deeply nested components in Vue 3 using the composition API, avoiding messy prop chains.

Explore how to share data across deeply nested Vue components using provide and inject, replacing props with a reactive data object in a Composition API setup.