Cursor Rules Template: Nuxt3 Isomorphic Fetch with Tailwind — Cursor Rules Template

Overview

Direct answer: This Cursor rules template provides a copyable .cursorrules configuration for Nuxt 3 projects using Tailwind CSS and isomorphic fetch patterns to unify SSR/CSR data access under Cursor AI. It delivers stack-specific guidance and guardrails for safe AI-assisted development.

The Cursor rules configuration is a workspace instruction profile that guides Cursor AI to operate within the Nuxt 3 + Tailwind stack. It codifies architecture, security, testing, and coding standards so AI-assisted edits stay consistent, auditable, and production-ready.

When to Use These Cursor Rules

• When starting a Nuxt 3 project that uses Tailwind CSS and needs consistent SSR/CSR data fetching via Nuxt’s $fetch.
• When you want a reusable, copyable set of Cursor AI instructions that enforce safe AI-assisted changes and architecture boundaries.
• When you need clear guidelines for server routes, API integration, and security patterns that are compatible with Nuxt 3 deployment.
• When you require standardized testing, linting, and CI/CD checks that work with Nuxt 3 + Vitest/Playwright workflows.

Copyable .cursorrules Configuration

# .cursorrules
framework: nuxt3
stack: tailwind, isomorphic-fetch
version: 1.0
purpose: "Provide a Nuxt 3 + Tailwind tailwindcss-based UI with isomorphic fetch via $fetch for SSR/CSR"

Framework Role & Context
  - You are a Nuxt 3 frontend engineer with Vue 3 and Tailwind CSS in a modern SSR/SSG setup.
  - Use $fetch for all server calls; avoid direct browser fetch in SSR paths; centralize API URLs via runtimeConfig.
  - Align with Cursor AI policies for safe, auditable AI-assisted edits.

Code Style and Style Guides
  - Use TypeScript by default; name files with .ts/.tsx/.vue as appropriate.
  - Prefer Tailwind utility classes; avoid inline styles; ensure class names are readable.
  - Follow a consistent Nuxt 3 + Vue 3 style guide; honor project-specific eslint/prettier rules.

Architecture & Directory Rules
  - Follow Nuxt 3 best practices: pages/, components/, layouts/, composables/, plugins/, server/api/
  - Data fetching through a centralized API layer using $fetch; never call fetch() directly in components.
  - Centralize runtime configuration in nuxt.config.ts; do not hard-code API endpoints.
  - Use server routes for DB/API access; frontend consumes a stable API surface.

Authentication & Security Rules
  - Do not expose secrets in client code; use environment variables and runtimeConfig.
  - Prefer HTTP-only cookies or Bearer tokens; implement CSRF protection for state-changing endpoints.
  - Sanitize and validate all inputs; escape outputs to prevent XSS; enforce CORS whitelisting.

Database and ORM patterns
  - Frontend must never query a database directly. All data access goes through server/api endpoints.
  - Document schema and constraints at the API boundary; backend chooses ORM (e.g., Prisma) on server side.

Testing & Linting Workflows
  - Use Vitest for unit tests; Playwright for end-to-end tests; CI runs lint, type-check, and tests.
  - Enforce pre-commit checks with Husky; ensure tests cover API and UI interactions.

Prohibited Actions and Anti-patterns
  - Do not import node-only modules in client bundles.
  - Do not access browser globals in server or isomorphic code paths.
  - Do not ignore input validation on server endpoints.

Recommended Project Structure

nuxt-app/
  nuxt.config.ts
  tailwind.config.ts
  app/
  components/
  composables/
  layouts/
  middleware/
  pages/
  plugins/
  public/
  server/
    api/
  tsconfig.json
  .eslintrc.js
  .prettierrc

Core Engineering Principles

• Security-first by default: protect secrets, validate server inputs, and enable CSRF protection.
• SSR-friendly architecture: use $fetch, composables, and server routes; avoid client-only shortcuts in SSR paths.
• Type safety across client/server boundaries with strict TS config.
• Deterministic data handling: explicit error handling and fallback UI.
• Modular, testable design: feature-based directories, clear API boundaries, and test coverage.

Code Construction Rules

• Do not use direct DOM manipulation in Vue components; rely on reactive bindings instead.
• All API calls must go through a centralized API layer using $fetch; never call fetch() in components.
• Do not commit secrets; use runtimeConfig and environment variables.
• Name files and folders by feature domain; avoid deep coupling across unrelated parts.
• Use Tailwind for styling; keep inline styles out of component templates.
• Endpoint naming should be RESTful; version endpoints (v1) and use proper HTTP verbs.
• Testing: unit tests for components/composables, API integration tests, and end-to-end tests.
• Do not rely on browser-only globals in server routes or isomorphic code paths.

Security and Production Rules

• Never expose API secrets or private keys in frontend code; use environment variables.
• Enable CSRF protection and CORS with a strict whitelist for server endpoints.
• Use HTTP-only cookies for sessions; set Secure and SameSite attributes in production.
• Implement rate limiting and proper error handling to avoid Information Disclosure.
• Sanitize user inputs and validate server responses; avoid rendering untrusted content.

Testing Checklist

• Unit tests for components and composables using Vitest.
• Integration tests for server/api endpoints; cover success and error paths.
• End-to-end tests with Playwright for common user flows.
• CI/CD: run lint, type-check, tests, and production build verification.

Common Mistakes to Avoid

• Mixing client-only fetch in server routes or SSR paths.
• Hard-coding API URLs or secrets in frontend code.
• Skipping tests or failing to cover API boundary behavior.
• Disabling linting or not enforcing TypeScript strictness.

FAQ

What is the Cursor Rules Template for Nuxt 3?

A copyable Cursor rules configuration tailored for Nuxt 3 with Tailwind CSS and isomorphic fetch patterns. It defines conventions for architecture, security, testing, and Cursor AI interaction to help developers maintain consistent, safe AI-assisted development.

Which stack does this template cover?

Nuxt 3 (Vue 3), Tailwind CSS, and isomorphic fetch via Nuxt 3's $fetch for SSR/CSR; server/api endpoints support data access; frontend never queries a DB directly.

How do I paste the configuration?

Copy the entire code block under Copyable .cursorrules Configuration and paste into your project root as .cursorrules. Cursor will lint and enforce the rules during AI-assisted edits.

What about security and secrets?

Store secrets in environment variables and Nuxt runtimeConfig. Do not hard-code credentials; use HTTP-only cookies or Bearer tokens with CSRF protection for state-changing requests.

Do I need to adjust for my API base URL?

Yes. Update runtimeConfig.public.apiBase in nuxt.config.ts or your environment-based configuration. All API calls via $fetch should reference this base URL.