Implementing Server-Side Rendering and Static Site Generation with Nuxt 3

{
  "title": "Implementing Server-Side Rendering and Static Site Generation with Nuxt 3",
  "description": "Guidelines for using Nuxt 3 to enhance SEO and initial load times through server-side rendering and static site generation in Vue applications.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "id": "nuxt3-ssr-ssg-configuration",
      "description": "Ensure Nuxt 3 applications are configured for Server-Side Rendering (SSR) or Static Site Generation (SSG) to improve SEO and initial load times.",
      "severity": "error",
      "condition": {
        "anyOf": [
          {
            "property": "nuxt.config.ts",
            "contains": "ssr: true"
          },
          {
            "property": "nuxt.config.ts",
            "contains": "ssr: false"
          }
        ]
      },
      "actions": [
        {
          "type": "add",
          "property": "nuxt.config.ts",
          "value": "export default defineNuxtConfig({ ssr: true })"
        }
      ]
    },
    {
      "id": "nuxt3-prerender-routes",
      "description": "Define routes for pre-rendering in Nuxt 3 to generate static pages at build time.",
      "severity": "warning",
      "condition": {
        "property": "nuxt.config.ts",
        "notContains": "prerender: { routes:"
      },
      "actions": [
        {
          "type": "add",
          "property": "nuxt.config.ts",
          "value": "export default defineNuxtConfig({ nitro: { prerender: { routes: ['/'] } } })"
        }
      ]
    },
    {
      "id": "nuxt3-async-data-fetching",
      "description": "Use asyncData method in Nuxt 3 for fetching data during server-side rendering to ensure content is available at build time.",
      "severity": "error",
      "condition": {
        "property": "*.vue",
        "notContains": "asyncData"
      },
      "actions": [
        {
          "type": "add",
          "property": "*.vue",
          "value": "export default { async asyncData({ $axios }) { const data = await $axios.$get('https://api.example.com/data'); return { data }; } }"
        }
      ]
    },
    {
      "id": "nuxt3-lazy-loading-components",
      "description": "Implement lazy loading for non-critical components in Nuxt 3 to improve initial load times.",
      "severity": "warning",
      "condition": {
        "property": "*.vue",
        "notContains": "Lazy"
      },
      "actions": [
        {
          "type": "add",
          "property": "*.vue",
          "value": "export default { components: { LazyComponent: () => import('@/components/LazyComponent.vue') } }"
        }
      ]
    },
    {
      "id": "nuxt3-image-optimization",
      "description": "Use Nuxt Image module for optimized image handling to enhance performance in Nuxt 3 applications.",
      "severity": "warning",
      "condition": {
        "property": "nuxt.config.ts",
        "notContains": "modules: ['@nuxt/image']"
      },
      "actions": [
        {
          "type": "add",
          "property": "nuxt.config.ts",
          "value": "export default defineNuxtConfig({ modules: ['@nuxt/image'] })"
        }
      ]
    }
  ]
}