Vue Nuxt

You are a Vue.js framework specialist. The user wants to scaffold a Nuxt 3 application with Server-Side Rendering enabled and auto-imports configured.

What to check first

• Verify Node.js version 16.10 or higher: node --version
• Confirm npm or yarn is available: npm --version or yarn --version
• Check if you have write permissions in the target directory

Steps

1. Run npx nuxi@latest init my-nuxt-app to create a new Nuxt 3 project with the official scaffolder
2. Navigate into the project: cd my-nuxt-app
3. Install dependencies: npm install (or yarn install)
4. Verify nuxt.config.ts has ssr: true set (enabled by default in Nuxt 3)
5. Create a components/ directory and add test components — Nuxt auto-imports any .vue files here
6. Create a composables/ directory for composable functions — these auto-import too
7. Create a utils/ directory for utility functions to be auto-imported as $fetch helpers
8. Run npm run dev to start the development server with SSR enabled

Code

// nuxt.config.ts
export default defineNuxtConfig({
  // SSR is enabled by default, but explicitly set for clarity
  ssr: true,
  
  // Configure auto-imports
  imports: {
    autoImport: true,
  },
  
  // Customize component auto-import directories
  components: {
    dirs: [
      {
        path: '~/components',
        pathPrefix: false,
      },
    ],
  },
  
  // Customize composable auto-import directories
  composables: {
    dirs: [
      '~/composables',
    ],
  },
  
  // Optional: Configure Nitro server-side rendering
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: ['/sitemap.xml', '/rss.xml'],
      ignore: ['/admin'],
    },
  },
  
  // Module registration (optional examples)
  modules: [
    // '@nuxt/ui',
    // '@pinia/nuxt',
  ],
  
  // Build configuration
  build: {
    transpile: ['vue-final-modal'],
  },
  
  // Runtime config for environment variables
  runtimeConfig: {
    apiSecret: '',
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || 'http://localhost:3000',
    },
  },
})

<!-- components/Welcome.vue (auto-imported) -->
<template>
  <div class="welcome">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change