mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-28 08:32:06 +00:00
docs: update Nuxt 3
-> Nuxt
or Nuxt 3+
This commit is contained in:
parent
748bc751d6
commit
3c16c890c1
@ -76,7 +76,6 @@ Nuxt is composed of different [core packages](https://github.com/nuxt/nuxt/tree/
|
|||||||
- Command line interface: [nuxi](https://github.com/nuxt/nuxt/tree/main/packages/nuxi)
|
- Command line interface: [nuxi](https://github.com/nuxt/nuxt/tree/main/packages/nuxi)
|
||||||
- Server engine: [nitro](https://github.com/unjs/nitro)
|
- Server engine: [nitro](https://github.com/unjs/nitro)
|
||||||
- Development kit: [@nuxt/kit](https://github.com/nuxt/nuxt/tree/main/packages/kit)
|
- Development kit: [@nuxt/kit](https://github.com/nuxt/nuxt/tree/main/packages/kit)
|
||||||
- Nuxt 2 Bridge: [@nuxt/bridge](https://github.com/nuxt/bridge)
|
|
||||||
|
|
||||||
We recommend reading each concept to have a full vision of Nuxt capabilities and the scope of each package.
|
We recommend reading each concept to have a full vision of Nuxt capabilities and the scope of each package.
|
||||||
|
|
||||||
|
@ -85,13 +85,13 @@ export default defineNuxtConfig({
|
|||||||
|
|
||||||
## Hosting Providers
|
## Hosting Providers
|
||||||
|
|
||||||
Nuxt 3 can be deployed to several cloud providers with a minimal amount of configuration:
|
Nuxt can be deployed to several cloud providers with a minimal amount of configuration:
|
||||||
|
|
||||||
:read-more{to="/deploy"}
|
:read-more{to="/deploy"}
|
||||||
|
|
||||||
## Presets
|
## Presets
|
||||||
|
|
||||||
In addition to Node.js servers and static hosting services, a Nuxt 3 project can be deployed with several well-tested presets and minimal amount of configuration.
|
In addition to Node.js servers and static hosting services, a Nuxt project can be deployed with several well-tested presets and minimal amount of configuration.
|
||||||
|
|
||||||
You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file:
|
You can explicitly set the desired preset in the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file:
|
||||||
|
|
||||||
|
@ -480,11 +480,11 @@ These options have been set to their current values for some time and we do not
|
|||||||
|
|
||||||
* `respectNoSSRHeader`is implementable in user-land with [server middleware](https://github.com/nuxt/nuxt/blob/c660b39447f0d5b8790c0826092638d321cd6821/packages/nuxt/src/core/runtime/nitro/no-ssr.ts#L8-L9)
|
* `respectNoSSRHeader`is implementable in user-land with [server middleware](https://github.com/nuxt/nuxt/blob/c660b39447f0d5b8790c0826092638d321cd6821/packages/nuxt/src/core/runtime/nitro/no-ssr.ts#L8-L9)
|
||||||
|
|
||||||
## Nuxt 2 vs Nuxt 3
|
## Nuxt 2 vs Nuxt 3+
|
||||||
|
|
||||||
In the table below, there is a quick comparison between 3 versions of Nuxt:
|
In the table below, there is a quick comparison between 3 versions of Nuxt:
|
||||||
|
|
||||||
Feature / Version | Nuxt 2 | Nuxt Bridge | Nuxt 3
|
Feature / Version | Nuxt 2 | Nuxt Bridge | Nuxt 3+
|
||||||
-------------------------|-----------------|------------------|---------
|
-------------------------|-----------------|------------------|---------
|
||||||
Vue | 2 | 2 | 3
|
Vue | 2 | 2 | 3
|
||||||
Stability | 😊 Stable | 😊 Stable | 😊 Stable
|
Stability | 😊 Stable | 😊 Stable | 😊 Stable
|
||||||
@ -502,9 +502,9 @@ Vite | ⚠️ Partial | 🚧 Partial | ✅
|
|||||||
Nuxi CLI | ❌ Old | ✅ nuxi | ✅ nuxi
|
Nuxi CLI | ❌ Old | ✅ nuxi | ✅ nuxi
|
||||||
Static sites | ✅ | ✅ | ✅
|
Static sites | ✅ | ✅ | ✅
|
||||||
|
|
||||||
## Nuxt 2 to Nuxt 3
|
## Nuxt 2 to Nuxt 3+
|
||||||
|
|
||||||
The migration guide provides a step-by-step comparison of Nuxt 2 features to Nuxt 3 features and guidance to adapt your current application.
|
The migration guide provides a step-by-step comparison of Nuxt 2 features to Nuxt 3+ features and guidance to adapt your current application.
|
||||||
|
|
||||||
::read-more{to="/docs/migration/overview"}
|
::read-more{to="/docs/migration/overview"}
|
||||||
Check out the **guide to migrating from Nuxt 2 to Nuxt 3**.
|
Check out the **guide to migrating from Nuxt 2 to Nuxt 3**.
|
||||||
@ -512,7 +512,7 @@ Check out the **guide to migrating from Nuxt 2 to Nuxt 3**.
|
|||||||
|
|
||||||
## Nuxt 2 to Nuxt Bridge
|
## Nuxt 2 to Nuxt Bridge
|
||||||
|
|
||||||
If you prefer to progressively migrate your Nuxt 2 application to Nuxt 3, you can use Nuxt Bridge. Nuxt Bridge is a compatibility layer that allows you to use Nuxt 3 features in Nuxt 2 with an opt-in mechanism.
|
If you prefer to progressively migrate your Nuxt 2 application to Nuxt 3, you can use Nuxt Bridge. Nuxt Bridge is a compatibility layer that allows you to use Nuxt 3+ features in Nuxt 2 with an opt-in mechanism.
|
||||||
|
|
||||||
::read-more{to="/docs/bridge/overview"}
|
::read-more{to="/docs/bridge/overview"}
|
||||||
**Migrate from Nuxt 2 to Nuxt Bridge**
|
**Migrate from Nuxt 2 to Nuxt Bridge**
|
||||||
|
@ -100,6 +100,6 @@ Well done! A browser window should automatically open for <http://localhost:3000
|
|||||||
|
|
||||||
## Next Steps
|
## Next Steps
|
||||||
|
|
||||||
Now that you've created your Nuxt 3 project, you are ready to start building your application.
|
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/guide/concepts"}
|
||||||
|
@ -494,7 +494,7 @@ onMounted(() => console.log(document.cookie))
|
|||||||
|
|
||||||
## Options API support
|
## Options API support
|
||||||
|
|
||||||
Nuxt 3 provides a way to perform `asyncData` fetching within the Options API. You must wrap your component definition within `defineNuxtComponent` for this to work.
|
Nuxt provides a way to perform `asyncData` fetching within the Options API. You must wrap your component definition within `defineNuxtComponent` for this to work.
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script>
|
<script>
|
||||||
|
@ -4,7 +4,7 @@ description: 'Learn how to catch and handle errors in Nuxt.'
|
|||||||
navigation.icon: i-ph-bug-beetle-duotone
|
navigation.icon: i-ph-bug-beetle-duotone
|
||||||
---
|
---
|
||||||
|
|
||||||
Nuxt 3 is a full-stack framework, which means there are several sources of unpreventable user runtime errors that can happen in different contexts:
|
Nuxt is a full-stack framework, which means there are several sources of unpreventable user runtime errors that can happen in different contexts:
|
||||||
|
|
||||||
- Errors during the Vue rendering lifecycle (SSR & CSR)
|
- Errors during the Vue rendering lifecycle (SSR & CSR)
|
||||||
- Server and client startup errors (SSR + CSR)
|
- Server and client startup errors (SSR + CSR)
|
||||||
|
@ -4,7 +4,7 @@ description: Nuxt provides a powerful system that allows you to extend the defau
|
|||||||
navigation.icon: i-ph-stack-duotone
|
navigation.icon: i-ph-stack-duotone
|
||||||
---
|
---
|
||||||
|
|
||||||
One of the core features of Nuxt 3 is the layers and extending support. You can extend a default Nuxt application to reuse components, utils, and configuration. The layers structure is almost identical to a standard Nuxt application which makes them easy to author and maintain.
|
One of the core features of Nuxt is the layers and extending support. You can extend a default Nuxt application to reuse components, utils, and configuration. The layers structure is almost identical to a standard Nuxt application which makes them easy to author and maintain.
|
||||||
|
|
||||||
## Use Cases
|
## Use Cases
|
||||||
|
|
||||||
|
@ -39,7 +39,7 @@ Most applications need multiple pages and a way to navigate between them. This i
|
|||||||
|
|
||||||
## Differences with Nuxt 2 / Vue 2
|
## Differences with Nuxt 2 / Vue 2
|
||||||
|
|
||||||
Nuxt 3 is based on Vue 3. The new major Vue version introduces several changes that Nuxt takes advantage of:
|
Nuxt 3+ is based on Vue 3. The new major Vue version introduces several changes that Nuxt takes advantage of:
|
||||||
|
|
||||||
- Better performance
|
- Better performance
|
||||||
- Composition API
|
- Composition API
|
||||||
@ -89,15 +89,15 @@ const increment = () => count.value++
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
The goal of Nuxt 3 is to provide a great developer experience around the Composition API.
|
The goal of Nuxt is to provide a great developer experience around the Composition API.
|
||||||
|
|
||||||
- Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt 3 [built-in composables](/docs/api/composables/use-async-data).
|
- Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt [built-in composables](/docs/api/composables/use-async-data).
|
||||||
- Write your own auto-imported reusable functions in the [`composables/` directory](/docs/guide/directory-structure/composables).
|
- Write your own auto-imported reusable functions in the [`composables/` directory](/docs/guide/directory-structure/composables).
|
||||||
|
|
||||||
### TypeScript Support
|
### TypeScript Support
|
||||||
|
|
||||||
Both Vue 3 and Nuxt 3 are written in TypeScript. A fully typed codebase prevents mistakes and documents APIs usage. This doesn’t mean that you have to write your application in TypeScript to take advantage of it. With Nuxt 3, you can opt-in by renaming your file from `.js` to `.ts` , or add `<script setup lang="ts">` in a component.
|
Both Vue 3 and Nuxt 3+ are written in TypeScript. A fully typed codebase prevents mistakes and documents APIs usage. This doesn’t mean that you have to write your application in TypeScript to take advantage of it. With Nuxt 3, you can opt-in by renaming your file from `.js` to `.ts` , or add `<script setup lang="ts">` in a component.
|
||||||
|
|
||||||
::read-more{to="/docs/guide/concepts/typescript"}
|
::read-more{to="/docs/guide/concepts/typescript"}
|
||||||
Read the details about TypeScript in Nuxt 3
|
Read the details about TypeScript in Nuxt
|
||||||
::
|
::
|
||||||
|
@ -105,7 +105,7 @@ Hybrid rendering allows different caching rules per route using **Route Rules**
|
|||||||
|
|
||||||
Previously every route/page of a Nuxt application and server must use the same rendering mode, universal or client-side. In various cases, some pages could be generated at build time, while others should be client-side rendered. For example, think of a content website with an admin section. Every content page should be primarily static and generated once, but the admin section requires registration and behaves more like a dynamic application.
|
Previously every route/page of a Nuxt application and server must use the same rendering mode, universal or client-side. In various cases, some pages could be generated at build time, while others should be client-side rendered. For example, think of a content website with an admin section. Every content page should be primarily static and generated once, but the admin section requires registration and behaves more like a dynamic application.
|
||||||
|
|
||||||
Nuxt 3 includes route rules and hybrid rendering support. Using route rules you can define rules for a group of nuxt routes, change rendering mode or assign a cache strategy based on route!
|
Nuxt includes route rules and hybrid rendering support. Using route rules you can define rules for a group of nuxt routes, change rendering mode or assign a cache strategy based on route!
|
||||||
|
|
||||||
Nuxt server will automatically register corresponding middleware and wrap routes with cache handlers using [Nitro caching layer](https://nitro.unjs.io/guide/cache).
|
Nuxt server will automatically register corresponding middleware and wrap routes with cache handlers using [Nitro caching layer](https://nitro.unjs.io/guide/cache).
|
||||||
|
|
||||||
@ -168,7 +168,7 @@ Note that Hybrid Rendering is not available when using [`nuxt generate`](/docs/a
|
|||||||
|
|
||||||
## Edge-Side Rendering
|
## Edge-Side Rendering
|
||||||
|
|
||||||
Edge-Side Rendering (ESR) is a powerful feature introduced in Nuxt 3 that allows the rendering of your Nuxt application closer to your users via edge servers of a Content Delivery Network (CDN). By leveraging ESR, you can ensure improved performance and reduced latency, thereby providing an enhanced user experience.
|
Edge-Side Rendering (ESR) is a powerful feature introduced in Nuxt that allows the rendering of your Nuxt application closer to your users via edge servers of a Content Delivery Network (CDN). By leveraging ESR, you can ensure improved performance and reduced latency, thereby providing an enhanced user experience.
|
||||||
|
|
||||||
With ESR, the rendering process is pushed to the 'edge' of the network - the CDN's edge servers. Note that ESR is more a deployment target than an actual rendering mode.
|
With ESR, the rendering process is pushed to the 'edge' of the network - the CDN's edge servers. Note that ESR is more a deployment target than an actual rendering mode.
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Server Engine
|
title: Server Engine
|
||||||
description: 'Nuxt 3 is powered by a new server engine: Nitro.'
|
description: 'Nuxt is powered by a new server engine: Nitro.'
|
||||||
---
|
---
|
||||||
|
|
||||||
While building Nuxt 3, we created a new server engine: [Nitro](https://nitro.unjs.io).
|
While building Nuxt 3, we created a new server engine: [Nitro](https://nitro.unjs.io).
|
||||||
@ -53,7 +53,7 @@ Nitro produces a standalone server dist that is independent of `node_modules`.
|
|||||||
|
|
||||||
The server in Nuxt 2 is not standalone and requires part of Nuxt core to be involved by running `nuxt start` (with the [`nuxt-start`](https://www.npmjs.com/package/nuxt-start) or [`nuxt`](https://www.npmjs.com/package/nuxt) distributions) or custom programmatic usage, which is fragile and prone to breakage and not suitable for serverless and service-worker environments.
|
The server in Nuxt 2 is not standalone and requires part of Nuxt core to be involved by running `nuxt start` (with the [`nuxt-start`](https://www.npmjs.com/package/nuxt-start) or [`nuxt`](https://www.npmjs.com/package/nuxt) distributions) or custom programmatic usage, which is fragile and prone to breakage and not suitable for serverless and service-worker environments.
|
||||||
|
|
||||||
Nuxt 3 generates this dist when running `nuxt build` into a [`.output`](/docs/guide/directory-structure/output) directory.
|
Nuxt generates this dist when running `nuxt build` into a [`.output`](/docs/guide/directory-structure/output) directory.
|
||||||
|
|
||||||
The output contains runtime code to run your Nuxt server in any environment (including experimental browser service workers!) and serve your static files, making it a true hybrid framework for the JAMstack. In addition, Nuxt implements a native storage layer, supporting multi-source drivers and local assets.
|
The output contains runtime code to run your Nuxt server in any environment (including experimental browser service workers!) and serve your static files, making it a true hybrid framework for the JAMstack. In addition, Nuxt implements a native storage layer, supporting multi-source drivers and local assets.
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: 'ES Modules'
|
title: 'ES Modules'
|
||||||
description: "Nuxt 3 (and Bridge) uses Native ES Modules."
|
description: "Nuxt uses native ES modules."
|
||||||
---
|
---
|
||||||
|
|
||||||
This guide helps explain what ES Modules are and how to make a Nuxt app (or upstream library) compatible with ESM.
|
This guide helps explain what ES Modules are and how to make a Nuxt app (or upstream library) compatible with ESM.
|
||||||
@ -190,7 +190,7 @@ import { default as pkg } from 'cjs-pkg'
|
|||||||
import('cjs-pkg').then(m => m.default || m).then(console.log)
|
import('cjs-pkg').then(m => m.default || m).then(console.log)
|
||||||
```
|
```
|
||||||
|
|
||||||
For handling more complex situations and more safety, we recommend and internally use [mlly](https://github.com/unjs/mlly) in Nuxt 3 that can preserve named exports.
|
For handling more complex situations and more safety, we recommend and internally use [mlly](https://github.com/unjs/mlly) in Nuxt that can preserve named exports.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { interopDefault } from 'mlly'
|
import { interopDefault } from 'mlly'
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: 'TypeScript'
|
title: 'TypeScript'
|
||||||
description: "Nuxt 3 is fully typed and provides helpful shortcuts to ensure you have access to accurate type information when you are coding."
|
description: "Nuxt is fully typed and provides helpful shortcuts to ensure you have access to accurate type information when you are coding."
|
||||||
---
|
---
|
||||||
|
|
||||||
## Type-checking
|
## Type-checking
|
||||||
@ -51,7 +51,7 @@ When you run `nuxi dev` or `nuxi build`, Nuxt generates the following files for
|
|||||||
|
|
||||||
### `.nuxt/nuxt.d.ts`
|
### `.nuxt/nuxt.d.ts`
|
||||||
|
|
||||||
This file contains the types of any modules you are using, as well as the key types that Nuxt 3 requires. Your IDE should recognize these types automatically.
|
This file contains the types of any modules you are using, as well as the key types that Nuxt requires. Your IDE should recognize these types automatically.
|
||||||
|
|
||||||
Some of the references in the file are to files that are only generated within your `buildDir` (`.nuxt`) and therefore for full typings, you will need to run `nuxi dev` or `nuxi build`.
|
Some of the references in the file are to files that are only generated within your `buildDir` (`.nuxt`) and therefore for full typings, you will need to run `nuxi dev` or `nuxi build`.
|
||||||
|
|
||||||
@ -80,7 +80,7 @@ In case you need to extend options provided by `./.nuxt/tsconfig.json` further,
|
|||||||
|
|
||||||
TypeScript comes with certain checks to give you more safety and analysis of your program.
|
TypeScript comes with certain checks to give you more safety and analysis of your program.
|
||||||
|
|
||||||
[Strict checks](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#getting-stricter-checks) are enabled by default in Nuxt 3 to give you greater type safety.
|
[Strict checks](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#getting-stricter-checks) are enabled by default in Nuxt to give you greater type safety.
|
||||||
|
|
||||||
If you are currently converting your codebase to TypeScript, you may want to temporarily disable strict checks by setting `strict` to `false` in your `nuxt.config`:
|
If you are currently converting your codebase to TypeScript, you may want to temporarily disable strict checks by setting `strict` to `false` in your `nuxt.config`:
|
||||||
|
|
||||||
|
@ -342,7 +342,7 @@ Learn more about `<NuxtLink>` usage.
|
|||||||
|
|
||||||
## Programmatic Navigation
|
## Programmatic Navigation
|
||||||
|
|
||||||
Nuxt 3 allows programmatic navigation through the `navigateTo()` utility method. Using this utility method, you will be able to programmatically navigate the user in your app. This is great for taking input from the user and navigating them dynamically throughout your application. In this example, we have a simple method called `navigate()` that gets called when the user submits a search form.
|
Nuxt allows programmatic navigation through the `navigateTo()` utility method. Using this utility method, you will be able to programmatically navigate the user in your app. This is great for taking input from the user and navigating them dynamically throughout your application. In this example, we have a simple method called `navigate()` that gets called when the user submits a search form.
|
||||||
|
|
||||||
::note
|
::note
|
||||||
Ensure to always `await` on `navigateTo` or chain its result by returning from functions.
|
Ensure to always `await` on `navigateTo` or chain its result by returning from functions.
|
||||||
|
@ -5,7 +5,7 @@ description: Expose reactive configuration within your application with the App
|
|||||||
navigation.icon: i-ph-file-duotone
|
navigation.icon: i-ph-file-duotone
|
||||||
---
|
---
|
||||||
|
|
||||||
Nuxt 3 provides an `app.config` config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).
|
Nuxt provides an `app.config` config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).
|
||||||
|
|
||||||
You can easily provide runtime app configuration using `app.config.ts` file. It can have either of `.ts`, `.js`, or `.mjs` extensions.
|
You can easily provide runtime app configuration using `app.config.ts` file. It can have either of `.ts`, `.js`, or `.mjs` extensions.
|
||||||
|
|
||||||
|
@ -252,7 +252,7 @@ For a better description of what Vue actually does, see [unjs/unctx#2 (comment)]
|
|||||||
|
|
||||||
This is where `runWithContext` can be used to restore context, similarly to how `<script setup>` works.
|
This is where `runWithContext` can be used to restore context, similarly to how `<script setup>` works.
|
||||||
|
|
||||||
Nuxt 3 internally uses [unjs/unctx](https://github.com/unjs/unctx) to support composables similar to Vue for plugins and middleware. This enables composables like `navigateTo()` to work without directly passing `nuxtApp` to them - bringing the DX and performance benefits of Composition API to the whole Nuxt framework.
|
Nuxt internally uses [unjs/unctx](https://github.com/unjs/unctx) to support composables similar to Vue for plugins and middleware. This enables composables like `navigateTo()` to work without directly passing `nuxtApp` to them - bringing the DX and performance benefits of Composition API to the whole Nuxt framework.
|
||||||
|
|
||||||
Nuxt composables have the same design as the Vue Composition API and therefore need a similar solution to magically do this transform. Check out [unjs/unctx#2](https://github.com/unjs/unctx/issues/2) (proposal), [unjs/unctx#4](https://github.com/unjs/unctx/pull/4) (transform implementation), and [nuxt/framework#3884](https://github.com/nuxt/framework/pull/3884) (Integration to Nuxt).
|
Nuxt composables have the same design as the Vue Composition API and therefore need a similar solution to magically do this transform. Check out [unjs/unctx#2](https://github.com/unjs/unctx/issues/2) (proposal), [unjs/unctx#4](https://github.com/unjs/unctx/pull/4) (transform implementation), and [nuxt/framework#3884](https://github.com/nuxt/framework/pull/3884) (Integration to Nuxt).
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: "nuxi upgrade"
|
title: "nuxi upgrade"
|
||||||
description: The upgrade command upgrades Nuxt 3 to the latest version.
|
description: The upgrade command upgrades Nuxt to the latest version.
|
||||||
links:
|
links:
|
||||||
- label: Source
|
- label: Source
|
||||||
icon: i-simple-icons-github
|
icon: i-simple-icons-github
|
||||||
@ -12,7 +12,7 @@ links:
|
|||||||
npx nuxi upgrade [--force|-f]
|
npx nuxi upgrade [--force|-f]
|
||||||
```
|
```
|
||||||
|
|
||||||
The `upgrade` command upgrades Nuxt 3 to the latest version.
|
The `upgrade` command upgrades Nuxt to the latest version.
|
||||||
|
|
||||||
Option | Default | Description
|
Option | Default | Description
|
||||||
-------------------------|-----------------|------------------
|
-------------------------|-----------------|------------------
|
||||||
|
@ -8,7 +8,7 @@ links:
|
|||||||
size: xs
|
size: xs
|
||||||
---
|
---
|
||||||
|
|
||||||
Nitro is an open source TypeScript framework to build ultra-fast web servers. Nuxt 3 (and, optionally, Nuxt Bridge) uses Nitro as its server engine. You can use `useNitro` to access the Nitro instance, `addServerHandler` to add a server handler, `addDevServerHandler` to add a server handler to be used only in development mode, `addServerPlugin` to add a plugin to extend Nitro's runtime behavior, and `addPrerenderRoutes` to add routes to be prerendered by Nitro.
|
Nitro is an open source TypeScript framework to build ultra-fast web servers. Nuxt uses Nitro as its server engine. You can use `useNitro` to access the Nitro instance, `addServerHandler` to add a server handler, `addDevServerHandler` to add a server handler to be used only in development mode, `addServerPlugin` to add a plugin to extend Nitro's runtime behavior, and `addPrerenderRoutes` to add routes to be prerendered by Nitro.
|
||||||
|
|
||||||
## `addServerHandler`
|
## `addServerHandler`
|
||||||
|
|
||||||
|
@ -10,7 +10,7 @@ links:
|
|||||||
|
|
||||||
## `extendPages`
|
## `extendPages`
|
||||||
|
|
||||||
In Nuxt 3, routes are automatically generated based on the structure of the files in the `pages` directory. However, there may be scenarios where you'd want to customize these routes. For instance, you might need to add a route for a dynamic page not generated by Nuxt, remove an existing route, or modify the configuration of a route. For such customizations, Nuxt 3 offers the `extendPages` feature, which allows you to extend and alter the pages configuration.
|
In Nuxt 3, routes are automatically generated based on the structure of the files in the `pages` directory. However, there may be scenarios where you'd want to customize these routes. For instance, you might need to add a route for a dynamic page not generated by Nuxt, remove an existing route, or modify the configuration of a route. For such customizations, Nuxt offers the `extendPages` feature, which allows you to extend and alter the pages configuration.
|
||||||
|
|
||||||
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/extend-and-alter-nuxt-pages?friend=nuxt" target="_blank"}
|
::tip{icon="i-ph-video-duotone" to="https://vueschool.io/lessons/extend-and-alter-nuxt-pages?friend=nuxt" target="_blank"}
|
||||||
Watch Vue School video about extendPages.
|
Watch Vue School video about extendPages.
|
||||||
|
@ -15,7 +15,7 @@ Layouts is used to be a wrapper around your pages. It can be used to wrap your p
|
|||||||
Register template as layout and add it to the layouts.
|
Register template as layout and add it to the layouts.
|
||||||
|
|
||||||
::note
|
::note
|
||||||
In Nuxt 2 `error` layout can also be registered using this utility. In Nuxt 3 `error` layout [replaced](/docs/getting-started/error-handling#rendering-an-error-page) with `error.vue` page in project root.
|
In Nuxt 2 `error` layout can also be registered using this utility. In Nuxt 3+ `error` layout [replaced](/docs/getting-started/error-handling#rendering-an-error-page) with `error.vue` page in project root.
|
||||||
::
|
::
|
||||||
|
|
||||||
### Type
|
### Type
|
||||||
|
@ -30,4 +30,4 @@ And finally, just ask the question! There's no need to [ask permission to ask a
|
|||||||
|
|
||||||
Something isn't working the way that the docs say that it should. You're not sure if it's a bug. You've searched through the [open issues](https://github.com/nuxt/nuxt/issues) and [discussions](https://github.com/nuxt/nuxt/discussions) but you can't find anything. (if there is a closed issue, please create a new one)
|
Something isn't working the way that the docs say that it should. You're not sure if it's a bug. You've searched through the [open issues](https://github.com/nuxt/nuxt/issues) and [discussions](https://github.com/nuxt/nuxt/discussions) but you can't find anything. (if there is a closed issue, please create a new one)
|
||||||
|
|
||||||
We recommend taking a look at [how to report bugs](/docs/community/reporting-bugs). Nuxt 3 is still in active development, and every issue helps make it better.
|
We recommend taking a look at [how to report bugs](/docs/community/reporting-bugs). Nuxt is still in active development, and every issue helps make it better.
|
||||||
|
@ -22,31 +22,25 @@ Search through the [open issues](https://github.com/nuxt/nuxt/issues) and [discu
|
|||||||
|
|
||||||
It's important to be able to reproduce the bug reliably - in a minimal way and apart from the rest of your project. This narrows down what could be causing the issue and makes it possible for someone not only to find the cause, but also to test a potential solution.
|
It's important to be able to reproduce the bug reliably - in a minimal way and apart from the rest of your project. This narrows down what could be causing the issue and makes it possible for someone not only to find the cause, but also to test a potential solution.
|
||||||
|
|
||||||
Start with the Nuxt 3 or Nuxt Bridge sandbox and add the **minimum** amount of code necessary to reproduce the bug you're experiencing.
|
Start with the Nuxt sandbox and add the **minimum** amount of code necessary to reproduce the bug you're experiencing.
|
||||||
|
|
||||||
::note
|
::note
|
||||||
If your issue concerns Vue 3 or Vite, please try to reproduce it first with the Vue 3 SSR starter.
|
If your issue concerns Vue or Vite, please try to reproduce it first with the Vue SSR starter.
|
||||||
::
|
::
|
||||||
|
|
||||||
**Nuxt 3**:
|
**Nuxt**:
|
||||||
|
|
||||||
::card-group
|
::card-group
|
||||||
:card{title="Nuxt 3 on StackBlitz" icon="i-simple-icons-stackblitz" to="https://nuxt.new/s/v3" target="_blank"}
|
:card{title="Nuxt on StackBlitz" icon="i-simple-icons-stackblitz" to="https://nuxt.new/s/v3" target="_blank"}
|
||||||
:card{title="Nuxt 3 on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://nuxt.new/c/v3" target="_blank"}
|
:card{title="Nuxt on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://nuxt.new/c/v3" target="_blank"}
|
||||||
::
|
::
|
||||||
|
|
||||||
**Nuxt Bridge**:
|
**Vue**:
|
||||||
|
|
||||||
::card-group
|
::card-group
|
||||||
:card{title="Nuxt Bridge on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://codesandbox.io/s/github/nuxt/starter/v2-bridge-codesandbox" target="_blank"}
|
:card{title="Vue SSR on StackBlitz" icon="i-simple-icons-stackblitz" to="https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main?terminal=dev" target="_blank"}
|
||||||
::
|
:card{title="Vue SSR on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://codesandbox.io/s/github/nuxt-contrib/vue3-ssr-starter/main" target="_blank"}
|
||||||
|
:card{title="Vue SSR Template on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt-contrib/vue3-ssr-starter/generate" target="_blank"}
|
||||||
**Vue 3**:
|
|
||||||
|
|
||||||
::card-group
|
|
||||||
:card{title="Vue 3 SSR on StackBlitz" icon="i-simple-icons-stackblitz" to="https://stackblitz.com/github/nuxt-contrib/vue3-ssr-starter/tree/main?terminal=dev" target="_blank"}
|
|
||||||
:card{title="Vue 3 SSR on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://codesandbox.io/s/github/nuxt-contrib/vue3-ssr-starter/main" target="_blank"}
|
|
||||||
:card{title="Vue 3 SSR Template on GitHub" icon="i-simple-icons-github" to="https://github.com/nuxt-contrib/vue3-ssr-starter/generate" target="_blank"}
|
|
||||||
::
|
::
|
||||||
|
|
||||||
Once you've reproduced the issue, remove as much code from your reproduction as you can (while still recreating the bug). The time spent making the reproduction as minimal as possible will make a huge difference to whoever sets out to fix the issue.
|
Once you've reproduced the issue, remove as much code from your reproduction as you can (while still recreating the bug). The time spent making the reproduction as minimal as possible will make a huge difference to whoever sets out to fix the issue.
|
||||||
|
@ -32,7 +32,7 @@ Milestone | Expected date | Notes
|
|||||||
-------------|---------------|------------------------------------------------------------------------|-----------------------
|
-------------|---------------|------------------------------------------------------------------------|-----------------------
|
||||||
SEO & PWA | 2024 | [nuxt/nuxt#18395](https://github.com/nuxt/nuxt/discussions/18395) | Migrating from [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) for built-in SEO utils and service worker support
|
SEO & PWA | 2024 | [nuxt/nuxt#18395](https://github.com/nuxt/nuxt/discussions/18395) | Migrating from [nuxt-community/pwa-module](https://github.com/nuxt-community/pwa-module) for built-in SEO utils and service worker support
|
||||||
Assets | 2024 | [nuxt/nuxt#22012](https://github.com/nuxt/nuxt/discussions/22012) | Allow developers and modules to handle loading third-party assets.
|
Assets | 2024 | [nuxt/nuxt#22012](https://github.com/nuxt/nuxt/discussions/22012) | Allow developers and modules to handle loading third-party assets.
|
||||||
Translations | - | [nuxt/translations#4](https://github.com/nuxt/translations/discussions/4) ([request access](https://github.com/nuxt/nuxt/discussions/16054)) | A collaborative project for a stable translation process for Nuxt 3 docs. Currently pending for ideas and documentation tooling support (content v2 with remote sources).
|
Translations | - | [nuxt/translations#4](https://github.com/nuxt/translations/discussions/4) ([request access](https://github.com/nuxt/nuxt/discussions/16054)) | A collaborative project for a stable translation process for Nuxt docs. Currently pending for ideas and documentation tooling support (content v2 with remote sources).
|
||||||
|
|
||||||
## Core Modules Roadmap
|
## Core Modules Roadmap
|
||||||
|
|
||||||
@ -42,7 +42,7 @@ Module | Status | Nuxt Support | Repos
|
|||||||
------------------------------------|---------------------|--------------|------------|-------------------
|
------------------------------------|---------------------|--------------|------------|-------------------
|
||||||
[Scripts](https://scripts.nuxt.com) | Public Preview | 3.x | [nuxt/scripts](https://github.com/nuxt/scripts) | Easy 3rd party script management.
|
[Scripts](https://scripts.nuxt.com) | Public Preview | 3.x | [nuxt/scripts](https://github.com/nuxt/scripts) | Easy 3rd party script management.
|
||||||
A11y | Planned | 3.x | `nuxt/a11y` to be announced | Accessibility hinting and utilities [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255)
|
A11y | Planned | 3.x | `nuxt/a11y` to be announced | Accessibility hinting and utilities [nuxt/nuxt#23255](https://github.com/nuxt/nuxt/issues/23255)
|
||||||
Auth | Planned | 3.x | `nuxt/auth` to be announced | Nuxt 3 support is planned after session support.
|
Auth | Planned | 3.x | `nuxt/auth` to be announced | Support is planned after session support.
|
||||||
Hints | Planned | 3.x | `nuxt/hints` to be announced | Guidance and suggestions for enhancing development practices.
|
Hints | Planned | 3.x | `nuxt/hints` to be announced | Guidance and suggestions for enhancing development practices.
|
||||||
|
|
||||||
## Release Cycle
|
## Release Cycle
|
||||||
@ -59,7 +59,7 @@ The current active version of [Nuxt](https://nuxt.com) is **v3** which is availa
|
|||||||
|
|
||||||
Nuxt 2 is in maintenance mode and is available on npm with the `2x` tag. It will reach End of Life (EOL) on June 30, 2024.
|
Nuxt 2 is in maintenance mode and is available on npm with the `2x` tag. It will reach End of Life (EOL) on June 30, 2024.
|
||||||
|
|
||||||
Each active version has its own nightly releases which are generated automatically. For more about enabling the Nuxt 3 nightly release channel, see [the nightly release channel docs](/docs/guide/going-further/nightly-release-channel).
|
Each active version has its own nightly releases which are generated automatically. For more about enabling the Nuxt nightly release channel, see [the nightly release channel docs](/docs/guide/going-further/nightly-release-channel).
|
||||||
|
|
||||||
Release | | Initial release | End Of Life | Docs
|
Release | | Initial release | End Of Life | Docs
|
||||||
----------------------------------------|---------------------------------------------------------------------------------------------------|-----------------|--------------|-------
|
----------------------------------------|---------------------------------------------------------------------------------------------------|-----------------|--------------|-------
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
# Nuxt 3 Examples
|
# Nuxt Examples
|
||||||
|
|
||||||
- 👉 See examples in your browser at https://nuxt.com/docs/examples
|
- 👉 See examples in your browser at https://nuxt.com/docs/examples
|
||||||
- 👉 View on GitHub at https://github.com/nuxt/examples
|
- 👉 View on GitHub at https://github.com/nuxt/examples
|
||||||
|
@ -23,7 +23,7 @@ export default defineUntypedSchema({
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Configure how Nuxt auto-imports composables into your application.
|
* Configure how Nuxt auto-imports composables into your application.
|
||||||
* @see [Nuxt 3 documentation](https://nuxt.com/docs/guide/directory-structure/composables)
|
* @see [Nuxt documentation](https://nuxt.com/docs/guide/directory-structure/composables)
|
||||||
* @type {typeof import('../src/types/imports').ImportsOptions}
|
* @type {typeof import('../src/types/imports').ImportsOptions}
|
||||||
*/
|
*/
|
||||||
imports: {
|
imports: {
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- Edit this file to play around with Nuxt but never commit changes! -->
|
<!-- Edit this file to play around with Nuxt but never commit changes! -->
|
||||||
<div>
|
<div>
|
||||||
Nuxt 3 Playground
|
Nuxt Playground
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user