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

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.