How to Make Claude Code & Cursor Write Perfect Vue/Nuxt Code

Mustafa Vatandaş — Tue, 14 Apr 2026 09:09:15 +0000

If you're using Claude Code, Cursor, or GitHub Copilot for Vue/Nuxt development, you've probably seen this:

Options API instead of Composition API
JavaScript instead of TypeScript
Vuex instead of Pinia
any everywhere
this.something in <script setup>

The fix is simple: tell the AI your project's rules.

The Setup

I created vue-claude-stack — a drop-in config that makes AI tools generate correct Vue 3 & Nuxt 3 code.

It includes:

File	Tool	Purpose
`CLAUDE.md`	Claude Code	Project conventions & rules
`.cursorrules`	Cursor	AI behavior rules
`.github/copilot-instructions.md`	Copilot	Code generation guidelines
`skills/`	Claude Code	5 generation commands

What the AI learns

Once you drop these files in your project, the AI knows:

Always use <script setup lang="ts">
Always use defineProps<T>() with TypeScript
Always use Pinia setup stores (defineStore('name', () => {...}))
Never use Options API, mixins, or any
Use useFetch/useAsyncData for data fetching in Nuxt
Use storeToRefs() when destructuring Pinia stores

Generation Skills

The repo includes 5 Claude Code skills you can invoke directly:


bash
/generate-component UserProfile --props "name, avatar" --emits "edit"
/generate-composable useSearch
/generate-store cart --actions "add, remove, clear"  
/generate-test components/UserProfile.vue
/generate-api users/[id] --methods "get, put, delete"
Each skill generates fully typed, convention-following code.

Quick Start

# Copy everything
npx degit mvtandas/vue-claude-stack ai-config
cp -r ai-config/{CLAUDE.md,.cursorrules,.github,skills} .
Or just grab what you need:


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

# Just Cursor rules
curl -o .cursorrules https://raw.githubusercontent.com/mvtandas/vue-claude-stack/main/.cursorrules
Before & After
Before (no config):


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


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

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

<template>
  <p>{{ user?.name }}</p>
</template>
Same prompt. Completely different output.

Stack Covered
Vue 3.5+, Nuxt 3, TypeScript strict, Pinia, VueUse, Tailwind CSS, Vitest, Zod, Vue Router.

GitHub: mvtandas/vue-claude-stack

MIT licensed. Star it if you find it useful, and feel free to fork & customize for your team.

I Built an AI-Powered Stock Analysis Platform with Next.js and Claude AI

Mustafa Vatandaş — Mon, 13 Apr 2026 12:12:06 +0000

I Built an AI-Powered Stock Analysis Platform with Next.js and Claude AI

After months of manually analyzing stocks and switching between multiple tools, I decided to build my own platform. Meet BistBase — an AI-powered stock analysis platform for the Turkish stock market (BIST).

🤔 The Problem

As a developer who trades on BIST, I was frustrated with:

Switching between 5+ tabs for different analysis tools
No AI-powered insights in Turkish market context
Expensive premium tools with features I didn't need
No backtesting capability for my strategies

💡 The Solution

I built BistBase — a full-stack platform that combines:

Real-time market data via Yahoo Finance API
AI analysis using Anthropic Claude SDK
Technical indicators (RSI, MACD, Bollinger Bands)
Backtesting engine for strategy validation
Portfolio tracking with email alerts

🛠 Tech Stack

Layer	Technology	Why?
Frontend	Next.js 16 + React 19	App Router, Server Components, great DX
Language	TypeScript 5	Type safety across full stack
Database	PostgreSQL + Prisma	Relational data, type-safe ORM
Cache	Upstash Redis	Rate limiting + data caching
AI	Anthropic Claude SDK	Best at understanding financial context
Auth	NextAuth 5	Flexible, built for Next.js
Charts	Lightweight Charts	TradingView-quality charts, lightweight
Monitoring	Sentry	Error tracking + performance
Styling	Tailwind CSS 4 + shadcn/ui	Rapid UI development

🤖 Why Claude for Financial Analysis?

I tested three AI models:

Claude — Best at understanding Turkish market context. Long context window helps analyze larger datasets. ~85% accuracy on backtesting predictions.
GPT-4 — Good general analysis but misses BIST-specific patterns.
Gemini — Fast but less accurate for technical indicators.

The key insight: combine AI analysis with traditional technical indicators rather than relying solely on LLM output.

// Simplified AI analysis flow
const analysis = await anthropic.messages.create({
  model: 'claude-sonnet-4-20250514',
  messages: [{
    role: 'user',
    content: `Analyze ${stock.symbol} with these indicators:
      RSI: ${indicators.rsi}
      MACD: ${indicators.macd}
      Volume trend: ${indicators.volume}
      Provide buy/sell/hold recommendation with reasoning.`
  }]
})

📊 Architecture

┌─────────────────────────────────────────┐
│           Next.js 16 App Router         │
├──────────┬──────────┬──────────────────┤
│ Dashboard│ Analysis │ Backtesting      │
├──────────┴──────────┴──────────────────┤
│              API Routes (25+)           │
├──────────┬──────────┬──────────────────┤
│ Prisma   │ Claude   │ Yahoo Finance    │
│ (PgSQL)  │ SDK      │ API              │
├──────────┼──────────┼──────────────────┤
│ Upstash  │ NextAuth │ Sentry           │
│ Redis    │          │                  │
└──────────┴──────────┴──────────────────┘

🔑 Key Learnings

Rate limiting is crucial — Yahoo Finance API has strict limits. Redis-based rate limiter saved me from getting blocked.
Cache aggressively — Stock data doesn't change every millisecond. 30-second cache reduced API calls by 80%.
AI needs guardrails — Raw LLM output is unreliable for financial decisions. Always validate with real indicators.
Server Components = Performance — Moving data fetching to RSC reduced client-side JS by 60%.

📈 Results

25+ API endpoints
Sub-200ms response times (thanks to Redis caching)
~85% accuracy on AI-assisted backtesting
Dark mode because traders trade at night 🌙

🔗 Links

GitHub: github.com/mvtandas/bistbase
Author: Mustafa Vatandaş — Lead Frontend Developer

What AI-powered tools have you built? I'd love to hear about your experience with integrating LLMs into production apps. Drop a comment below!

DEV Community: Mustafa Vatandaş

How to Make Claude Code & Cursor Write Perfect Vue/Nuxt Code

The Setup

What the AI learns

Generation Skills

I Built an AI-Powered Stock Analysis Platform with Next.js and Claude AI

I Built an AI-Powered Stock Analysis Platform with Next.js and Claude AI

🤔 The Problem

💡 The Solution

🛠 Tech Stack

🤖 Why Claude for Financial Analysis?

📊 Architecture

🔑 Key Learnings

📈 Results

🔗 Links