Complete Vue.js 3 (Inc. Composition API, Vue Router, Vuex)

Validate a user sign-up form with a reusable input component and a single-file component, enforce a five-character minimum for fields and ten for the password, and enable submission when valid.

Build a reusable button as a Vue single-file component, define background, color, and disabled props, bind styles with v-bind, and use style scoped to keep styles contained.

Build a reusable Vue.js 3 input component with an accessible label, dynamic name binding, and proper props, applying v-bind and colon shorthand for concise, consistent form inputs.

Learn how to lift form state up in Vue.js 3 by turning input components into controlled props, emitting updates, and validating a multi-field form with username and password.

Lift the form state to the app, implement a validate function with error messages, and use props and events to manage a presentational input component, validating on create.

Validate the form with a derived computed property to enable the submit button, pass a password prop, and use a prevent modifier to submit without reloading.

Explore building reusable Vue card components using slots, fetch and render remote data for Pokemon cards, and dynamically load related cards in a single-page app.

Fetch remote data from the Pokemon API with fetch and async/await, map types to names, and extract id, name, and official artwork sprite for a lightweight Vue.js 3 app.

Fetch multiple data sources in Vue.js by mapping IDs, awaiting Promise.all to resolve three fetches, converting responses to json, and producing an array of data points.

Fetch data automatically on visit via the created hook, eliminating the need for a button. Learn how created and mounted differ for DOM access.

Render three pokemon with v-for, bind keys, display names, types, and images, and arrange cards in a horizontal flex layout while preparing a reusable card component with slots.

Learn to build a modular card component in Vue.js 3 using slots, including named slots with template, the slot directive, and directive modifiers to create reusable content areas.

Add a click listener to fetch the next two evolutions for a selected Pokemon, using injected IDs, and reuse the fetch data function to render evolutions.

Use Vue class bindings to make Pokemon cards selectable with hover opacity, track the selected card with a selected ID, and reveal IDs for clarity, signaling a planned refactor.

This lecture demonstrates refactoring to separate business logic from presentation by creating a reusable Pokémon Cards component, passing pokemons as a prop, and emitting events to fetch evolutions.

Explore Vue.js 3 composition fundamentals, compare the composition api with the options api, and learn via a simple app using setup, composables, and computed and watch.

Begin a Vue.js 3 project to explore the composition API and render a hello world message. Contrast setup function and explicit imports with the options API, enabling modular, decoupled reactivity.

Explore Vue's reactivity system with the composition API and learn to opt in using ref to create reactive values. Grasp ref unwrapping and difference from the Options API in templates.

Explore the reactive API to manage an object with A and B, contrast it with ref, and learn when to use reactive for complex values versus ref for primitives.

Compare watch and watchEffect in Vue 3's composition API, showing how watch targets specific data while watchEffect tracks dependencies automatically, with immediate options for initial calls.

Explore how to use watch to compare new and old values, convert to refs for accurate previous state tracking, watch multiple sources, and render a history log of changes.

Discover the composition API's power to group logic by behavior with composables, moving number history into useNumbers and decoupling reactivity from the view for maintainable Vue 3 code.

Explore open source Vue Use library to build reusable composables like use mouse that share global state across components, using refs, event listeners, and the composition API.

Create a microblog app with Vue 3 Composition API, a reusable post card, like and hashtag filters, multi-input data sources, and a global store with reactive state, methods, and getters.

Explore building a reactive microblog store with Vue 3's composition API, creating a reactive state, a store module, and rendering posts in the template using setup and v-for.

Render posts by reusing the card component with title, content, and description slots, wiring props via the composition api and integrating a controls component for likes and hashtags.

Render a like button with post likes and implement a modular Hashtag component to display and filter posts by hashtags using test data and the Composition API.

learn to emit events with the composition API by handling hashtag clicks, using context.emit, props, and ref to track the current tag.

Create a computed property to filter posts by the current hashtag, by looping posts and checking post.hashtags includes the current tag value, then render the filtered posts.

Refactor the posts feature by moving hashtag management into a central store using the composition API, replacing prop drilling and emission with a single set hashtag action.

