@nuxt/docs 3.20.2 → 3.21.1

package/3.guide/4.modules/5.testing.md

@@ -0,0 +1,76 @@
+---
+title: "Test Your Module"
+description: "Learn how to test your Nuxt module with unit, integration and E2E tests."
+---
+
+Testing helps ensure your module works as expected given various setups. Find in this section how to perform various kinds of tests against your module.
+
+## Write Unit Tests
+
+::tip
+We're still discussing and exploring how to ease unit and integration testing on Nuxt modules.
+:br :br
+[Check out this RFC to join the conversation](https://github.com/nuxt/nuxt/discussions/18399).
+::
+
+## Write E2E Tests
+
+[Nuxt Test Utils](/docs/3.x/getting-started/testing) is the go-to library to help you test your module in an end-to-end way. Here's the workflow to adopt with it:
+
+1. Create a Nuxt application to be used as a "fixture" inside `test/fixtures/*`
+2. Setup Nuxt with this fixture inside your test file
+3. Interact with the fixture using utilities from `@nuxt/test-utils` (e.g. fetching a page)
+4. Perform checks related to this fixture (e.g. "HTML contains ...")
+5. Repeat
+
+In practice, the fixture:
+
+```ts [test/fixtures/ssr/nuxt.config.ts]
+// 1. Create a Nuxt application to be used as a "fixture"
+import MyModule from '../../../src/module'
+
+export default defineNuxtConfig({
+  ssr: true,
+  modules: [
+    MyModule,
+  ],
+})
+```
+
+And its test:
+
+```ts [test/rendering.ts]
+import { describe, expect, it } from 'vitest'
+import { fileURLToPath } from 'node:url'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
+
+describe('ssr', async () => {
+  // 2. Setup Nuxt with this fixture inside your test file
+  await setup({
+    rootDir: fileURLToPath(new URL('./fixtures/ssr', import.meta.url)),
+  })
+
+  it('renders the index page', async () => {
+    // 3. Interact with the fixture using utilities from `@nuxt/test-utils`
+    const html = await $fetch('/')
+
+    // 4. Perform checks related to this fixture
+    expect(html).toContain('<div>ssr</div>')
+  })
+})
+
+// 5. Repeat
+describe('csr', async () => { /* ... */ })
+```
+
+::tip
+An example of such a workflow is available on [the module starter](https://github.com/nuxt/starter/blob/module/test/basic.test.ts).
+::
+
+## Test Manually
+
+Having a playground Nuxt application to test your module when developing it is really useful. [The module starter integrates one for that purpose](/docs/3.x/guide/modules/getting-started#develop-your-module).
+
+You can test your module with other Nuxt applications (applications that are not part of your module repository) locally. To do so, you can use [`npm pack`](https://docs.npmjs.com/cli/commands/npm-pack/) command, or your package manager equivalent, to create a tarball from your module. Then in your test project, you can add your module to `package.json` packages as: `"my-module": "file:/path/to/tarball.tgz"`.
+
+After that, you should be able to reference `my-module` like in any regular project.

package/3.guide/4.modules/6.best-practices.md

@@ -0,0 +1,104 @@
+---
+title: "Follow Best Practices"
+description: "Build performant and maintainable Nuxt modules with these guidelines."
+---
+
+With great power comes great responsibility. While modules are powerful, here are some best practices to keep in mind while authoring modules to keep applications performant and developer experience great.
+
+## Handle Async Setup
+
+As we've seen, Nuxt modules can be asynchronous. For example, you may want to develop a module that needs fetching some API or calling an async function.
+
+However, be careful with asynchronous behaviors as Nuxt will wait for your module to setup before going to the next module and starting the development server, build process, etc. Prefer deferring time-consuming logic to Nuxt hooks.
+
+::warning
+If your module takes more than **1 second** to setup, Nuxt will emit a warning about it.
+::
+
+## Prefix Your Exports
+
+Nuxt modules should provide an explicit prefix for any exposed configuration, plugin, API, composable, component, or server route to avoid conflicts with other modules, Nuxt internals, or user-defined code.
+
+Ideally, prefix them with your module's name. For example, if your module is called `nuxt-foo`:
+
+| Type | ❌ Avoid | ✅ Prefer |
+| --- | --- | --- |
+| Components | `<Button>`, `<Modal>` | `<FooButton>`, `<FooModal>` |
+| Composables | `useData()`, `useModal()` | `useFooData()`, `useFooModal()` |
+| Server routes | `/api/track`, `/api/data` | `/api/_foo/track`, `/api/_foo/data` |
+
+### Server Routes
+
+This is particularly important for server routes, where common paths like `/api/auth`, `/api/login`, or `/api/user` are very likely already used by the application.
+
+Use a unique prefix based on your module name:
+- `/api/_foo/...` (using underscore prefix)
+- `/_foo/...` (for non-API routes)
+
+## Use Lifecycle Hooks
+
+When your module needs to perform one-time setup tasks (like generating configuration files, setting up databases, or installing dependencies), use lifecycle hooks instead of running the logic in your main `setup` function.
+
+```ts
+import { addServerHandler, defineNuxtModule } from 'nuxt/kit'
+import semver from 'semver'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'my-database-module',
+    version: '1.0.0',
+  },
+  async onInstall (nuxt) {
+    // One-time setup: create database schema, generate config files, etc.
+    await generateDatabaseConfig(nuxt.options.rootDir)
+  },
+  async onUpgrade (nuxt, options, previousVersion) {
+    // Handle version-specific migrations
+    if (semver.lt(previousVersion, '1.0.0')) {
+      await migrateLegacyData()
+    }
+  },
+  setup (options, nuxt) {
+    // Regular setup logic that runs on every build
+    addServerHandler({ /* ... */ })
+  },
+})
+```
+
+This pattern prevents unnecessary work on every build and provides a better developer experience. See the [lifecycle hooks documentation](/docs/3.x/api/kit/modules#using-lifecycle-hooks-for-module-installation-and-upgrade) for more details.
+
+## Be TypeScript Friendly
+
+Nuxt has first-class TypeScript integration for the best developer experience.
+
+Exposing types and using TypeScript to develop modules benefits users even when not using TypeScript directly.
+
+## Use ESM Syntax
+
+Nuxt relies on native ESM. Please read [Native ES Modules](/docs/3.x/guide/concepts/esm) for more information.
+
+## Document Your Module
+
+Consider documenting module usage in the readme file:
+
+- Why use this module?
+- How to use this module?
+- What does this module do?
+
+Linking to the integration website and documentation is always a good idea.
+
+## Provide a Demo
+
+It's a good practice to make a minimal reproduction with your module and [StackBlitz](https://nuxt.new/s/v4) that you add to your module readme.
+
+This not only provides potential users of your module a quick and easy way to experiment with the module but also an easy way for them to build minimal reproductions they can send you when they encounter issues.
+
+## Stay Version Agnostic
+
+Nuxt, Nuxt Kit, and other new toolings are made to have both forward and backward compatibility in mind.
+
+Please use "X for Nuxt" instead of "X for Nuxt 3" to avoid fragmentation in the ecosystem and prefer using `meta.compatibility` to set Nuxt version constraints.
+
+## Follow Starter Conventions
+
+The module starter comes with a default set of tools and configurations (e.g. ESLint configuration). If you plan on open-sourcing your module, sticking with those defaults ensures your module shares a consistent coding style with other [community modules](/modules) out there, making it easier for others to contribute.

package/3.guide/4.modules/7.ecosystem.md

@@ -0,0 +1,32 @@
+---
+title: "Publish & Share Your Module"
+description: "Join the Nuxt module ecosystem and publish your module to npm."
+---
+
+The [Nuxt module ecosystem](/modules) represents more than 35 million monthly NPM downloads and provides extended functionalities and integrations with all sort of tools. You can be part of this ecosystem!
+
+::tip{icon="i-lucide-video" to="https://vueschool.io/lessons/exploring-nuxt-modules-ecosystem-and-module-types?friend=nuxt" target="_blank"}
+Watch Vue School video about Nuxt module types.
+::
+
+## Understand Module Types
+
+**Official modules** are modules prefixed (scoped) with `@nuxt/` (e.g. [`@nuxt/content`](https://content.nuxt.com)). They are made and maintained actively by the Nuxt team. Like with the framework, contributions from the community are more than welcome to help make them better!
+
+**Community modules** are modules prefixed (scoped) with `@nuxtjs/` (e.g. [`@nuxtjs/tailwindcss`](https://tailwindcss.nuxtjs.org)). They are proven modules made and maintained by community members. Again, contributions are welcome from anyone.
+
+**Third-party and other community modules** are modules (often) prefixed with `nuxt-`. Anyone can make them, using this prefix allows these modules to be discoverable on npm. This is the best starting point to draft and try an idea!
+
+**Private or personal modules** are modules made for your own use case or company. They don't need to follow any naming rules to work with Nuxt and are often seen scoped under an npm organization (e.g. `@my-company/nuxt-auth`)
+
+## List Your Module
+
+Any community modules are welcome to be listed on [the module list](/modules). To be listed, [open an issue in the nuxt/modules](https://github.com/nuxt/modules/issues/new?template=module_request.yml) repository. The Nuxt team can help you to apply best practices before listing.
+
+## Join nuxt-modules
+
+By moving your modules to [nuxt-modules](https://github.com/nuxt-modules), there is always someone else to help, and this way, we can join forces to make one perfect solution.
+
+If you have an already published and working module, and want to transfer it to `nuxt-modules`, [open an issue in nuxt/modules](https://github.com/nuxt/modules/issues/new).
+
+By joining `nuxt-modules` we can rename your community module under the `@nuxtjs/` scope and provide a subdomain (e.g. `my-module.nuxtjs.org`) for its documentation.

package/3.guide/4.modules/index.md

@@ -0,0 +1,36 @@
+---
+title: 'Module Author Guide'
+titleTemplate: '%s'
+description: 'Learn how to create a Nuxt module to integrate, enhance or extend any Nuxt applications.'
+navigation: false
+surround: false
+---
+
+Nuxt's [configuration](/docs/3.x/api/nuxt-config) and [hooks](/docs/3.x/guide/going-further/hooks) systems make it possible to customize every aspect of Nuxt and add any integration you might need (Vue plugins, CMS, server routes, components, logging, etc.).
+
+**Nuxt modules** are functions that sequentially run when starting Nuxt in development mode using `nuxt dev` or building a project for production with `nuxt build`.
+With modules, you can encapsulate, properly test, and share custom solutions as npm packages without adding unnecessary boilerplate to your project, or requiring changes to Nuxt itself.
+
+::card-group{class="sm:grid-cols-1"}
+  ::card{icon="i-lucide-rocket" title="Create Your First Module" to="/docs/3.x/guide/modules/getting-started"}
+  Learn how to create your first Nuxt module using the official starter template.
+  ::
+  ::card{icon="i-lucide-box" title="Understand Module Structure" to="/docs/3.x/guide/modules/module-anatomy"}
+  Learn how Nuxt modules are structured and how to define them.
+  ::
+  ::card{icon="i-lucide-code" title="Add Plugins, Components & More" to="/docs/3.x/guide/modules/recipes-basics"}
+  Learn how to inject plugins, components, composables and server routes from your module.
+  ::
+  ::card{icon="i-lucide-layers" title="Use Hooks & Extend Types" to="/docs/3.x/guide/modules/recipes-advanced"}
+  Master lifecycle hooks, virtual files and TypeScript declarations in your modules.
+  ::
+  ::card{icon="i-lucide-test-tube" title="Test Your Module" to="/docs/3.x/guide/modules/testing"}
+  Learn how to test your Nuxt module with unit, integration and E2E tests.
+  ::
+  ::card{icon="i-lucide-medal" title="Follow Best Practices" to="/docs/3.x/guide/modules/best-practices"}
+  Build performant and maintainable Nuxt modules with these guidelines.
+  ::
+  ::card{icon="i-lucide-globe" title="Publish & Share Your Module" to="/docs/3.x/guide/modules/ecosystem"}
+  Join the Nuxt module ecosystem and publish your module to npm.
+  ::
+::

package/3.guide/{3.recipes → 5.recipes}/1.custom-routing.md

@@ -17,7 +17,7 @@ If it returns `null` or `undefined`, Nuxt will fall back to the default routes (
 import type { RouterConfig } from '@nuxt/schema'
 
 export default {
-  // https://router.vuejs.org/api/interfaces/routeroptions.html#routes
+  // https://router.vuejs.org/api/interfaces/routeroptions#routes
   routes: _routes => [
     {
       name: 'home',
@@ -81,7 +81,7 @@ The [Nuxt kit](/docs/3.x/guide/going-further/kit) provides a few ways [to add ro
 
 ## Router Options
 
-On top of customizing options for [`vue-router`](https://router.vuejs.org/api/interfaces/routeroptions.html), Nuxt offers [additional options](/docs/3.x/api/nuxt-config#router) to customize the router.
+On top of customizing options for [`vue-router`](https://router.vuejs.org/api/interfaces/routeroptions), Nuxt offers [additional options](/docs/3.x/api/nuxt-config#router) to customize the router.
 
 ### Using `app/router.options`
 
@@ -175,7 +175,7 @@ import type { RouterConfig } from '@nuxt/schema'
 import { createMemoryHistory } from 'vue-router'
 
 export default {
-  // https://router.vuejs.org/api/interfaces/routeroptions.html
+  // https://router.vuejs.org/api/interfaces/routeroptions
   history: base => import.meta.client ? createMemoryHistory(base) : null, /* default */
 } satisfies RouterConfig
 ```

package/3.guide/{3.recipes → 5.recipes}/2.vite-plugin.md

@@ -26,6 +26,10 @@ First, we need to install the Vite plugin, for our example, we'll use `@rollup/p
   bun add @rollup/plugin-yaml
   ```
 
+  ```bash [deno]
+  deno add npm:@rollup/plugin-yaml
+  ```
+
 ::
 
 Next, we need to import and add it to our [`nuxt.config.ts`](/docs/3.x/directory-structure/nuxt-config) file:

package/3.guide/{3.recipes → 5.recipes}/3.custom-usefetch.md

@@ -98,7 +98,7 @@ import type { UseFetchOptions } from 'nuxt/app'
 
 interface CustomError {
   message: string
-  statusCode: number
+  status: number
 }
 
 export function useAPI<T> (
@@ -116,7 +116,7 @@ export function useAPI<T> (
 This example demonstrates how to use a custom `useFetch`, but the same structure is identical for a custom `useAsyncData`.
 ::
 
-:link-example{to="/docs/examples/advanced/use-custom-fetch-composable"}
+:link-example{to="/docs/3.x/examples/advanced/use-custom-fetch-composable"}
 
 :video-accordion{title="Watch a video about custom $fetch and Repository Pattern in Nuxt" videoId="jXH8Tr-exhI"}
 

package/3.guide/{3.recipes → 5.recipes}/4.sessions-and-authentication.md

@@ -47,7 +47,7 @@ Let's create a `/api/login` API route that will accept a POST request with the e
 import { z } from 'zod'
 
 const bodySchema = z.object({
-  email: z.string().email(),
+  email: z.email(),
   password: z.string().min(8),
 })
 
@@ -65,7 +65,7 @@ export default defineEventHandler(async (event) => {
     return {}
   }
   throw createError({
-    statusCode: 401,
+    status: 401,
     message: 'Bad credentials',
   })
 })
@@ -155,7 +155,7 @@ export default defineEventHandler(async (event) => {
 
 ## Protect App Routes
 
-Our data is safe with the server-side route in place, but without doing anything else, unauthenticated users would probably get some odd data when trying to access the `/users` page. We should create a [client-side middleware](https://nuxt.com/docs/guide/directory-structure/middleware) to protect the route on the client side and redirect users to the login page.
+Our data is safe with the server-side route in place, but without doing anything else, unauthenticated users would probably get some odd data when trying to access the `/users` page. We should create a [client-side middleware](https://nuxt.com/docs/3.x/directory-structure/middleware) to protect the route on the client side and redirect users to the login page.
 
 `nuxt-auth-utils` provides a convenient `useUserSession` composable which we'll use to check if the user is logged in, and redirect them if they are not.
 

package/3.guide/{4.going-further → 6.going-further}/1.events.md

@@ -1,10 +1,9 @@
 ---
-title: "Events"
+title: "Creating Custom Events"
 description: "Nuxt provides a powerful event system powered by hookable."
+navigation.title: "Custom Events"
 ---
 
-# Events
-
 Using events is a great way to decouple your application and allow for more flexible and modular communication between different parts of your code. Events can have multiple listeners that do not depend on each other. For example, you may wish to send an email to your user each time an order has shipped. Instead of coupling your order processing code to your email code, you can emit an event which a listener can receive and use to dispatch an email.
 
 The Nuxt event system is powered by [unjs/hookable](https://github.com/unjs/hookable), which is the same library that powers the Nuxt hooks system.
@@ -58,6 +57,6 @@ await nuxtApp.callHook('app:user:registered', {
 You can inspect all events using the **Nuxt DevTools** Hooks panel.
 ::
 
-::read-more{to="/docs/guide/going-further/hooks"}
+::read-more{to="/docs/3.x/guide/going-further/hooks"}
 Learn more about Nuxt's built-in hooks and how to extend them
 ::