@nuxt/docs-nightly 4.1.3-29314777.50febbbb → 4.1.3-29316215.910d159d

package/2.guide/1.directory-structure/1.server.md

@@ -24,7 +24,7 @@ The handler can directly return JSON data, a `Promise`, or use `event.node.res.e
 ```ts twoslash [server/api/hello.ts]
 export default defineEventHandler((event) => {
   return {
-    hello: 'world'
+    hello: 'world',
   }
 })
 ```
@@ -115,9 +115,9 @@ For example, you can define a custom handler utility that wraps the original han
 import type { EventHandler, EventHandlerRequest } from 'h3'
 
 export const defineWrappedResponseHandler = <T extends EventHandlerRequest, D> (
-  handler: EventHandler<T, D>
+  handler: EventHandler<T, D>,
 ): EventHandler<T, D> =>
-  defineEventHandler<T>(async event => {
+  defineEventHandler<T>(async (event) => {
     try {
       // do something before the route handler
       const response = await handler(event)
@@ -234,10 +234,10 @@ You can now universally call this API using:
 
 ```vue [app/app.vue]
 <script setup lang="ts">
-async function submit() {
+async function submit () {
   const { body } = await $fetch('/api/submit', {
     method: 'post',
-    body: { test: 123 }
+    body: { test: 123 },
   })
 }
 </script>
@@ -273,7 +273,7 @@ To return other error codes, throw an exception with [`createError`](/docs/4.x/a
 
 ```ts [server/api/validation/[id\\].ts]
 export default defineEventHandler((event) => {
-  const id = parseInt(event.context.params.id) as number
+  const id = Number.parseInt(event.context.params.id) as number
 
   if (!Number.isInteger(id)) {
     throw createError({
@@ -306,8 +306,8 @@ export default defineEventHandler(async (event) => {
 
   const repo = await $fetch('https://api.github.com/repos/nuxt/nuxt', {
     headers: {
-      Authorization: `token ${config.githubToken}`
-    }
+      Authorization: `token ${config.githubToken}`,
+    },
   })
 
   return repo
@@ -316,8 +316,8 @@ export default defineEventHandler(async (event) => {
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   runtimeConfig: {
-    githubToken: ''
-  }
+    githubToken: '',
+  },
 })
 ```
 ```ini [.env]
@@ -363,8 +363,8 @@ The `event.waitUntil` method accepts a promise that will be awaited before the h
 
 ```ts [server/api/background-task.ts]
 const timeConsumingBackgroundTask = async () => {
-  await new Promise((resolve) => setTimeout(resolve, 1000))
-};
+  await new Promise(resolve => setTimeout(resolve, 1000))
+}
 
 export default eventHandler((event) => {
   // schedule a background task without blocking the response
@@ -372,7 +372,7 @@ export default eventHandler((event) => {
 
   // immediately send the response to the client
   return 'done'
-});
+})
 ```
 
 ## Advanced Usage
@@ -388,7 +388,7 @@ This is an advanced option. Custom config can affect production deployments, as
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   // https://nitro.build/config
-  nitro: {}
+  nitro: {},
 })
 ```
 
@@ -468,14 +468,14 @@ export default defineNuxtConfig({
         driver: 'redis',
         /* redis connector options */
         port: 6379, // Redis port
-        host: "127.0.0.1", // Redis host
-        username: "", // needs Redis >= 6
-        password: "",
+        host: '127.0.0.1', // Redis host
+        username: '', // needs Redis >= 6
+        password: '',
         db: 0, // Defaults to 0
-        tls: {} // tls/ssl
-      }
-    }
-  }
+        tls: {}, // tls/ssl
+      },
+    },
+  },
 })
 ```
 
@@ -511,11 +511,11 @@ export default defineNitroPlugin(() => {
 
   // Dynamically pass in credentials from runtime configuration, or other sources
   const driver = redisDriver({
-      base: 'redis',
-      host: useRuntimeConfig().redis.host,
-      port: useRuntimeConfig().redis.port,
-      /* other redis connector options */
-    })
+    base: 'redis',
+    host: useRuntimeConfig().redis.host,
+    port: useRuntimeConfig().redis.port,
+    /* other redis connector options */
+  })
 
   // Mount driver
   storage.mount('redis', driver)
@@ -529,8 +529,8 @@ export default defineNuxtConfig({
       host: '',
       port: 0,
       /* other redis connector options */
-    }
-  }
+    },
+  },
 })
 ```
 ::

