Fundamentals #1: Options API

Learn about the Options API and the basics of Vue.js.

• 1.1: Notes before starting
• 1.2: Introduction
• 1.3: Your First Vue.js App
• 1.4: Adding a Template Property
• 1.5: User Interactions with Methods
• 1.6: Control Flow with v-if and v-else
• 1.7: Loops with v-for
• 1.8: Computed Properties
• 1.9: Class Bindings
• 1.10: Input Validation
• 1.11: The Amazing v-model
• 1.12: Your First Component
• 1.13: Component Props
• 1.14: Child-Parent Communication with Events

Project #1: Form Validation

See how to use the learnings from the previous section to build a form validation application, complete with reusable inputs, buttons and flexible validation.

• 2.1: Single File Components
• 2.2: A Custom Button Component
• 2.3: Custom Input Foundations
• 2.4: Dynamic Validation
• 2.5: Rethinking the Form State
• 2.6: Validating the Form
• 2.7: Submitting the Form and Finishing Up

Project #2: Pokemon Evolutions

Create another application. This time, we fetch data from remote resource and use slots to create a reusable card component.

• 3.1: Creating the Card Foundations
• 3.2: Loading Remote Data with Fetch
• 3.3: Fetching Multiple Data Sources
• 3.4: Lifecycle Hooks
• 3.5: Rendering Content
• 3.6: Modular Components with Slots
• 3.7: Reusing Code to Fetch Evolutions
• 3.8: Better Styles with Class Bindings
• 3.9: Separating Business Logic and Presentation Components

Fundamentals #2: Composition API

Learn Vue 3's most anticipated feature, the Composition API.

• 4.1: Composition Fundamentals Introduction
• 4.2: Hello, Composition API!
• 4.3: Reactivity with ref
• 4.4: Reactive for Complex Values
• 4.5: Composing Computed Properties
• 4.6: Watch and Watch Effect
• 4.7: Before and After with watch
• 4.8: The useNumbers Composable
• 4.9: Open Source Library: Vue Use

Project #3: Composing a Microblog

Put your Compisition API learnings to the test and build a simple Twitter-like application, complete with hashtags and likes.

• 5.1: Creating the Microblog Store
• 5.2: Render Posts with the Card Component
• 5.3: The Hashtag Component
• 5.4: Emitting Events with the Composition API
• 5.5: Filtering Posts with Computed
• 5.6: Refactoring with the Posts Store
• 5.7: Liking a Post
• 5.8: Searching for Hashtags
• 5.9: Mind Blowing Fefactor and Exercises

Fundamentals #3: Vue Router

Vue Router is the official router for Vue. You'll learn how to do client side routing. This enables you to build large, complex applications without a single refresh.

• 6.1: Vue Router Fundamentals
• 6.2: Hello Vue Router
• 6.3: The Router Link component
• 6.4: Children and Nested Routes
• 6.5: Route Params with the Composition API
• 6.6: New Post Route
• 6.7: New Post Form
• 6.8: usePosts Composable
• 6.9: Redirects with Vue Router
• 6.10: Options API Refactor

Fundamentals #4: Vuex

Learn Vuex, Vue's official state management solution.

• 7.1: Introduction to Vuex
• 7.2: Create a Vuex Store and State
• 7.3: Updating State with Mutations
• 7.4: More on Mutations
• 7.5: Dispatching Actions
• 7.6: Mocking the Server and Fetching Posts
• 7.7: Showing the Current Post
• 7.8: Vuex Getters
• 7.9: Scaling Vuex with Modules
• 7.10: Options API Refactor

Project #4: Capstone Project - Photo Album

Combine all of the skills you've learned to build a large, complex application, complete with routing and state management via Vuex.

• 8.1: Introduction to the Capstone Project
• 8.2: Setting Up Vuex
• 8.3: Scalable Layouts with Slots
• 8.4: Reusable Layouts
• 8.5: Fetching Albums with Fetch
• 8.6: Data Fetching Workflow with Vuex
• 8.7: Creating the Album Component
• 8.8: Fetching Thousands of Photos
• 8.9: Adding Routing
• 8.10: Improved Routing
• 8.11: Routing with Router Link
• 8.12: watchEffect and Routing Params
• 8.13: Vuex Level Caching for Better Performance
• 8.14: Conclusion, Exercises and Parting Words