Mastering Vue/Nuxt Code with AI Tools

Introduction

Developing in Vue 3 and Nuxt 3 can be challenging when using AI tools like Claude Code, Cursor, and GitHub Copilot, especially if they default to outdated coding practices. This guide explains how to set up these tools to consistently generate code aligned with modern standards, using the vue-claude-stack configuration.

Configuration Overview

The vue-claude-stack is a pre-configured setup that instructs AI tools to adhere to your project's coding standards. Here’s what it includes:

• CLAUDE.md: This file contains the rules and conventions for Claude Code.
• .cursorrules: Defines behavior rules for Cursor.
• .github/copilot-instructions.md: Provides guidelines for GitHub Copilot.
• skills/: Contains five specific generation commands for Claude Code.

AI Learning Objectives

• Use <script setup lang="ts"> consistently.
• Implement defineProps<T>() with TypeScript.
• Prefer Pinia setup stores with defineStore('name', () => {...}).
• Avoid using Options API, mixins, or any type.
• Utilize useFetch or useAsyncData for data fetching in Nuxt.
• Apply storeToRefs() when destructuring Pinia stores.

Generation Skills

The repository provides five Claude Code skills for direct invocation:

• Generate a component: /generate-component UserProfile --props "name, avatar" --emits "edit"
• Create a composable: /generate-composable useSearch
• Set up a store: /generate-store cart --actions "add, remove, clear"
• Develop a test: /generate-test components/UserProfile.vue
• Construct an API: /generate-api users/[id] --methods "get, put, delete"

These skills produce fully typed, convention-compliant code.

Quick Start Guide

To implement these configurations, you can clone everything or selectively download what's needed:

• Clone entire setup:

  npx degit mvtandas/vue-claude-stack ai-config
  cp -r ai-config/{CLAUDE.md,.cursorrules,.github,skills} .
  

• Download specific files:

  curl -o CLAUDE.md https://raw.githubusercontent.com/mvtandas/vue-claude-stack/main/CLAUDE.md
  curl -o .cursorrules https://raw.githubusercontent.com/mvtandas/vue-claude-stack/main/.cursorrules
  

Before & After Comparison

Before Configuration

<script>
export default {
  data() {
    return { name: '' }
  },
  methods: {
    async fetchUser() {
      const res = await fetch('/api/user')
      this.name = res.data.name
    }
  }
}
</script>

After Configuration

<script setup lang="ts">
interface User {
  name: string
}

const { data: user } = await useFetch<User>('/api/user')
</script>

<template>
  <p>{{ user?.name }}</p>
</template>

This transformation illustrates how a single prompt can yield vastly different outputs based on configuration.

Supported Technologies

The vue-claude-stack supports Vue 3.5+, Nuxt 3, TypeScript strict mode, Pinia, VueUse, Tailwind CSS, Vitest, Zod, and Vue Router.

Conclusion

Optimizing AI tools with the vue-claude-stack can significantly enhance your Vue/Nuxt development workflow, ensuring code quality and consistency. The setup is open under the MIT license and can be customized to meet the specific needs of your team.