@nuxt/docs-nightly 4.1.3-29313386.edc02e27 → 4.1.3-29316215.910d159d

package/1.getting-started/01.introduction.md

@@ -44,7 +44,7 @@ Overall, server-side rendering can provide a faster and more efficient user expe
 As Nuxt is a versatile framework, it gives you the possibility to statically render your whole application to a static hosting with `nuxt generate`,
 disable SSR globally with the `ssr: false` option or leverage hybrid rendering by setting up the `routeRules` option.
 
-:read-more{title="Nuxt rendering modes" to="/docs/guide/concepts/rendering"}
+:read-more{title="Nuxt rendering modes" to="/docs/4.x/guide/concepts/rendering"}
 
 ### Server engine
 
@@ -54,19 +54,19 @@ In development, it uses Rollup and Node.js workers for your server code and cont
 
 In production, Nitro builds your app and server into one universal `.output` directory. This output is light: minified and removed from any Node.js modules (except polyfills). You can deploy this output on any system supporting JavaScript, from Node.js, Serverless, Workers, Edge-side rendering or purely static.
 
-:read-more{title="Nuxt server engine" to="/docs/guide/concepts/server-engine"}
+:read-more{title="Nuxt server engine" to="/docs/4.x/guide/concepts/server-engine"}
 
 ### Production-ready
 
 A Nuxt application can be deployed on a Node or Deno server, pre-rendered to be hosted in static environments, or deployed to serverless and edge providers.
 
-:read-more{title="Deployment section" to="/docs/getting-started/deployment"}
+:read-more{title="Deployment section" to="/docs/4.x/getting-started/deployment"}
 
 ### Modular
 
 A module system allows you to extend Nuxt with custom features and integrations with third-party services.
 
-:read-more{title="Nuxt Modules Concept" to="/docs/guide/concepts/modules"}
+:read-more{title="Nuxt Modules Concept" to="/docs/4.x/guide/concepts/modules"}
 
 ### Architecture
 

package/1.getting-started/02.installation.md

@@ -115,4 +115,4 @@ Well done! A browser window should automatically open for <http://localhost:3000
 
 Now that you've created your Nuxt project, you are ready to start building your application.
 
-:read-more{title="Nuxt Concepts" to="/docs/guide/concepts"}
+:read-more{title="Nuxt Concepts" to="/docs/4.x/guide/concepts"}

package/1.getting-started/03.configuration.md

@@ -20,7 +20,7 @@ export default defineNuxtConfig({
 
 This file will often be mentioned in the documentation, for example to add custom scripts, register modules or change rendering modes.
 
-::read-more{to="/docs/api/configuration/nuxt-config"}
+::read-more{to="/docs/4.x/api/configuration/nuxt-config"}
 Every option is described in the **Configuration Reference**.
 ::
 
@@ -36,16 +36,16 @@ You can configure fully typed, per-environment overrides in your nuxt.config
 export default defineNuxtConfig({
   $production: {
     routeRules: {
-      '/**': { isr: true }
-    }
+      '/**': { isr: true },
+    },
   },
   $development: {
     //
   },
   $env: {
     staging: {
-      // 
-    }
+      //
+    },
   },
 })
 ```
@@ -75,9 +75,9 @@ export default defineNuxtConfig({
     apiSecret: '123',
     // Keys within public are also exposed client-side
     public: {
-      apiBase: '/api'
-    }
-  }
+      apiBase: '/api',
+    },
+  },
 })
 ```
 
@@ -96,7 +96,7 @@ const runtimeConfig = useRuntimeConfig()
 </script>
 ```
 
-:read-more{to="/docs/guide/going-further/runtime-config"}
+:read-more{to="/docs/4.x/guide/going-further/runtime-config"}
 
 ## App Configuration
 
@@ -110,9 +110,9 @@ export default defineAppConfig({
   theme: {
     dark: true,
     colors: {
-      primary: '#ff0000'
-    }
-  }
+      primary: '#ff0000',
+    },
+  },
 })
 ```
 
