Claude Code Nuxt Vue Full Stack Workflow

Building modern full stack applications requires coordination between frontend frameworks, backend services, and deployment pipelines. Claude Code combined with Nuxt and Vue provides a powerful workflow that handles everything from scaffolding to testing. This guide walks through a practical approach for developers building production applications.

Project Initialization and Structure

Start by creating a new Nuxt project. Claude Code can bootstrap the entire structure with proper TypeScript configuration and folder organization.

npx nuxi@latest init my-nuxt-app --packageManager npm --gitInit false
cd my-nuxt-app

Once the project exists, create a CLAUDE.md file in the root directory to establish project conventions. This file tells Claude Code about your stack preferences, coding standards, and common patterns.

# Project Context

This is a Nuxt 3 + Vue 3 full stack application with TypeScript.
Use Composition API with `<script setup>` syntax.
Pinia for state management.
Server routes in /server/api for backend endpoints.

The supermemory skill helps maintain context across sessions. When working on complex features that span multiple coding sessions, invoke it with /skill supermemory to preserve architectural decisions and design choices.

Component Generation Workflow

The frontend-design skill accelerates component creation significantly. Instead of manually writing every Vue component, describe what you need and let Claude Code generate the structure.

For a typical dashboard page with navigation, data tables, and form components, the workflow looks like this:

Describe the page layout to Claude Code
Request individual components as needed
Review generated code for accuracy
Integrate into your page

<script setup lang="ts">
// Generated component structure
const props = defineProps<{
  title: string
  data: DataItem[]
}>()

const emit = defineEmits<{
  (e: 'update', value: DataItem): void
}>()
</script>

<template>
  <div class="dashboard-card">
    <h2>{{ title }}</h2>
    <DataTable :items="data" @update="emit('update', $event)" />
  </div>
</template>

The canvas-design skill proves useful when you need custom visualizations or icons within your components. Generate SVG assets programmatically rather than relying on external design tools during development.

Backend API Development

Nuxt server routes handle backend logic without separate deployments. Use a structured approach for API endpoints:

// server/api/users/[id].get.ts
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id')
  
  const user = await prisma.user.findUnique({
    where: { id: Number(id) }
  })
  
  if (!user) {
    throw createError({
      statusCode: 404,
      message: 'User not found'
    })
  }
  
  return user
})

For API documentation, the pdf skill generates comprehensive docs from your route definitions. Maintain clear documentation as your API grows:

# Generate API documentation
"Create a PDF documenting all /api routes with request/response examples"

The tdd skill helps write tests before implementing features. For API endpoints, describe the expected behavior and let it generate test cases:

// Test generated by Claude Code TDD workflow
describe('GET /api/users/:id', () => {
  it('returns user by id', async () => {
    const user = await $fetch('/api/users/1')
    expect(user).toHaveProperty('id')
    expect(user).toHaveProperty('email')
  })
  
  it('returns 404 for non-existent user', async () => {
    expect(() => $fetch('/api/users/99999'))
      .rejects.toThrow()
  })
})

State Management with Pinia

Vue applications benefit from centralized state management. Claude Code generates Pinia stores with proper typing and actions:

// stores/user.ts
import { defineStore } from 'pinia'

interface UserState {
  currentUser: User | null
  isAuthenticated: boolean
}

export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    currentUser: null,
    isAuthenticated: false
  }),
  
  actions: {
    async fetchCurrentUser() {
      try {
        const user = await $fetch<User>('/api/auth/me')
        this.currentUser = user
        this.isAuthenticated = true
      } catch {
        this.currentUser = null
        this.isAuthenticated = false
      }
    },
    
    async logout() {
      await $fetch('/api/auth/logout', { method: 'POST' })
      this.currentUser = null
      this.isAuthenticated = false
    }
  }
})

Form Handling and Validation

Forms require consistent validation patterns. Create reusable composables for form handling:

// composables/useForm.ts
export function useForm<T extends Record<string, any>>(initialValues: T) {
  const values = ref({ ...initialValues })
  const errors = ref<Record<string, string>>({})
  
  const validate = (rules: ValidationRules<T>) => {
    errors.value = {}
    for (const [field, rule] of Object.entries(rules)) {
      const value = values.value[field]
      if (rule.required && !value) {
        errors.value[field] = `${field} is required`
      }
      if (rule.minLength && value.length < rule.minLength) {
        errors.value[field] = `${field} must be at least ${rule.minLength} characters`
      }
    }
    return Object.keys(errors.value).length === 0
  }
  
  return { values, errors, validate }
}

Database Integration

Prisma pairs well with Nuxt for type-safe database operations. The workflow involves defining your schema, generating the client, and using it in server routes:

// prisma/schema.prisma
model Post {
  id        Int      @id @default(autoincrement())
  title     String
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
  createdAt DateTime @default(now())
}

model User {
  id    Int    @id @default(autoincrement())
  email String @unique
  name  String?
  posts Post[]
}

Run migrations and generate the client:

npx prisma migrate dev --name init
npx prisma generate

Deployment Pipeline

Deploy Nuxt applications to Vercel, Netlify, or Cloudflare Pages. Configure environment variables and deployment settings:

// vercel.json
{
  "buildCommand": "npm run build",
  "outputDirectory": ".output/public",
  "framework": "nuxt"
}

The claude-code-vercel-deployment workflow automates deployment configuration. For teams using GitHub Actions, the claude-skills-with-github-actions-ci-cd skill generates CI/CD pipelines that run tests and linting on every pull request.

Testing Strategy

Implement a multi-layer testing approach:

Unit tests: Individual composables and utilities
Component tests: Vue component rendering and interactions
API tests: Server route behavior
E2E tests: Full user flows

The tdd skill generates appropriate tests based on feature descriptions. For component testing with Vitest:

// components/__tests__/UserCard.spec.ts
import { mount } from '@vue/test-utils'
import UserCard from '../UserCard.vue'

describe('UserCard', () => {
  it('renders user information', () => {
    const user = { id: 1, name: 'John', email: 'john@example.com' }
    const wrapper = mount(UserCard, { props: { user } })
    
    expect(wrapper.text()).toContain('John')
    expect(wrapper.text()).toContain('john@example.com')
  })
})

Summary

Claude Code transforms Nuxt and Vue development through intelligent code generation, context preservation, and workflow automation. Key skills like frontend-design for components, tdd for test-first development, pdf for documentation, and supermemory for session continuity make full stack development faster and more consistent.

Build smaller, focused components. Test incrementally. Maintain documentation as you build rather than after. This workflow scales from small projects to larger team applications.

Built by theluckystrike — More at zovo.one