Vue.js Tutorials & Guides

Learn Vue.js
The Right Way.

Practical Vue.js and Nuxt.js tutorials for developers at every level. From composition API basics to production-ready patterns.

Beginner Tutorials Intermediate Guides Advanced Patterns Nuxt.js Guides
Level 1

Vue.js Beginner Tutorials

Start here if you're new to Vue.js. Learn the fundamentals with practical examples.

Beginner15 min read

Vue 3 Composition API Basics: Setup() vs Reactive()

Master the foundation of Vue 3's Composition API. Learn when to use setup() function versus reactive() and ref() for reactive state management. Includes practical examples for building reactive components without Options API.

Composition APIReactivityVue 3 FundamentalsRef() vs Reactive()

What you'll learn:

  • •When to use setup() function vs composition functions
  • •Difference between ref() and reactive() with practical examples
  • •How to organize composition logic for maintainable components
  • •Best practices for reactive state management in Vue 3

Code Example:

// Composition API with reactive()
import { reactive, computed } from 'vue'

export function useCounter() {
  const state = reactive({
    count: 0,
    doubleCount: computed(() => state.count * 2)
  })

  const increment = () => {
    state.count++
  }

  return { state, increment }
}

// Usage in component
const { state, increment } = useCounter()
Beginner12 min read

Vue Router Navigation: Dynamic Routes & Route Guards

Learn how to implement client-side routing in Vue.js applications. From basic route setup to dynamic route parameters, nested routes, and route guards for authentication.

Vue RouterNavigation GuardsDynamic RoutesSPA Routing

What you'll learn:

  • •Setting up Vue Router 4 with proper TypeScript support
  • •Dynamic route parameters and URL pattern matching
  • •Global and per-route navigation guards for authentication
  • •Lazy loading routes for better performance

Code Example:

// Route guard for authentication
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/dashboard',
      component: () => import('./Dashboard.vue'),
      meta: { requiresAuth: true }
    }
  ]
})

// Global navigation guard
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login')
  } else {
    next()
  }
})
Level 2

Intermediate Vue.js Guides

Take your Vue.js skills to the next level with state management, performance, and advanced patterns.

Intermediate18 min read

Pinia State Management: Complete Guide for Vue 3

Replace Vuex with Pinia for simpler, TypeScript-friendly state management. Learn stores, actions, getters, and persistence patterns for production applications.

PiniaState ManagementTypeScriptVue 3

What you'll learn:

  • •Setting up Pinia with TypeScript and Composition API
  • •Creating stores with actions, getters, and state
  • •Persisting Pinia stores to localStorage/IndexedDB
  • •When to use Pinia vs local component state

Code Example:

// Pinia store with TypeScript
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    user: null as User | null,
    isAuthenticated: false
  }),
  
  actions: {
    async login(credentials: LoginData) {
      const response = await api.login(credentials)
      this.user = response.user
      this.isAuthenticated = true
    },
    
    logout() {
      this.user = null
      this.isAuthenticated = false
    }
  },
  
  getters: {
    fullName: (state) => 
      state.user ? `${state.user.firstName} ${state.user.lastName}` : ''
  }
})
Intermediate20 min read

Vue.js Performance Optimization: Virtual DOM & Reactivity

Learn how Vue's Virtual DOM works and optimize your applications for speed. From component memoization to lazy loading and reducing render cycles.

PerformanceVirtual DOMMemoizationBundle Optimization

What you'll learn:

  • •How Vue's Virtual DOM diffing algorithm works
  • •Using v-memo for component memoization
  • •Lazy loading components with Suspense
  • •Optimizing bundle size with code splitting

Code Example:

// Component memoization with v-memo
<template>
  <div v-memo="[user.id]">
    <UserProfile :user="user" />
    <UserStats :stats="stats" />
  </div>
</template>

// Lazy loading with Suspense
<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>
Level 3

Advanced Vue.js Patterns

Master production-ready patterns for scalable Vue.js applications.

Advanced25 min read

Vue Composables: Building Custom Hooks for Reusable Logic

Learn to create custom composables for cross-cutting concerns like authentication, API calls, form handling, and real-time data. Build a library of reusable Vue 3 composition functions.

ComposablesCustom HooksReusable LogicTypeScript

What you'll learn:

  • •Design patterns for effective Vue composables
  • •Building type-safe composables with TypeScript generics
  • •Managing side effects and cleanup in composables
  • •Testing composables with Vitest and Vue Test Utils

Code Example:

// Custom useFetch composable
import { ref, onUnmounted } from 'vue'

export function useFetch<T>(url: string) {
  const data = ref<T | null>(null)
  const error = ref<Error | null>(null)
  const loading = ref(false)
  const controller = new AbortController()

  const fetchData = async () => {
    loading.value = true
    try {
      const response = await fetch(url, { 
        signal: controller.signal 
      })
      data.value = await response.json()
    } catch (err) {
      error.value = err as Error
    } finally {
      loading.value = false
    }
  }

  onUnmounted(() => {
    controller.abort()
  })

  return { data, error, loading, fetchData }
}
Framework

Nuxt.js Guides

Server-side rendering, static site generation, and production deployment with Nuxt 3.

Nx

Nuxt 3 SEO & Meta Tags

SSR

Implement server-side meta tags, Open Graph, and structured data for optimal SEO in Nuxt 3 applications. Use useHead() and definePageMeta() for dynamic SEO.

Read Guide →
Nx

Nuxt Server Routes & API

API

Build serverless API endpoints directly in your Nuxt 3 application using Nitro server routes. Handle authentication, database queries, and third-party API integration.

Read Guide →
Keep Learning

Want more Vue.js tutorials?

Join our Vue.js community to get notified when we publish new guides, tutorials, and best practices.

Join Vue Collective Join Slack Community