@@ -124,7 +124,7 @@ const appConfig = useAppConfig()
 </script>
 ```
 
-:read-more{to="/docs/guide/directory-structure/app-config"}
+:read-more{to="/docs/4.x/guide/directory-structure/app-config"}
 
 ## `runtimeConfig` vs. `app.config`
 
@@ -178,16 +178,16 @@ If you need to pass options to `@vitejs/plugin-vue` or `@vitejs/plugin-vue-jsx`,
 export default defineNuxtConfig({
   vite: {
     vue: {
-      customElement: true
+      customElement: true,
     },
     vueJsx: {
-      mergeProps: true
-    }
-  }
+      mergeProps: true,
+    },
+  },
 })
 ```
 
-:read-more{to="/docs/api/configuration/nuxt-config#vue"}
+:read-more{to="/docs/4.x/api/configuration/nuxt-config#vue"}
 
 ### With webpack
 
@@ -199,13 +199,13 @@ export default defineNuxtConfig({
     loaders: {
       vue: {
         hotReload: true,
-      }
-    }
-  }
+      },
+    },
+  },
 })
 ```
 
-:read-more{to="/docs/api/configuration/nuxt-config#loaders"}
+:read-more{to="/docs/4.x/api/configuration/nuxt-config#loaders"}
 
 ### Enabling Experimental Vue Features
 
@@ -214,8 +214,8 @@ You may need to enable experimental features in Vue, such as `propsDestructure`.
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   vue: {
-    propsDestructure: true
-  }
+    propsDestructure: true,
+  },
 })
 ```
 
@@ -223,4 +223,4 @@ export default defineNuxtConfig({
 
 Since Nuxt 3.9 and Vue 3.4, `reactivityTransform` has been moved from Vue to Vue Macros which has a [Nuxt integration](https://vue-macros.dev/guide/nuxt-integration.html).
 
-:read-more{to="/docs/api/configuration/nuxt-config#vue-1"}
+:read-more{to="/docs/4.x/api/configuration/nuxt-config#vue-1"}

package/1.getting-started/04.views.md

@@ -13,7 +13,7 @@ By default, Nuxt will treat this file as the **entrypoint** and render its conte
 ```vue [app/app.vue]
 <template>
   <div>
-   <h1>Welcome to the homepage</h1>
+    <h1>Welcome to the homepage</h1>
   </div>
 </template>
 ```
@@ -82,7 +82,7 @@ To use pages, create an `app/pages/index.vue` file and add `<NuxtPage />` compon
 
 ::
 
-:read-more{title="Routing Section" to="/docs/getting-started/routing"}
+:read-more{title="Routing Section" to="/docs/4.x/getting-started/routing"}
 
 ## Layouts
 
@@ -162,4 +162,4 @@ export default defineNitroPlugin((nitroApp) => {
 })
 ```
 
-:read-more{to="/docs/guide/going-further/hooks"}
+:read-more{to="/docs/4.x/guide/going-further/hooks"}

package/1.getting-started/05.assets.md

@@ -21,7 +21,10 @@ For example, referencing an image file in the `public/img/` directory, available
 
 ```vue [app/app.vue]
 <template>
-  <img src="/img/nuxt.png" alt="Discover Nuxt" />
+  <img
+    src="/img/nuxt.png"
+    alt="Discover Nuxt"
+  >
 </template>
 ```
 
@@ -39,10 +42,13 @@ For example, referencing an image file that will be processed if a build tool is
 
 ```vue [app/app.vue]
 <template>
-  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt" />
+  <img
+    src="~/assets/img/nuxt.png"
+    alt="Discover Nuxt"
+  >
 </template>
 ```
 
 ::note
-Nuxt won't serve files in the [`app/assets/`](/docs/4.x/guide/directory-structure/app/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](/docs/getting-started/assets#public-directory) directory.
+Nuxt won't serve files in the [`app/assets/`](/docs/4.x/guide/directory-structure/app/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](/docs/4.x/getting-started/assets#public-directory) directory.
 ::

package/1.getting-started/06.styling.md

@@ -41,7 +41,7 @@ The natural place for your stylesheets is the [`app/assets/` directory](/docs/4.
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  css: ['~/assets/css/main.css']
+  css: ['~/assets/css/main.css'],
 })
 ```
 
@@ -113,7 +113,7 @@ The package can also be referenced as a string in the css property of your Nuxt
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  css: ['animate.css']
+  css: ['animate.css'],
 })
 ```
 
@@ -127,9 +127,9 @@ You can manipulate the head with the [`app.head`](/docs/4.x/api/nuxt-config#head
 export default defineNuxtConfig({
   app: {
     head: {
-      link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
-    }
-  }
+      link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }],
+    },
+  },
 })
 ```
 
@@ -137,11 +137,11 @@ export default defineNuxtConfig({
 
 You can use the useHead composable to dynamically set a value in your head in your code.
 
-:read-more{to="/docs/api/composables/use-head"}
+:read-more{to="/docs/4.x/api/composables/use-head"}
 
 ```ts twoslash
 useHead({
-  link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }]
+  link: [{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' }],
 })
 ```
 
@@ -198,7 +198,7 @@ Alternatively, you can use the `css` property of your Nuxt configuration.
 
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
-  css: ['~/assets/scss/main.scss']
+  css: ['~/assets/scss/main.scss'],
 })
 ```
 
@@ -234,11 +234,11 @@ export default defineNuxtConfig({
     css: {
       preprocessorOptions: {
         scss: {
-          additionalData: '@use "~/assets/_colors.scss" as *;'
-        }
-      }
-    }
-  }
+          additionalData: '@use "~/assets/_colors.scss" as *;',
+        },
+      },
+    },
+  },
 })
 ```
 
@@ -248,11 +248,11 @@ export default defineNuxtConfig({
     css: {
       preprocessorOptions: {
         sass: {
-          additionalData: '@use "~/assets/_colors.sass" as *\n'
-        }
-      }
-    }
-  }
+          additionalData: '@use "~/assets/_colors.sass" as *\n',
+        },
+      },
+    },
+  },
 })
 ```
 
@@ -267,13 +267,12 @@ Vite has made available an [experimental option](https://vite.dev/config/shared-
 You can enable this in your `nuxt.config`:
 
 ```ts
