Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 13:45:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: remove redundant trailing slashes from links (#23744)

Browse Source
This commit is contained in:
Damian Głowala 2023-10-18 13:26:06 +02:00 committed by GitHub
parent f26a801775
commit 08281866a6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 67 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/1.getting-started/11.testing.md
View File

@ -9,7 +9,7 @@ Test utils are still in development and the API and behavior may change. Current
If you are a module author, you can find more specific information in the [Module Author's guide](/docs/guide/going-further/modules#testing) If you are a module author, you can find more specific information in the [Module Author's guide](/docs/guide/going-further/modules#testing)
:: ::
In Nuxt 3, we have a rewritten version of `@nuxt/test-utils`. We support [Vitest](https://github.com/vitest-dev/vitest) and [Jest](https://jestjs.io/) as test runners. In Nuxt 3, we have a rewritten version of `@nuxt/test-utils`. We support [Vitest](https://github.com/vitest-dev/vitest) and [Jest](https://jestjs.io) as test runners.
## Installation ## Installation
@ -84,14 +84,14 @@ Please the options below for the `setup` method.
- `build`: Whether to run a separate build step. - `build`: Whether to run a separate build step.
- Type: `boolean` - Type: `boolean`
- Default: `true` (`false` if `browser` or `server` is disabled) - Default: `true` (`false` if `browser` or `server` is disabled)
- `browser`: Under the hood, Nuxt test utils uses [`playwright`](https://playwright.dev/) to carry out browser testing. If this option is set, a browser will be launched and can be controlled in the subsequent test suite. - `browser`: Under the hood, Nuxt test utils uses [`playwright`](https://playwright.dev) to carry out browser testing. If this option is set, a browser will be launched and can be controlled in the subsequent test suite.
- Type: `boolean` - Type: `boolean`
- Default: `false` - Default: `false`
- `browserOptions` - `browserOptions`
- Type: `object` with the following properties - Type: `object` with the following properties
- `type`: The type of browser to launch - either `chromium`, `firefox` or `webkit` - `type`: The type of browser to launch - either `chromium`, `firefox` or `webkit`
- `launch`: `object` of options that will be passed to playwright when launching the browser. See [full API reference](https://playwright.dev/docs/api/class-browsertype#browser-type-launch). - `launch`: `object` of options that will be passed to playwright when launching the browser. See [full API reference](https://playwright.dev/docs/api/class-browsertype#browser-type-launch).
- `runner`: Specify the runner for the test suite. Currently, [Vitest](https://vitest.dev/) is recommended. - `runner`: Specify the runner for the test suite. Currently, [Vitest](https://vitest.dev) is recommended.
- Type: `'vitest' | 'jest'` - Type: `'vitest' | 'jest'`
- Default: `'vitest'` - Default: `'vitest'`

6
docs/1.getting-started/2.installation.md
View File

@ -21,8 +21,8 @@ Start with one of our starters and themes directly by opening [nuxt.new](https:/
<!-- markdownlint-disable-next-line MD001 --> <!-- markdownlint-disable-next-line MD001 -->
#### Prerequisites #### Prerequisites
- **Node.js** - [`v16.10.0`](https://nodejs.org/en/) or newer - **Node.js** - [`v16.10.0`](https://nodejs.org/en) or newer
- **Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com/) with the [Volar Extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - **Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com) with the [Volar Extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
- **Terminal** - In order to run Nuxt commands - **Terminal** - In order to run Nuxt commands
::callout ::callout
@ -44,7 +44,7 @@ Start with one of our starters and themes directly by opening [nuxt.new](https:/
:: ::
:: ::
Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.com/), you can open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal)) and use the following command to create a new starter project: Open a terminal (if you're using [Visual Studio Code](https://code.visualstudio.com), you can open an [integrated terminal](https://code.visualstudio.com/docs/editor/integrated-terminal)) and use the following command to create a new starter project:
::code-group ::code-group

26
docs/1.getting-started/3.configuration.md
View File

@ -137,23 +137,23 @@ Non primitive JS types | ❌ No | ✅ Yes
Nuxt uses [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file as the single source of trust for configurations and skips reading external configuration files. During the course of building your project, you may have a need to configure those. The following table highlights common configurations and, where applicable, how they can be configured with Nuxt. Nuxt uses [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file as the single source of trust for configurations and skips reading external configuration files. During the course of building your project, you may have a need to configure those. The following table highlights common configurations and, where applicable, how they can be configured with Nuxt.
Name | Config File | How To Configure Name | Config File | How To Configure
|---------------------------------------------|---------------------------|------------------------- |----------------------------------------------|---------------------------|-------------------------
| [Nitro](https://nitro.unjs.io/) | ~~`nitro.config.ts`~~ | Use [`nitro`](/docs/api/nuxt-config#nitro) key in `nuxt.config` | [Nitro](https://nitro.unjs.io) | ~~`nitro.config.ts`~~ | Use [`nitro`](/docs/api/nuxt-config#nitro) key in `nuxt.config`
| [PostCSS](https://postcss.org) | ~~`postcss.config.js`~~ | Use [`postcss`](/docs/api/nuxt-config#postcss) key in `nuxt.config` | [PostCSS](https://postcss.org) | ~~`postcss.config.js`~~ | Use [`postcss`](/docs/api/nuxt-config#postcss) key in `nuxt.config`
| [Vite](https://vitejs.dev) | ~~`vite.config.ts`~~ | Use [`vite`](/docs/api/nuxt-config#vite) key in `nuxt.config` | [Vite](https://vitejs.dev) | ~~`vite.config.ts`~~ | Use [`vite`](/docs/api/nuxt-config#vite) key in `nuxt.config`
| [webpack](https://webpack.js.org/) | ~~`webpack.config.ts`~~ | Use [`webpack`](/docs/api/nuxt-config#webpack-1) key in `nuxt.config` | [webpack](https://webpack.js.org) | ~~`webpack.config.ts`~~ | Use [`webpack`](/docs/api/nuxt-config#webpack-1) key in `nuxt.config`
Here is a list of other common config files: Here is a list of other common config files:
Name | Config File | How To Configure Name | Config File | How To Configure
|---------------------------------------------|-------------------------|-------------------------- |----------------------------------------------|-------------------------|--------------------------
| [TypeScript](https://www.typescriptlang.org) | `tsconfig.json` | [More Info](/docs/guide/concepts/typescript#nuxttsconfigjson) | [TypeScript](https://www.typescriptlang.org) | `tsconfig.json` | [More Info](/docs/guide/concepts/typescript#nuxttsconfigjson)
| [ESLint](https://eslint.org) | `.eslintrc.js` | [More Info](https://eslint.org/docs/latest/user-guide/configuring/configuration-files) | [ESLint](https://eslint.org) | `.eslintrc.js` | [More Info](https://eslint.org/docs/latest/user-guide/configuring/configuration-files)
| [Prettier](https://prettier.io) | `.prettierrc.json` | [More Info](https://prettier.io/docs/en/configuration.html) | [Prettier](https://prettier.io) | `.prettierrc.json` | [More Info](https://prettier.io/docs/en/configuration.html)
| [Stylelint](https://stylelint.io) | `.stylelintrc.json` | [More Info](https://stylelint.io/user-guide/configure) | [Stylelint](https://stylelint.io) | `.stylelintrc.json` | [More Info](https://stylelint.io/user-guide/configure)
| [TailwindCSS](https://tailwindcss.com) | `tailwind.config.js` | [More Info](https://tailwindcss.nuxtjs.org/tailwind/config/) | [TailwindCSS](https://tailwindcss.com) | `tailwind.config.js` | [More Info](https://tailwindcss.nuxtjs.org/tailwind/config)
| [Vitest](https://vitest.dev) | `vitest.config.ts` | [More Info](https://vitest.dev/config/) | [Vitest](https://vitest.dev) | `vitest.config.ts` | [More Info](https://vitest.dev/config)
## Vue Configuration ## Vue Configuration

2
docs/1.getting-started/4.assets.md
View File

@ -27,7 +27,7 @@ For example, referencing an image file in the `public/img/` directory, available
## Assets Directory ## Assets Directory
Nuxt uses [Vite](https://vitejs.dev/guide/assets.html) (default) or [webpack](https://webpack.js.org/guides/asset-management/) to build and bundle your application. The main function of these build tools is to process JavaScript files, but they can be extended through [plugins](https://vitejs.dev/plugins/) (for Vite) or [loaders](https://webpack.js.org/loaders/) (for webpack) to process other kind of assets, like stylesheets, fonts or SVG. This step transforms the original file mainly for performance or caching purposes (such as stylesheets minification or browser cache invalidation). Nuxt uses [Vite](https://vitejs.dev/guide/assets.html) (default) or [webpack](https://webpack.js.org/guides/asset-management) to build and bundle your application. The main function of these build tools is to process JavaScript files, but they can be extended through [plugins](https://vitejs.dev/plugins) (for Vite) or [loaders](https://webpack.js.org/loaders) (for webpack) to process other kind of assets, like stylesheets, fonts or SVG. This step transforms the original file mainly for performance or caching purposes (such as stylesheets minification or browser cache invalidation).
By convention, Nuxt uses the [`assets/`](/docs/guide/directory-structure/assets) directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it. By convention, Nuxt uses the [`assets/`](/docs/guide/directory-structure/assets) directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.

20
docs/1.getting-started/4.styling.md
View File

@ -128,7 +128,7 @@ useHead({
}) })
``` ```
Nuxt uses `unhead` under the hood, and you can refer to its full documentation [here](https://unhead.unjs.io/). Nuxt uses `unhead` under the hood, and you can refer to its full documentation [here](https://unhead.unjs.io).
### Modifying The Rendered Head With A Nitro Plugin ### Modifying The Rendered Head With A Nitro Plugin
@ -144,7 +144,7 @@ export default defineNitroPlugin((nitro) => {
}) })
``` ```
External stylesheets are render-blocking resources: they must be loaded and processed before the browser renders the page. Web pages that contain unnecessarily large styles take longer to render. You can read more about it on [web.dev](https://web.dev/defer-non-critical-css/). External stylesheets are render-blocking resources: they must be loaded and processed before the browser renders the page. Web pages that contain unnecessarily large styles take longer to render. You can read more about it on [web.dev](https://web.dev/defer-non-critical-css).
## Using Preprocessors ## Using Preprocessors
@ -239,11 +239,11 @@ export default defineNuxtConfig({
:: ::
Nuxt uses Vite by default. If you wish to use webpack instead, refer to each preprocessor loader [documentation](https://webpack.js.org/loaders/sass-loader/). Nuxt uses Vite by default. If you wish to use webpack instead, refer to each preprocessor loader [documentation](https://webpack.js.org/loaders/sass-loader).
## Single File Components (SFC) Styling ## Single File Components (SFC) Styling
One of the best thing about Vue and SFC is how great it is at naturally dealing with styling. You can directly write CSS or preprocessor code in the style block of your components file, therefore you will have fantastic developer experience without having to use something like CSS-in-JS. However if you wish to use CSS-in-JS, you can find 3rd party libraries and modules that support it, such as [pinceau](https://pinceau.dev/). One of the best thing about Vue and SFC is how great it is at naturally dealing with styling. You can directly write CSS or preprocessor code in the style block of your components file, therefore you will have fantastic developer experience without having to use something like CSS-in-JS. However if you wish to use CSS-in-JS, you can find 3rd party libraries and modules that support it, such as [pinceau](https://pinceau.dev).
You can refer to the [Vue docs](https://vuejs.org/api/sfc-css-features.html) for a comprehensive reference about styling components in SFC. You can refer to the [Vue docs](https://vuejs.org/api/sfc-css-features.html) for a comprehensive reference about styling components in SFC.
@ -400,7 +400,7 @@ SFC style blocks support preprocessors syntax. Vite come with built-in support f
:: ::
You can refer to the [Vite CSS docs](https://vitejs.dev/guide/features.html#css) and the [@vitejs/plugin-vue docs](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue). You can refer to the [Vite CSS docs](https://vitejs.dev/guide/features.html#css) and the [@vitejs/plugin-vue docs](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue).
For webpack users, refer to the [vue loader docs](https://vue-loader.vuejs.org/). For webpack users, refer to the [vue loader docs](https://vue-loader.vuejs.org).
## Using PostCSS ## Using PostCSS
@ -430,7 +430,7 @@ By default, Nuxt comes with the following plugins already pre-configured:
- [postcss-import](https://github.com/postcss/postcss-import): Improves the `@import` rule - [postcss-import](https://github.com/postcss/postcss-import): Improves the `@import` rule
- [postcss-url](https://github.com/postcss/postcss-url): Transforms `url()` statements - [postcss-url](https://github.com/postcss/postcss-url): Transforms `url()` statements
- [autoprefixer](https://github.com/postcss/autoprefixer): Automatically adds vendor prefixes - [autoprefixer](https://github.com/postcss/autoprefixer): Automatically adds vendor prefixes
- [cssnano](https://cssnano.co/): Minification and purge - [cssnano](https://cssnano.co): Minification and purge
##  Leveraging Layouts For Multiple Styles ##  Leveraging Layouts For Multiple Styles
@ -456,7 +456,7 @@ Use different styles for different layouts.
## Third Party Libraries And Modules ## Third Party Libraries And Modules
Nuxt isn't opinionated when it comes to styling and provides you with a wide variety of options. You can use any styling tool that you want, such as popular libraries like [UnoCSS](https://unocss.dev/) or [Tailwind CSS](https://tailwindcss.com/). Nuxt isn't opinionated when it comes to styling and provides you with a wide variety of options. You can use any styling tool that you want, such as popular libraries like [UnoCSS](https://unocss.dev) or [Tailwind CSS](https://tailwindcss.com).
The community and the Nuxt team have developed plenty of Nuxt modules to makes the integration easier. The community and the Nuxt team have developed plenty of Nuxt modules to makes the integration easier.
You can discover them on the [modules section](/modules) of the website. You can discover them on the [modules section](/modules) of the website.
@ -465,7 +465,7 @@ Here are a few modules to help you get started:
- [UnoCSS](/modules/unocss): Instant on-demand atomic CSS engine - [UnoCSS](/modules/unocss): Instant on-demand atomic CSS engine
- [Tailwind CSS](/modules/tailwindcss): Utility-first CSS framework - [Tailwind CSS](/modules/tailwindcss): Utility-first CSS framework
- [Fontaine](https://github.com/nuxt-modules/fontaine): Font metric fallback - [Fontaine](https://github.com/nuxt-modules/fontaine): Font metric fallback
- [Pinceau](https://pinceau.dev/): Adaptable styling framework - [Pinceau](https://pinceau.dev): Adaptable styling framework
- [Nuxt UI](https://ui.nuxt.com): A UI Library for Modern Web Apps - [Nuxt UI](https://ui.nuxt.com): A UI Library for Modern Web Apps
Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a [Nuxt plugin](/docs/guide/directory-structure/plugins) and/or [make your own module](/docs/guide/going-further/modules). Share them with the [community](/modules) if you do! Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a [Nuxt plugin](/docs/guide/directory-structure/plugins) and/or [make your own module](/docs/guide/going-further/modules). Share them with the [community](/modules) if you do!
@ -486,7 +486,7 @@ Nuxt comes with the same `<Transition>` element that Vue has, and also has suppo
### Font Advanced Optimization ### Font Advanced Optimization
We would recommend using [Fontaine](https://github.com/nuxt-modules/fontaine) to reduce your [CLS](https://web.dev/cls/). If you need something more advanced, consider creating a Nuxt module to extend the build process or the Nuxt runtime. We would recommend using [Fontaine](https://github.com/nuxt-modules/fontaine) to reduce your [CLS](https://web.dev/cls). If you need something more advanced, consider creating a Nuxt module to extend the build process or the Nuxt runtime.
::callout ::callout
Always remember to take advantage of the various tools and techniques available in the Web ecosystem at large to make styling your application easier and more efficient. Whether you're using native CSS, a preprocessor, postcss, a UI library or a module, Nuxt has got you covered. Happy styling! Always remember to take advantage of the various tools and techniques available in the Web ecosystem at large to make styling your application easier and more efficient. Whether you're using native CSS, a preprocessor, postcss, a UI library or a module, Nuxt has got you covered. Happy styling!
@ -502,7 +502,7 @@ You can do the following to speed-up the download of your global CSS files:
- Host your assets on the same domain (do not use a different subdomain) - Host your assets on the same domain (do not use a different subdomain)
Most of these things should be done for you automatically if you're using modern platforms like Cloudflare, Netlify or Vercel. Most of these things should be done for you automatically if you're using modern platforms like Cloudflare, Netlify or Vercel.
You can find an LCP optimization guide on [web.dev](https://web.dev/optimize-lcp/). You can find an LCP optimization guide on [web.dev](https://web.dev/optimize-lcp).
If all of your CSS is inlined by Nuxt, you can (experimentally) completely stop external CSS files from being referenced in your rendered HTML. If all of your CSS is inlined by Nuxt, you can (experimentally) completely stop external CSS files from being referenced in your rendered HTML.
You can achieve that with a hook, that you can place in a module, or in your Nuxt configuration file. You can achieve that with a hook, that you can place in a module, or in your Nuxt configuration file.

2
docs/1.getting-started/5.routing.md
View File

@ -8,7 +8,7 @@ One core feature of Nuxt is the file system router. Every Vue file inside the [`
## Pages ## Pages
Nuxt routing is based on [vue-router](https://router.vuejs.org/) and generates the routes from every component created in the [`pages/` directory](/docs/guide/directory-structure/pages), based on their filename. Nuxt routing is based on [vue-router](https://router.vuejs.org) and generates the routes from every component created in the [`pages/` directory](/docs/guide/directory-structure/pages), based on their filename.
This file system routing uses naming conventions to create dynamic and nested routes: This file system routing uses naming conventions to create dynamic and nested routes:

2
docs/1.getting-started/5.seo-meta.md
View File

@ -30,7 +30,7 @@ Shortcuts are available to make configuration easier: `charset` and `viewport`.
## `useHead` ## `useHead`
The [`useHead`](/docs/api/composables/use-head) composable function allows you to manage your head tags in a programmatic and reactive way, The [`useHead`](/docs/api/composables/use-head) composable function allows you to manage your head tags in a programmatic and reactive way,
powered by [Unhead](https://unhead.unjs.io/). powered by [Unhead](https://unhead.unjs.io).
As with all composables, it can only be used with a components `setup` and lifecycle hooks. As with all composables, it can only be used with a components `setup` and lifecycle hooks.

4
docs/1.getting-started/5.transitions.md
View File

@ -291,7 +291,7 @@ defineNuxtConfig({
For advanced use-cases, you can use JavaScript hooks to create highly dynamic and custom transitions for your Nuxt pages. For advanced use-cases, you can use JavaScript hooks to create highly dynamic and custom transitions for your Nuxt pages.
This way presents perfect use-cases for JavaScript animation libraries such as [GSAP](https://gsap.com/). This way presents perfect use-cases for JavaScript animation libraries such as [GSAP](https://gsap.com).
```vue [pages/some-page.vue] ```vue [pages/some-page.vue]
<script setup lang="ts"> <script setup lang="ts">
@ -412,7 +412,7 @@ Remember, this page transition cannot be overridden with `definePageMeta` on ind
## View Transitions API (experimental) ## View Transitions API (experimental)
Nuxt ships with an experimental implementation of the [**View Transitions API**](https://developer.chrome.com/docs/web-platform/view-transitions/) (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)). This is an exciting new way to implement native browser transitions which (among other things) have the ability to transition between unrelated elements on different pages. Nuxt ships with an experimental implementation of the [**View Transitions API**](https://developer.chrome.com/docs/web-platform/view-transitions) (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)). This is an exciting new way to implement native browser transitions which (among other things) have the ability to transition between unrelated elements on different pages.
The Nuxt integration is under active development, but can be enabled with the `experimental.viewTransition` option in your configuration file: The Nuxt integration is under active development, but can be enabled with the `experimental.viewTransition` option in your configuration file:

8
docs/1.getting-started/8.server.md
View File

@ -10,7 +10,7 @@ Nuxt's server framework allows you to build **full-stack applications**. For exa
## Powered by Nitro ## Powered by Nitro
Nuxt's server is [Nitro](https://github.com/unjs/nitro). Nitro was originally created for Nuxt but is now part of [UnJS](https://unjs.io/) and used for other frameworks - and can even be used on its own. Nuxt's server is [Nitro](https://github.com/unjs/nitro). Nitro was originally created for Nuxt but is now part of [UnJS](https://unjs.io) and used for other frameworks - and can even be used on its own.
Using Nitro gives Nuxt superpowers: Using Nitro gives Nuxt superpowers:
@ -44,10 +44,10 @@ Nitro offers the ability to deploy your Nuxt app anywhere, from a bare metal ser
Today, Nitro offers more than 15 presets to build your Nuxt app for different cloud providers and servers, including: Today, Nitro offers more than 15 presets to build your Nuxt app for different cloud providers and servers, including:
- [Cloudflare Workers](https://workers.cloudflare.com/) - [Cloudflare Workers](https://workers.cloudflare.com)
- [Netlify Functions](https://www.netlify.com/products/functions/) - [Netlify Functions](https://www.netlify.com/products/functions)
- [Vercel Edge Network](https://vercel.com/docs/edge-network/introduction) - [Vercel Edge Network](https://vercel.com/docs/edge-network/introduction)
- [Lagon](https://lagon.app/) - [Lagon](https://lagon.app)
Or for other runtimes: Or for other runtimes:

2
docs/2.guide/1.concepts/1.auto-imports.md
View File

@ -3,7 +3,7 @@ title: Auto-imports
description: "Nuxt auto-imports components, composables, helper functions and Vue APIs." description: "Nuxt auto-imports components, composables, helper functions and Vue APIs."
--- ---
Nuxt auto-imports components, composables and [Vue.js APIs](https://vuejs.org/api/) to use across your application without explicitly importing them. Nuxt auto-imports components, composables and [Vue.js APIs](https://vuejs.org/api) to use across your application without explicitly importing them.
```vue [app.vue] ```vue [app.vue]
<script setup lang="ts"> <script setup lang="ts">

4
docs/2.guide/1.concepts/2.vuejs-development.md
View File

@ -6,7 +6,7 @@ description: "Nuxt uses Vue.js and adds features such as component auto-imports,
Nuxt integrates Vue 3, the new major release of Vue that enables new patterns for Nuxt users. Nuxt integrates Vue 3, the new major release of Vue that enables new patterns for Nuxt users.
::callout ::callout
While an in-depth knowledge of Vue is not required to use Nuxt, we recommend that you read the documentation and go through some of the examples on [vuejs.org](https://vuejs.org/). While an in-depth knowledge of Vue is not required to use Nuxt, we recommend that you read the documentation and go through some of the examples on [vuejs.org](https://vuejs.org).
:: ::
Nuxt has always used Vue as a frontend framework. Nuxt has always used Vue as a frontend framework.
@ -31,7 +31,7 @@ Every Vue component created in the [`components/`](/docs/guide/directory-structu
### Vue Router ### Vue Router
Most applications need multiple pages and a way to navigate between them. This is called **routing**. Nuxt uses a [`pages/`](/docs/guide/directory-structure/pages) directory and naming conventions to directly create routes mapped to your files using the official [Vue Router library](https://router.vuejs.org/). Most applications need multiple pages and a way to navigate between them. This is called **routing**. Nuxt uses a [`pages/`](/docs/guide/directory-structure/pages) directory and naming conventions to directly create routes mapped to your files using the official [Vue Router library](https://router.vuejs.org).
:read-more{to="/docs/getting-started/routing"} :read-more{to="/docs/getting-started/routing"}

2
docs/2.guide/1.concepts/3.rendering.md
View File

@ -142,7 +142,7 @@ When a request for a page is made, instead of going all the way to the original
Edge-side rendering is possible thanks to [Nitro](https://nitro.unjs.io), the [server engine](/docs/guide/concepts/server-engine) that powers Nuxt 3. It offers cross-platform support for Node.js, Deno, Cloudflare Workers, and more. Edge-side rendering is possible thanks to [Nitro](https://nitro.unjs.io), the [server engine](/docs/guide/concepts/server-engine) that powers Nuxt 3. It offers cross-platform support for Node.js, Deno, Cloudflare Workers, and more.
The current platforms where you can leverage ESR are: The current platforms where you can leverage ESR are:
- [Cloudflare Pages](https://pages.cloudflare.com/) with zero configuration using the git integration and the `nuxt build` command - [Cloudflare Pages](https://pages.cloudflare.com) with zero configuration using the git integration and the `nuxt build` command
- [Lagon](https://lagon.app) using the `NITRO_PRESET=lagon npx nuxt build` command - [Lagon](https://lagon.app) using the `NITRO_PRESET=lagon npx nuxt build` command
- [Vercel Edge Functions](https://vercel.com/features/edge-functions) using the `nuxt build` command and `NITRO_PRESET=vercel-edge` environment variable - [Vercel Edge Functions](https://vercel.com/features/edge-functions) using the `nuxt build` command and `NITRO_PRESET=vercel-edge` environment variable
- [Netlify Edge Functions](https://www.netlify.com/products/#netlify-edge-functions) using the `nuxt build` command and `NITRO_PRESET=netlify-edge` environment variable - [Netlify Edge Functions](https://www.netlify.com/products/#netlify-edge-functions) using the `nuxt build` command and `NITRO_PRESET=netlify-edge` environment variable

2
docs/2.guide/1.concepts/4.server-engine.md
View File

@ -3,7 +3,7 @@ title: Server Engine
description: 'Nuxt 3 is powered by a new server engine: Nitro.' description: 'Nuxt 3 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).
It is shipped with many features: It is shipped with many features:

4
docs/2.guide/1.concepts/7.esm.md
View File

@ -31,8 +31,8 @@ export { a }
``` ```
Before ECMAScript Modules (ESM) became a standard (it took more than 10 years!), tooling like Before ECMAScript Modules (ESM) became a standard (it took more than 10 years!), tooling like
[webpack](https://webpack.js.org/guides/ecma-script-modules/) and even languages like TypeScript started supporting so-called **ESM syntax**. [webpack](https://webpack.js.org/guides/ecma-script-modules) and even languages like TypeScript started supporting so-called **ESM syntax**.
However, there are some key differences with actual spec; here's [a helpful explainer](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/). However, there are some key differences with actual spec; here's [a helpful explainer](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive).
### What is 'Native' ESM? ### What is 'Native' ESM?

2
docs/2.guide/2.directory-structure/1.node_modules.md
View File

@ -5,7 +5,7 @@ head.title: "node_modules/"
navigation.icon: i-ph-folder-duotone navigation.icon: i-ph-folder-duotone
--- ---
The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm) or [`yarn`](https://yarnpkg.com/) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.sh/package-manager)) creates this directory to store the dependencies of your project. The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm) or [`yarn`](https://yarnpkg.com) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.sh/package-manager)) creates this directory to store the dependencies of your project.
::callout ::callout
This directory should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing the dependencies to your repository. This directory should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.

2
docs/2.guide/2.directory-structure/3.app.md
View File

@ -7,7 +7,7 @@ navigation.icon: i-ph-file-duotone
## Minimal Usage ## Minimal Usage
With Nuxt 3, the [`pages/`](/docs/guide/directory-structure/pages) directory is optional. If not present, Nuxt won't include [vue-router](https://router.vuejs.org/) dependency. This is useful when working on a landing page or an application that does not need routing. With Nuxt 3, the [`pages/`](/docs/guide/directory-structure/pages) directory is optional. If not present, Nuxt won't include [vue-router](https://router.vuejs.org) dependency. This is useful when working on a landing page or an application that does not need routing.
```vue [app.vue] ```vue [app.vue]
<template> <template>

2
docs/2.guide/3.going-further/8.custom-routing.md
View File

@ -5,7 +5,7 @@ description: "In Nuxt 3, your routing is defined by the structure of your files
## Adding custom routes ## Adding custom routes
In Nuxt 3, your routing is defined by the structure of your files inside the [pages directory](/docs/guide/directory-structure/pages). However, since it uses [vue-router](https://router.vuejs.org/) under the hood, Nuxt offers you several ways to add custom routes in your project. In Nuxt 3, your routing is defined by the structure of your files inside the [pages directory](/docs/guide/directory-structure/pages). However, since it uses [vue-router](https://router.vuejs.org) under the hood, Nuxt offers you several ways to add custom routes in your project.
### Router Config ### Router Config

2
docs/3.api/2.composables/use-head.md
View File

@ -8,7 +8,7 @@ links:
size: xs size: xs
--- ---
The [`useHead`](/docs/api/composables/use-head) composable function allows you to manage your head tags in a programmatic and reactive way, powered by [Unhead](https://unhead.unjs.io/). If the data comes from a user or other untrusted source, we recommend you check out [`useHeadSafe`](/docs/api/composables/use-head-safe) The [`useHead`](/docs/api/composables/use-head) composable function allows you to manage your head tags in a programmatic and reactive way, powered by [Unhead](https://unhead.unjs.io). If the data comes from a user or other untrusted source, we recommend you check out [`useHeadSafe`](/docs/api/composables/use-head-safe).
:read-more{to="/docs/getting-started/seo-meta"} :read-more{to="/docs/getting-started/seo-meta"}

6
docs/3.api/5.kit/14.builder.md
View File

@ -28,7 +28,7 @@ export interface ExtendWebpackConfigOptions {
} }
``` ```
::read-more{to="https://webpack.js.org/configuration/" target="_blank" color="gray" icon="i-simple-icons-webpack"} ::read-more{to="https://webpack.js.org/configuration" target="_blank" color="gray" icon="i-simple-icons-webpack"}
Checkout webpack website for more information about its configuration. Checkout webpack website for more information about its configuration.
:: ::
@ -123,7 +123,7 @@ export interface ExtendViteConfigOptions {
} }
``` ```
::read-more{to="https://vitejs.dev/config/" target="_blank" color="gray" icon="i-simple-icons-vite"} ::read-more{to="https://vitejs.dev/config" target="_blank" color="gray" icon="i-simple-icons-vite"}
Checkout Vite website for more information about its configuration. Checkout Vite website for more information about its configuration.
:: ::
@ -221,7 +221,7 @@ interface ExtendWebpackConfigOptions {
``` ```
::callout ::callout
See [webpack website](https://webpack.js.org/concepts/plugins/) for more information about webpack plugins. You can also use [this collection](https://webpack.js.org/awesome-webpack/#webpack-plugins) to find a plugin that suits your needs. See [webpack website](https://webpack.js.org/concepts/plugins) for more information about webpack plugins. You can also use [this collection](https://webpack.js.org/awesome-webpack/#webpack-plugins) to find a plugin that suits your needs.
:: ::
### Parameters ### Parameters

2
docs/5.community/2.getting-help.md
View File

@ -24,7 +24,7 @@ Everyone you'll encounter is helping out because they care, not because they are
* _Share your code._ People probably won't be able to help if they just see an error message or a screenshot - but that all changes if you share your code in a copy/pasteable format - preferably in the form of a minimal reproduction like a CodeSandbox. * _Share your code._ People probably won't be able to help if they just see an error message or a screenshot - but that all changes if you share your code in a copy/pasteable format - preferably in the form of a minimal reproduction like a CodeSandbox.
And finally, just ask the question! There's no need to [ask permission to ask a question](https://dontasktoask.com/) or [wait for someone to reply to your 'hello'](https://www.nohello.com/). If you do, you might not get a response because people are waiting for the whole question before engaging. And finally, just ask the question! There's no need to [ask permission to ask a question](https://dontasktoask.com) or [wait for someone to reply to your 'hello'](https://www.nohello.com). If you do, you might not get a response because people are waiting for the whole question before engaging.
## "Could there be a bug?" ## "Could there be a bug?"

2
docs/5.community/3.reporting-bugs.md
View File

@ -53,4 +53,4 @@ Once you've reproduced the issue, remove as much code from your reproduction as
## Figure Out What the Cause Might Be ## Figure Out What the Cause Might Be
With a Nuxt project, there are lots of moving pieces - from [Nuxt modules](/modules) to [other JavaScript libraries](https://www.npmjs.com/). Try to report the bug at the most relevant and specific place. That will likely be the Nuxt module causing an issue, or the upstream library that Nuxt is depending on. With a Nuxt project, there are lots of moving pieces - from [Nuxt modules](/modules) to [other JavaScript libraries](https://www.npmjs.com). Try to report the bug at the most relevant and specific place. That will likely be the Nuxt module causing an issue, or the upstream library that Nuxt is depending on.

6
docs/5.community/4.contribution.md
View File

@ -46,7 +46,7 @@ For bigger changes to Nuxt itself, we recommend that you first [create a Nuxt mo
#### Commit Conventions #### Commit Conventions
We use [Conventional Commits](https://www.conventionalcommits.org/) for commit messages, which [allows a changelog to be auto-generated](https://github.com/unjs/changelogen) based on the commits. Please read the guide through if you aren't familiar with it already. We use [Conventional Commits](https://www.conventionalcommits.org) for commit messages, which [allows a changelog to be auto-generated](https://github.com/unjs/changelogen) based on the commits. Please read the guide through if you aren't familiar with it already.
Note that `fix:` and `feat:` are for **actual code changes** (that might affect logic). For typo or document changes, use `docs:` or `chore:` instead: Note that `fix:` and `feat:` are for **actual code changes** (that might affect logic). For typo or document changes, use `docs:` or `chore:` instead:
@ -137,11 +137,11 @@ Under projects with configuration as shown below, Corepack will install `v7.5.0`
#### Use ESLint #### Use ESLint
We use [ESLint](https://eslint.org/) for both linting and formatting with [`@nuxt/eslint-config`](https://github.com/nuxt/eslint-config). We use [ESLint](https://eslint.org) for both linting and formatting with [`@nuxt/eslint-config`](https://github.com/nuxt/eslint-config).
##### IDE Setup ##### IDE Setup
We recommend using [VS Code](https://code.visualstudio.com/) along with the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). If you would like, you can enable auto-fix and formatting when you save the code you are editing: We recommend using [VS Code](https://code.visualstudio.com) along with the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint). If you would like, you can enable auto-fix and formatting when you save the code you are editing:
```json [settings.json] ```json [settings.json]
{ {

6
docs/5.community/5.framework-contribution.md
View File

@ -19,7 +19,7 @@ Once you've read the [general contribution guide](/docs/community/contribution),
To contribute to Nuxt, you need to set up a local environment. To contribute to Nuxt, you need to set up a local environment.
1. [Fork](https://help.github.com/articles/fork-a-repo/) the [`nuxt/nuxt`](https://github.com/nuxt/nuxt) repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device. 1. [Fork](https://help.github.com/articles/fork-a-repo) the [`nuxt/nuxt`](https://github.com/nuxt/nuxt) repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository) it to your local device.
2. Ensure using the latest [Node.js](https://nodejs.org/en) (20.x) 2. Ensure using the latest [Node.js](https://nodejs.org/en) (20.x)
3. Enable [Corepack](https://github.com/nodejs/corepack) to have `pnpm` and `yarn` 3. Enable [Corepack](https://github.com/nodejs/corepack) to have `pnpm` and `yarn`
```bash [Terminal] ```bash [Terminal]
@ -123,7 +123,7 @@ We recommend that you install the [MDC extension](https://marketplace.visualstud
### Linting Docs ### Linting Docs
Documentation is linted using [MarkdownLint](https://github.com/DavidAnson/markdownlint/) and [case police](https://github.com/antfu/case-police) to keep the documentation cohesive. Documentation is linted using [MarkdownLint](https://github.com/DavidAnson/markdownlint) and [case police](https://github.com/antfu/case-police) to keep the documentation cohesive.
```bash [Terminal] ```bash [Terminal]
pnpm lint:docs pnpm lint:docs
@ -135,7 +135,7 @@ You can also run `pnpm lint:docs:fix` to highlight and resolve any lint issues.
### Open a PR ### Open a PR
Please make sure your PR title adheres to the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) guidelines. Please make sure your PR title adheres to the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0) guidelines.
```bash [Example of PR title] ```bash [Example of PR title]
docs: update the section about the nuxt.config.ts file docs: update the section about the nuxt.config.ts file

2
docs/5.community/6.roadmap.md
View File

@ -50,7 +50,7 @@ I18n | Active | 2.x and 3.x | [nuxt-modules/i18n](https:
## Release Cycle ## Release Cycle
Since January 2023, we've adopted a consistent release cycle for **Nuxt 3**, following [semver](https://semver.org/). We aim for major framework releases every year, with an expectation of patch releases every week or so and minor releases every month or so. They should never contain breaking changes except within options clearly marked as `experimental`. Since January 2023, we've adopted a consistent release cycle for **Nuxt 3**, following [semver](https://semver.org). We aim for major framework releases every year, with an expectation of patch releases every week or so and minor releases every month or so. They should never contain breaking changes except within options clearly marked as `experimental`.
### Ongoing Support for Nuxt ### Ongoing Support for Nuxt

8
docs/7.migration/10.bundling.md
View File

@ -5,10 +5,10 @@ description: 'Learn how to migrate from Nuxt 2 to Nuxt 3 build tooling.'
We use the following build tools by default: We use the following build tools by default:
- [Vite](https://vitejs.dev/) or [webpack](https://webpack.js.org/) - [Vite](https://vitejs.dev) or [webpack](https://webpack.js.org)
- [Rollup](https://rollupjs.org/) - [Rollup](https://rollupjs.org)
- [PostCSS](https://postcss.org/) - [PostCSS](https://postcss.org)
- [esbuild](https://esbuild.github.io/) - [esbuild](https://esbuild.github.io)
For this reason, most of your previous `build` configuration in `nuxt.config` will now be ignored, including any custom babel configuration. For this reason, most of your previous `build` configuration in `nuxt.config` will now be ignored, including any custom babel configuration.

4
docs/7.migration/2.configuration.md
View File

@ -128,13 +128,13 @@ Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language
There are a number of changes to what is recommended Vue best practice, as well as a number of breaking changes between Vue 2 and 3. There are a number of changes to what is recommended Vue best practice, as well as a number of breaking changes between Vue 2 and 3.
It is recommended to read the [Vue 3 migration guide](https://v3-migration.vuejs.org/) and in particular the [breaking changes list](https://v3-migration.vuejs.org/breaking-changes/). It is recommended to read the [Vue 3 migration guide](https://v3-migration.vuejs.org) and in particular the [breaking changes list](https://v3-migration.vuejs.org/breaking-changes).
It is not currently possible to use the [Vue 3 migration build](https://v3-migration.vuejs.org/migration-build.html) with Nuxt 3. It is not currently possible to use the [Vue 3 migration build](https://v3-migration.vuejs.org/migration-build.html) with Nuxt 3.
## Vuex ## Vuex
Nuxt no longer provides a Vuex integration. Instead, the official Vue recommendation is to use `pinia`, which has built-in Nuxt support via a [Nuxt module](https://pinia.vuejs.org/ssr/nuxt.html). [Find out more about pinia here](https://pinia.vuejs.org/). Nuxt no longer provides a Vuex integration. Instead, the official Vue recommendation is to use `pinia`, which has built-in Nuxt support via a [Nuxt module](https://pinia.vuejs.org/ssr/nuxt.html). [Find out more about pinia here](https://pinia.vuejs.org).
A simple way to provide global state management with pinia would be: A simple way to provide global state management with pinia would be: