Vue Best Practices

Vue Best Practices is a community skill for writing maintainable Vue.js applications, covering component design patterns, state management strategies, performance optimization, code organization, and error handling for production Vue projects.

What Is This?

Overview

Vue Best Practices provides guidance on building maintainable and performant Vue.js applications following established patterns. It covers component design patterns that structure components with clear props, events, and slot interfaces for reusability and testability, state management strategies that choose between local component state, composables, and Pinia stores based on data scope and sharing requirements, performance optimization that applies lazy loading, virtual scrolling, and computed caching to reduce rendering overhead, code organization that structures projects with consistent file naming, directory layout, and module boundaries, and error handling that implements error boundaries and global error handlers for graceful failure recovery. The skill helps teams write Vue code that scales well with project growth.

Who Should Use This

This skill serves Vue developers building production applications, tech leads establishing coding standards for Vue projects, and teams refactoring existing Vue applications for maintainability.

Why Use It?

Problems It Solves

Components grow too large when logic is not properly extracted into composables and sub-components. State management becomes tangled when shared state is passed through many component layers. Performance degrades with unnecessary re-renders caused by improper reactivity usage. Inconsistent code organization slows onboarding and increases maintenance burden.

Core Highlights

Component patterns structure reusable interfaces with clear contracts. State strategies organize data flow with proper scope boundaries. Performance guide applies caching and lazy loading techniques. Organization rules establish consistent project structure conventions.

How to Use It?

Basic Usage

<script setup lang="ts">
// Composable extraction
import { useSearch }
  from '@/composables/\
useSearch';

interface Props {
  items: string[];
  placeholder?: string;
}

const props = withDefaults(
  defineProps<Props>(), {
    placeholder: 'Search'
  });

const emit = defineEmits<{
  select: [item: string];
}>();

const { query, filtered }
  = useSearch(
    () => props.items);
</script>

<template>
  <div>
    <input v-model="query"
      :placeholder=
        "placeholder" />
    <ul>
      <li v-for="item
        in filtered"
        :key="item"
        @click="emit(
          'select', item)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

Real-World Examples

// Composable pattern
import {
  ref, computed, Ref
} from 'vue';

export function useSearch(
  items: () => string[]
) {
  const query = ref('');

  const filtered = computed(
    () => {
      const q = query.value
        .toLowerCase();
      if (!q) return items();
      return items().filter(
        i => i.toLowerCase()
          .includes(q));
    });

  return { query, filtered };
}

// Pinia store pattern
import { defineStore }
  from 'pinia';

export const useAuthStore =
  defineStore('auth', () => {
    const user = ref(null);
    const isAuth = computed(
      () => !!user.value);
    async function login(
      creds: Credentials
    ) {
      user.value =
        await api.login(
          creds);
    }
    return {
      user, isAuth, login
    };
  });

Advanced Tips

Use defineModel for two-way binding on custom components to simplify parent-child data synchronization. Apply async components with defineAsyncComponent for routes and heavy components to reduce initial bundle size. Prefer computed over watchers for derived state since computed values cache results automatically.

When to Use It?

Use Cases

Refactor a large component into smaller focused components with extracted composables. Set up Pinia stores for shared application state with typed getters and actions. Optimize a slow list view with virtual scrolling and computed filtering.

Related Topics

Vue.js, Composition API, Pinia, composables, TypeScript, performance, and code organization.

Important Notes

Requirements

Vue 3 with Composition API for implementing modern component patterns and composable functions. TypeScript for type-safe props, emits, and store definitions that improve refactoring confidence. Pinia for shared state management across components that need synchronized data.

Usage Recommendations

Do: extract reusable logic into composables prefixed with use for consistent naming and discoverability. Define explicit TypeScript interfaces for component props and emits. Use Pinia stores only for genuinely shared state, not local component state.

Don't: create deeply nested component hierarchies that require excessive prop drilling through intermediate layers. Use watchers for values that can be expressed as computed properties instead. Mix Options API and Composition API within the same project since consistency improves maintainability.

Limitations

Best practices evolve with framework updates and community patterns may not match every project context. Composable extraction adds indirection that can reduce readability for simple components. TypeScript strict mode may require additional type annotations that increase code verbosity.