-
 export default defineNuxtConfig({
   vite: {
     css: {
-      preprocessorMaxWorkers: true // number of CPUs minus 1
-    }
-  }
+      preprocessorMaxWorkers: true, // number of CPUs minus 1
+    },
+  },
 })
 ```
 
@@ -298,14 +297,17 @@ You can leverage Vue SFC features to style your components with class and style
 const isActive = ref(true)
 const hasError = ref(false)
 const classObject = reactive({
-  active: true,
-  'text-danger': false
+  'active': true,
+  'text-danger': false,
 })
 </script>
 
 <template>
-  <div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
-  <div :class="classObject"></div>
+  <div
+    class="static"
+    :class="{ 'active': isActive, 'text-danger': hasError }"
+  />
+  <div :class="classObject" />
 </template>
 ```
 
@@ -315,13 +317,13 @@ const isActive = ref(true)
 const error = ref(null)
 
 const classObject = computed(() => ({
-  active: isActive.value && !error.value,
-  'text-danger': error.value && error.value.type === 'fatal'
+  'active': isActive.value && !error.value,
+  'text-danger': error.value && error.value.type === 'fatal',
 }))
 </script>
 
 <template>
-  <div :class="classObject"></div>
+  <div :class="classObject" />
 </template>
 ```
 
@@ -332,7 +334,7 @@ const errorClass = ref('text-danger')
 </script>
 
 <template>
-  <div :class="[{ active: isActive }, errorClass]"></div>
+  <div :class="[{ active: isActive }, errorClass]" />
 </template>
 ```
 
@@ -344,9 +346,9 @@ const styleObject = reactive({ color: 'red', fontSize: '13px' })
 </script>
 
 <template>
-  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
-  <div :style="[baseStyles, overridingStyles]"></div>
-  <div :style="styleObject"></div>
+  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }" />
+  <div :style="[baseStyles, overridingStyles]" />
+  <div :style="styleObject" />
 </template>
 ```
 
@@ -361,11 +363,13 @@ The binding will be dynamic, meaning that if the variable value changes, the sty
 
 ```vue
 <script setup lang="ts">
-const color = ref("red")
+const color = ref('red')
 </script>
 
 <template>
-  <div class="text">hello</div>
+  <div class="text">
+    hello
+  </div>
 </template>
 
 <style>
