bragalund / complete-vuejs

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

Hi! Welcome to my course on Vue.js 3. Let's have a great time learning Vue.js 3 🎉.

Installation

I am using:

• node.js v12.18.3
• yarn 1.22.10

You can use whatever version, but I have only tested with those versions. Don't use yarn 2, it's really different to yarn 1.

master contains the completed code. Run projects with:

yarn vite --config vite.config.js <project>

Getting Started

Either clone master and yarn install, or start with getting-started and:

yarn add [email protected]
yarn add [email protected] --dev

Fundamentals #1: Options API

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

Project #1: Form Validation

• combining fundamentals to make something useful
• single file components!
• more v-model
• conditional rendering
• computed properties
• validation
• design patterns

Project #2: Pokemon Evolutions

• fetching data with the Fetch API
• reuables components with
• class + style bindings
• emitting events
• thinking in Vue

Fundamentals #2: Composition API

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

• ref
• reactive
• computed
• watch and watchEffect for side effects
• create your first "composable"
• check out VueUse

Project #3: Microblog Application

Build a project using the Composition API to display posts and filter via hashtags. Build a global store.

• likes
• filter
• typing
• reusing components
• composables, global state
• design patterns

Fundamentals #3: Vue Router

Learn about Vue Router for large, multi-page apps with client side routing - no refreshes.

• composition and options API usage
• highly complex applications
• seamless SPA experience

Fundamentals #4: Vuex

Learn Vuex, the official state management solution for Vue.

• the flux pattern for state management
• problem: we need the state everywhere
• solution: global reactive store

Project #4: Capstone Project: Photo Album

Combine the Composition API, Vue Router and Vuex to build a large, complex application.

• combining everything
• slots
• desien patterns
• vue/vuex/vue-router
• optimizing with caching in Vuex