Purpose

Build Vue 3 applications using Composition API with

<script setup>

, Pinia for state management, and Vue Router for navigation.

When to use this skill

• writing Vue 3 components with

  <script setup>

  syntax
• managing state with Pinia stores (replacing Vuex)
• implementing Vue Router with navigation guards and dynamic routes
• migrating from Options API to Composition API

Do not use this skill when

• building React apps — prefer

  react-typescript

• building Svelte apps — prefer

  svelte

• the task is Tailwind styling — prefer

  tailwind-shadcn

Procedure

1. Create component — use

   <script setup lang="ts">

   for auto-imports and less boilerplate.
2. Declare reactive state —

   const count = ref(0)

   for primitives,

   const state = reactive({})

   for objects.
3. Computed values —

   const doubled = computed(() => count.value * 2)

   . Auto-tracks dependencies.
4. Watch effects —

   watch(source, callback)

   for explicit watching,

   watchEffect()

   for auto-tracked effects.
5. Set up Pinia — create store with

   defineStore('name', () => { ... })

   using setup syntax.
6. Configure Router — define routes with

   createRouter()

   . Add

   beforeEach

   guard for auth checks.
7. Composables — extract reusable logic into

   use*

   functions:

   useFetch

   ,

   useAuth

   ,

   useDebounce

   .
8. Type props —

   defineProps<{ title: string; count?: number }>()

   . Use

   withDefaults

   for default values.

Script setup component

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

const props = withDefaults(defineProps<{
  title: string;
  initialCount?: number;
}>(), { initialCount: 0 });

const emit = defineEmits<{
  (e: 'update', value: number): void;
}>();

const count = ref(props.initialCount);
const doubled = computed(() => count.value * 2);

function increment() {
  count.value++;
  emit('update', count.value);
}

onMounted(() => { console.log('Mounted'); });
</script>

<template>
  <div>
    <h2>{{ title }}</h2>
    <button @click="increment">{{ count }} ({{ doubled }})</button>
  </div>
</template>

Pinia store

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

export const useAuthStore = defineStore('auth', () => {
  const user = ref<User | null>(null);
  const isLoggedIn = computed(() => user.value !== null);

  async function login(email: string, password: string) {
    user.value = await api.login(email, password);
  }

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

  return { user, isLoggedIn, login, logout };
});

Vue Router with guards

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

router.beforeEach((to) => {
  const auth = useAuthStore();
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return { path: '/login', query: { redirect: to.fullPath } };
  }
});

Decision rules

• Always use

  <script setup>

  — less boilerplate, better type inference, auto-imports.

• ref

  for primitives,

  reactive

  for objects — but prefer

  ref

  for consistency (unwrap with

  .value

  ).
• Pinia setup syntax over options syntax — mirrors Composition API patterns.
• Lazy-load route components —

  () => import('./Page.vue')

  for code splitting.
• Extract shared logic into composables (

  use*

  functions) — do not duplicate across components.

References

• https://vuejs.org/guide/introduction.html
• https://pinia.vuejs.org/
• https://router.vuejs.org/

Related skills

• svelte

  — alternative frontend framework

• react-typescript

  — React patterns for comparison

• tailwind-shadcn

  — styling Vue components with Tailwind