Implement a like feature by wiring a click in the controls component to call the store increment for the post, updating likes and reinforcing a simple component-store pattern.

Search for hashtags using a text input, binding with the Composition API, refactoring with computed properties and store state, and handling input events to update the current hash tag.

Move complexity into the store using the composition API, employ computed properties with decoupled reactivity, and compare with the options API to build maintainable, scalable Vue apps.

Master Vue router fundamentals to build multi-page apps with client-side routing. Navigate posts without refreshes, create new posts with the composition API, and learn redirects and refactoring to options API.

Explore how to install and configure Vue Router to turn a single page app into a multi-route application, using create web history, routes, and a router-view.

Learn to use the router-link component for client-side routing in Vue, enabling navigation without page refresh and a seamless single page application experience.

Explore nested routes and dynamic routing with Vue Router by building a posts and post structure using dynamic segments, router-view, and nested routes that render post content by id.

Explore route params with the composition API by rendering posts dynamically, using Vue Router to link to post IDs and access route parameters for dynamic content.

Create a new post form in a Vue.js 3 app using the composition API, binding a reactive title and content with v-model, and handling submit for a seamless single-page experience.

Create a usePosts composable with the Vue 3 composition API to manage a reactive posts array and share it across components for adding posts and Vue Router navigation.

Enhance user experience by automatically redirecting to the newly created post after submission using Vue Router's push method, leveraging the Composition API to navigate to /posts/{id}.

This lecture shows refactoring a Vue app from the composition API to the options API, covering data, props, events, and router usage in options API.

Explore flux-based state management using Vuex to control data flow in a simple single-page app, including life cycle concepts and simulated api interactions.

Learn how to implement a Vuex store and state, install Vuex, create and integrate a global store with the composition and options APIs, and render count from state.

Learn to update Vuex state correctly using mutations and commits, avoiding direct state changes. Understand mutations, payload, and how reactivity refreshes components for scalable state management.

Master how mutations mutate Vuex state by committing set post ID, validating the mutation workflow with a two-post example, and ensuring reactivity through computed state.

Explore how actions work in Vuex within a Vue 3 app, dispatching fetch posts with an asynchronous delay and triggering data fetch on component mount using the composition API.

Execute the Vuex workflow by dispatching an action, committing a mutation, and updating the state to render posts from a simulated server fetch.

Derive the current post from the posts array with a computed property matching the selected ID, add defensive checks, and plan to move logic into the store for cleaner architecture.

Create a Vuex getter named current post to derive the post from state, moving the computed property logic from the component into the store and using store.getters.currentPost.

Scale a Vuex store by creating a namespaced posts module, moving state, mutations, actions, and getters, registering the module, and learning namespace-aware access.

Build a scalable photo application with Vue 3 composition API, Vue Router, and Vuex to fetch albums from a remote API, navigate routes, and optimize with view layer caching.

Build a photo album app using Vuex modules for albums and photos, with namespaces, state, mutations, actions, and wire the store with the composition API and router.

Learn to build a reusable, agnostic layout component in Vue 3 by using named slots for header, sidebar, and content, and composing it into an adaptable design system.

Fetch albums from json placeholder using the composition api, initialize albums as a ref, fetch on mounted, and render album titles in the sidebar.

Refactor the album data flow into Vuex by adding a fetch action, mutation, and namespaced state, then connect the component via the store and computed albums to render scalable data.

Create the album component, render a button to fetch photos, and dispatch a Vuex action using the album prop; the action will be implemented in the next lecture.

Add routing with Vue Router by creating a router with createRouter and createWebHistory and rendering the photo app via router-view, enabling direct URLs like album/1.

Refine routing in a Vue.js 3 app by adding a nested albums/:id route with a photo view component, using router-view and computed property from the Vuex store to render photos.

Use watchEffect to watch the route params and fetch photos on initial load and on each id change, updating the store and enabling caching for faster loads.

Learn how to boost Vuex performance by implementing a view-layer cache for album photos, using a hash map to map album id to photos and avoid redundant requests.

Advance styling, show the current album on selection, and add photo liking, while exploring opposite api rewrites and third-party libraries like views for deeper learning.