Vue.js Advanced Techniques: Elevate Your Skills

Once you are comfortable with the basics of Vue.js, it’s time to explore more advanced techniques to build complex, real-world applications. This guide covers routing, state management, component communication, and performance optimization.

1. Vue Router: Navigating Your App

Vue Router allows you to build single-page applications (SPAs) with multiple views. It manages navigation between components without reloading the page.

Installation:

npm install vue-router@4

Basic Setup:

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

createApp(App).use(router).mount('#app')

Tips:

• Use <router-link> instead of <a> to prevent page reloads.
• Organize routes in a separate file for large apps.

2. State Management with Vuex or Pinia

Managing state across multiple components can be challenging. Vuex (official) or Pinia (modern alternative) centralizes your app’s state.

Example using Pinia:

import { createApp } from 'vue'
import { createPinia, defineStore } from 'pinia'
import App from './App.vue'

const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

// In a component:

import { useCounterStore } from './stores/counter'

const counter = useCounterStore()

Tip: Start with Pinia for simpler syntax and better TypeScript support.

3. Component Communication

Advanced Vue apps often require components to communicate efficiently.

Parent to Child: Use props to pass data.

<!-- Parent.vue -->
<ChildComponent :message="parentMessage" />

<script setup>
import ChildComponent from './ChildComponent.vue'
const parentMessage = 'Hello from Parent'
</script>

Child to Parent: Use events.

<!-- ChildComponent.vue -->
<button @click="$emit('update', 'Hello from Child')">Send</button>

<!-- Parent.vue -->
<ChildComponent @update="handleUpdate" />

<script setup>
function handleUpdate(msg) {
  console.log(msg)
}
</script>

Tip: For deeply nested components, consider state management instead of prop drilling.

4. Composition API for Clean Code

The Composition API is a modern approach to writing Vue components, making code more reusable and readable.

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

<template>
  <p>Count: {{ count }}</p>
  <p>Double: {{ double }}</p>
  <button @click="increment">Increment</button>
</template>

Tip: Use ref for reactive variables and computed for derived state.

5. Performance Optimization

Large Vue apps require careful optimization to maintain responsiveness and speed.

• Use v-if vs v-show wisely for conditional rendering.
• Lazy-load components with defineAsyncComponent.
• Use key attributes on v-for lists for efficient rendering.
• Debounce heavy event handlers like scroll or input events.

import { defineAsyncComponent } from 'vue'

const LazyComponent = defineAsyncComponent(() =>
  import('./LazyComponent.vue')
)