@@ -381,7 +385,9 @@ The scoped attribute allows you to style components in isolation. The styles dec
 
 ```vue
 <template>
-  <div class="example">hi</div>
+  <div class="example">
+    hi
+  </div>
 </template>
 
 <style scoped>
@@ -397,7 +403,9 @@ You can use [CSS Modules](https://github.com/css-modules/css-modules) with the m
 
 ```vue
 <template>
-  <p :class="$style.red">This should be red</p>
+  <p :class="$style.red">
+    This should be red
+  </p>
 </template>
 
 <style module>
@@ -451,9 +459,9 @@ export default defineNuxtConfig({
   postcss: {
     plugins: {
       'postcss-nested': {},
-      'postcss-custom-media': {}
-    }
-  }
+      'postcss-custom-media': {},
+    },
+  },
 })
 ```
 
@@ -492,7 +500,7 @@ Use different styles for different layouts.
 </style>
 ```
 
-:read-more{to="/docs/guide/directory-structure/app/layouts"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/layouts"}
 
 ## Third Party Libraries And Modules
 
@@ -523,7 +531,7 @@ If you are using [UnoCSS](https://unocss.dev/integrations/nuxt), note that it co
 
 Nuxt comes with the same `<Transition>` element that Vue has, and also has support for the experimental [View Transitions API](/docs/4.x/getting-started/transitions#view-transitions-api-experimental).
 
-:read-more{to="/docs/getting-started/transitions"}
+:read-more{to="/docs/4.x/getting-started/transitions"}
 
 ### Font Advanced Optimization
 
@@ -558,7 +566,9 @@ export default defineNuxtConfig({
         // start from the end of the array and go to the beginning
         for (let i = css.length - 1; i >= 0; i--) {
           // if it starts with 'entry', remove it from the list
-          if (css[i].startsWith('entry')) css.splice(i, 1)
+          if (css[i].startsWith('entry')) {
+            css.splice(i, 1)
+          }
         }
       }
     },

package/1.getting-started/07.routing.md

@@ -43,7 +43,7 @@ This file system routing uses naming conventions to create dynamic and nested ro
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/app/pages"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/pages"}
 
 ## Navigation
 
@@ -65,7 +65,7 @@ When a [`<NuxtLink>`](/docs/4.x/api/components/nuxt-link) enters the viewport on
 </template>
 ```
 
-:read-more{to="/docs/api/components/nuxt-link"}
+:read-more{to="/docs/4.x/api/components/nuxt-link"}
 
 ## Route Parameters
 
@@ -80,7 +80,7 @@ console.log(route.params.id)
 </script>
 ```
 
-:read-more{to="/docs/api/composables/use-route"}
+:read-more{to="/docs/4.x/api/composables/use-route"}
 
 ## Route Middleware
 
@@ -101,7 +101,7 @@ Example of an `auth` middleware protecting the `/dashboard` page:
 ::code-group
 
 ```ts twoslash [middleware/auth.ts]
-function isAuthenticated(): boolean { return false }
+function isAuthenticated (): boolean { return false }
 // ---cut---
 export default defineNuxtRouteMiddleware((to, from) => {
   // isAuthenticated() is an example method verifying if a user is authenticated
@@ -114,7 +114,7 @@ export default defineNuxtRouteMiddleware((to, from) => {
 ```vue twoslash [pages/dashboard.vue]
 <script setup lang="ts">
 definePageMeta({
-  middleware: 'auth'
+  middleware: 'auth',
 })
 </script>
 
@@ -125,7 +125,7 @@ definePageMeta({
 
 ::
 
-:read-more{to="/docs/guide/directory-structure/app/middleware"}
+:read-more{to="/docs/4.x/guide/directory-structure/app/middleware"}
 
 ## Route Validation
 
@@ -138,12 +138,12 @@ If you have a more complex use case, then you can use anonymous route middleware
 ```vue twoslash [pages/posts/[id\\].vue]
 <script setup lang="ts">
 definePageMeta({
-  validate: async (route) => {
+  validate (route) {
     // Check if the id is made up of digits
     return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
-  }
+  },
 })
 </script>
 ```
 
-:read-more{to="/docs/api/utils/define-page-meta"}
+:read-more{to="/docs/4.x/api/utils/define-page-meta"}