---

name: building-vue-apps description: Builds production Vue 3 applications with Composition API, TypeScript, Pinia, and Vue Router. Use when creating Vue.js SPAs, component libraries, or reactive web interfaces.

Vue.js

Quick Start

Copy<script setup lang="ts">
import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);
</script>

<template>
  <button @click="count++">
    Count: {{ count }} (doubled: {{ doubled }})
  </button>
</template>

Features

Common Patterns

Component with Props and Emits

Copy<script setup lang="ts">
interface Props {
  user: { id: string; name: string; email: string };
  showActions?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  showActions: true,
});

const emit = defineEmits<{
  (e: 'edit', user: Props['user']): void;
  (e: 'delete', id: string): void;
}>();
</script>

<template>
  <div class="user-card">
    <h3>{{ user.name }}</h3>
    <p>{{ user.email }}</p>
    <div v-if="showActions">
      <button @click="emit('edit', user)">Edit</button>
      <button @click="emit('delete', user.id)">Delete</button>
    </div>
  </div>
</template>

Composable for Reusable Logic

Copy// composables/useFetch.ts
import { ref, watch, type Ref } from 'vue';

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

  async function fetchData() {
    loading.value = true;
    error.value = null;
    try {
      const response = await fetch(url.value);
      data.value = await response.json();
    } catch (e) {
      error.value = e as Error;
    } finally {
      loading.value = false;
    }
  }

  watch(url, fetchData, { immediate: true });

  return { data, loading, error, refetch: fetchData };
}

Pinia Store

Copy// stores/user.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useUserStore = defineStore('user', () => {
  const user = ref<User | null>(null);
  const token = ref<string | null>(null);

  const isAuthenticated = computed(() => !!user.value);

  async function login(credentials: { email: string; password: string }) {
    const res = await authService.login(credentials);
    user.value = res.user;
    token.value = res.token;
  }

  function logout() {
    user.value = null;
    token.value = null;
  }

  return { user, token, isAuthenticated, login, logout };
});

Workflows

Component Development

1. Define props interface with TypeScript
2. Define emits with typed events
3. Use <script setup> syntax
4. Create composables for reusable logic
5. Write tests with Vitest + Vue Test Utils

Router Setup

Copyconst routes = [
  { path: '/', component: () => import('./views/Home.vue') },
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue'),
    meta: { requiresAuth: true },
  },
];

router.beforeEach((to, from, next) => {
  const userStore = useUserStore();
  if (to.meta.requiresAuth && !userStore.isAuthenticated) {
    next({ path: '/login', query: { redirect: to.fullPath } });
  } else {
    next();
  }
});

Best Practices

Project Structure

Copysrc/
├── App.vue
├── main.ts
├── components/         # Reusable components
├── composables/        # Composition functions
├── views/              # Page components
├── stores/             # Pinia stores
├── router/             # Route definitions
├── services/           # API services
└── types/              # TypeScript types

For detailed examples and patterns, see reference files above.