package/2.guide/1.directory-structure/1.shared.md

@@ -52,7 +52,7 @@ const hello = capitalize('hello')
 ```ts [server/api/hello.get.ts]
 export default defineEventHandler((event) => {
   return {
-    hello: capitalize('hello')
+    hello: capitalize('hello'),
   }
 })
 ```

package/2.guide/2.concepts/1.auto-imports.md

@@ -120,7 +120,7 @@ Nuxt exposes every auto-import with the `#imports` alias that can be used to mak
 
 ```vue
 <script setup lang="ts">
-import { ref, computed } from '#imports'
+import { computed, ref } from '#imports'
 
 const count = ref(1)
 const double = computed(() => count.value * 2)
@@ -134,8 +134,8 @@ If you want to disable auto-importing composables and utilities, you can set `im
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   imports: {
-    autoImport: false
-  }
+    autoImport: false,
+  },
 })
 ```
 
@@ -148,8 +148,8 @@ If you want framework-specific functions like `ref` to remain auto-imported but
 ```ts
 export default defineNuxtConfig({
   imports: {
-    scan: false
-  }
+    scan: false,
+  },
 })
 ```
 
@@ -174,8 +174,8 @@ To disable auto-importing components from your own `~/components` directory, you
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   components: {
-    dirs: []
-  }
+    dirs: [],
+  },
 })
 ```
 
@@ -195,10 +195,10 @@ export default defineNuxtConfig({
     presets: [
       {
         from: 'vue-i18n',
-        imports: ['useI18n']
-      }
-    ]
-  }
+        imports: ['useI18n'],
+      },
+    ],
+  },
 })
 ```
 

package/2.guide/2.concepts/2.vuejs-development.md

@@ -64,16 +64,16 @@ The only way to provide data and logic to components in Vue 2 was through the Op
 ```vue twoslash
 <script>
 export default {
-  data() {
+  data () {
     return {
-      count: 0
+      count: 0,
     }
   },
   methods: {
-    increment(){
+    increment () {
       this.count++
-    }
-  }
+    },
+  },
 }
 </script>
 ```

package/2.guide/2.concepts/3.rendering.md

@@ -25,17 +25,19 @@ It is normal to ask which parts of a Vue file runs on the server and/or the clie
 
 ```vue [app/app.vue]
 <script setup lang="ts">
-const counter = ref(0); // executes in server and client environments
+const counter = ref(0) // executes in server and client environments
 
 const handleClick = () => {
-  counter.value++; // executes only in a client environment
-};
+  counter.value++ // executes only in a client environment
+}
 </script>
 
 <template>
   <div>
     <p>Count: {{ counter }}</p>
-    <button @click="handleClick">Increment</button>
+    <button @click="handleClick">
+      Increment
+    </button>
   </div>
 </template>
 ```
@@ -83,7 +85,7 @@ You can enable client-side only rendering with Nuxt in your `nuxt.config.ts`:
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
-  ssr: false
+  ssr: false,
 })
 ```
 
@@ -111,7 +113,7 @@ export default defineNuxtConfig({
   hooks: {
     'prerender:routes' ({ routes }) {
       routes.clear() // Do not generate any routes (except the defaults)
-    }
+    },
   },
 })
 ```
@@ -133,14 +135,14 @@ export default defineNuxtConfig({
   ssr: false,
   nitro: {
     hooks: {
-      'prerender:generate'(route) {
+      'prerender:generate' (route) {
         const routesToSkip = ['/index.html', '/200.html', '/404.html']
         if (routesToSkip.includes(route.route)) {
           route.skip = true
         }
-      }
-    }
-  }
+      },
+    },
+  },
 })
 ```
 
@@ -172,8 +174,8 @@ export default defineNuxtConfig({
     // Add cors headers on API routes
     '/api/**': { cors: true },
     // Redirects legacy urls
-    '/old-page': { redirect: '/new-page' }
-  }
+    '/old-page': { redirect: '/new-page' },
+  },
 })
 ```
 

package/2.guide/2.concepts/5.modules.md

@@ -32,8 +32,8 @@ export default defineNuxtConfig({
     ['./modules/example', { token: '123' }],
 
     // Inline module definition
-    async (inlineOptions, nuxt) => { }
-  ]
+    async (inlineOptions, nuxt) => { },
+  ],
 })
 ```
 

package/2.guide/2.concepts/7.esm.md

@@ -120,8 +120,8 @@ In the meantime, you can tell Nuxt not to try to import these libraries by addin
 ```ts twoslash
 export default defineNuxtConfig({
   build: {
-    transpile: ['sample-library']
-  }
+    transpile: ['sample-library'],
+  },
 })
 ```
 
@@ -134,8 +134,8 @@ In some cases, you may also need to manually alias the library to the CJS versio
 ```ts twoslash
 export default defineNuxtConfig({
   alias: {
-    'sample-library': 'sample-library/dist/sample-library.cjs.js'
-  }
+    'sample-library': 'sample-library/dist/sample-library.cjs.js',
+  },
 })
 ```
 
@@ -182,6 +182,8 @@ import('cjs-pkg').then(console.log) // [Module: null prototype] { default: { tes
 
 In this case, we need to manually interop the default export:
 
+<!-- eslint-disable import/no-named-default -->
+
 ```js
 // Static import
 import { default as pkg } from 'cjs-pkg'
@@ -219,16 +221,16 @@ The initial step from CJS to ESM is updating any usage of `require` to use `impo
 
 ::code-group
 
-```js [Before]
-module.exports = ...
+```ts [Before]
+module.exports = function () { /* ... */ }
 
-exports.hello = ...
+exports.hello = 'world'
 ```
 
-```js [After]
-export default ...
+```ts [After]
+export default function () { /* ... */ }
 
-export const hello = ...
+export const hello = 'world'
 ```
 
 ::
@@ -242,7 +244,7 @@ const myLib = require('my-lib')
 ```js [After]
 import myLib from 'my-lib'
 // or
-const myLib = await import('my-lib').then(lib => lib.default || lib)
+const dynamicMyLib = await import('my-lib').then(lib => lib.default || lib)
 ```
 
 ::
@@ -253,7 +255,7 @@ and should be replaced with `import()` and `import.meta.filename`.
 ::code-group
 
 ```js [Before]
-import { join } from 'path'
+const { join } = require('node:path')
 
 const newDir = join(__dirname, 'new-dir')
 ```

package/2.guide/2.concepts/8.typescript.md

@@ -40,8 +40,8 @@ To enable type-checking at build or development time, you can also use the [`typ
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   typescript: {
-    typeCheck: true
-  }
+    typeCheck: true,
+  },
 })
 ```
 
@@ -133,7 +133,7 @@ If you are currently converting your codebase to TypeScript, you may want to tem
 ```ts twoslash [nuxt.config.ts]
 export default defineNuxtConfig({
   typescript: {
-    strict: false
-  }
+    strict: false,
+  },
 })
 ```

package/2.guide/3.going-further/1.events.md

@@ -16,7 +16,7 @@ You can create your own custom events using the `hook` method:
 ```ts
 const nuxtApp = useNuxtApp()
 
-nuxtApp.hook('app:user:registered', payload => {
+nuxtApp.hook('app:user:registered', (payload) => {
   console.log('A new user has registered!', payload)
 })
 ```
@@ -37,7 +37,7 @@ You can also use the payload object to enable two-way communication between the
 ```ts
 const nuxtApp = useNuxtApp()
 
-nuxtApp.hook('app:user:registered', payload => {
+nuxtApp.hook('app:user:registered', (payload) => {
   payload.message = 'Welcome to our app!'
 })