mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 07:05:11 +00:00
docs: remove redundant trailing slashes from links (#23744)
This commit is contained in:
Damian Głowala
GitHub
parent
f26a801775
commit
08281866a6
@ -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)
|
||||
::
|
||||
|
||||
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
|
||||
|
||||
@ -84,14 +84,14 @@ Please the options below for the `setup` method.
|
||||
- `build`: Whether to run a separate build step.
|
||||
- Type: `boolean`
|
||||
- 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`
|
||||
- Default: `false`
|
||||
- `browserOptions`
|
||||
- Type: `object` with the following properties
|
||||
- `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).
|
||||
- `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'`
|
||||
- Default: `'vitest'`
|
||||
|
||||
|
||||
@ -21,8 +21,8 @@ Start with one of our starters and themes directly by opening [nuxt.new](https:/
|
||||
<!-- markdownlint-disable-next-line MD001 -->
|
||||
#### Prerequisites
|
||||
|
||||
- **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)
|
||||
- **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)
|
||||
- **Terminal** - In order to run Nuxt commands
|
||||
|
||||
::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
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
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`
|
||||
| [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`
|
||||
| [webpack](https://webpack.js.org/) | ~~`webpack.config.ts`~~ | Use [`webpack`](/docs/api/nuxt-config#webpack-1) key in `nuxt.config`
|
||||
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`
|
||||
| [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`
|
||||
| [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:
|
||||
|
||||
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)
|
||||
| [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)
|
||||
| [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/)
|
||||
| [Vitest](https://vitest.dev) | `vitest.config.ts` | [More Info](https://vitest.dev/config/)
|
||||
| [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)
|
||||
| [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)
|
||||
| [Vitest](https://vitest.dev) | `vitest.config.ts` | [More Info](https://vitest.dev/config)
|
||||
|
||||
## Vue Configuration
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@ For example, referencing an image file in the `public/img/` directory, available
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
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.
|
||||
|
||||
@ -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).
|
||||
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
|
||||
|
||||
@ -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-url](https://github.com/postcss/postcss-url): Transforms `url()` statements
|
||||
- [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
|
||||
|
||||
@ -456,7 +456,7 @@ Use different styles for different layouts.
|
||||
|
||||
## 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.
|
||||
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
|
||||
- [Tailwind CSS](/modules/tailwindcss): Utility-first CSS framework
|
||||
- [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 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
|
||||
|
||||
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
|
||||
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)
|
||||
|
||||
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.
|
||||
You can achieve that with a hook, that you can place in a module, or in your Nuxt configuration file.
|
||||
|
||||
@ -8,7 +8,7 @@ One core feature of Nuxt is the file system router. Every Vue file inside the [`
|
||||
|
||||
## 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:
|
||||
|
||||
|
||||
@ -30,7 +30,7 @@ Shortcuts are available to make configuration easier: `charset` and `viewport`.
|
||||
## `useHead`
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
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]
|
||||
<script setup lang="ts">
|
||||
@ -412,7 +412,7 @@ Remember, this page transition cannot be overridden with `definePageMeta` on ind
|
||||
|
||||
## 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:
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ Nuxt's server framework allows you to build **full-stack applications**. For exa
|
||||
|
||||
## 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:
|
||||
|
||||
@ -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:
|
||||
|
||||
- [Cloudflare Workers](https://workers.cloudflare.com/)
|
||||
- [Netlify Functions](https://www.netlify.com/products/functions/)
|
||||
- [Cloudflare Workers](https://workers.cloudflare.com)
|
||||
- [Netlify Functions](https://www.netlify.com/products/functions)
|
||||
- [Vercel Edge Network](https://vercel.com/docs/edge-network/introduction)
|
||||
- [Lagon](https://lagon.app/)
|
||||
- [Lagon](https://lagon.app)
|
||||
|
||||
Or for other runtimes:
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: Auto-imports
|
||||
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]
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -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.
|
||||
|
||||
::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.
|
||||
@ -31,7 +31,7 @@ Every Vue component created in the [`components/`](/docs/guide/directory-structu
|
||||
|
||||
### 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"}
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
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
|
||||
- [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
|
||||
|
||||
@ -3,7 +3,7 @@ title: Server Engine
|
||||
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:
|
||||
|
||||
|
||||
@ -31,8 +31,8 @@ export { a }
|
||||
```
|
||||
|
||||
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**.
|
||||
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/).
|
||||
[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).
|
||||
|
||||
### What is 'Native' ESM?
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ head.title: "node_modules/"
|
||||
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
|
||||
This directory should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing the dependencies to your repository.
|
||||
|
||||
@ -7,7 +7,7 @@ navigation.icon: i-ph-file-duotone
|
||||
|
||||
## 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]
|
||||
<template>
|
||||
|
||||
@ -5,7 +5,7 @@ description: "In Nuxt 3, your routing is defined by the structure of your files
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ links:
|
||||
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"}
|
||||
|
||||
|
||||
@ -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.
|
||||
::
|
||||
|
||||
@ -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.
|
||||
::
|
||||
|
||||
@ -221,7 +221,7 @@ interface ExtendWebpackConfigOptions {
|
||||
```
|
||||
|
||||
::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
|
||||
|
||||
@ -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.
|
||||
|
||||
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?"
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
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.
|
||||
|
||||
@ -46,7 +46,7 @@ For bigger changes to Nuxt itself, we recommend that you first [create a Nuxt mo
|
||||
|
||||
#### 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:
|
||||
|
||||
@ -137,11 +137,11 @@ Under projects with configuration as shown below, Corepack will install `v7.5.0`
|
||||
|
||||
#### 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
|
||||
|
||||
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]
|
||||
{
|
||||
|
||||
@ -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.
|
||||
|
||||
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)
|
||||
3. Enable [Corepack](https://github.com/nodejs/corepack) to have `pnpm` and `yarn`
|
||||
```bash [Terminal]
|
||||
@ -123,7 +123,7 @@ We recommend that you install the [MDC extension](https://marketplace.visualstud
|
||||
|
||||
### 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]
|
||||
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
|
||||
|
||||
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]
|
||||
docs: update the section about the nuxt.config.ts file
|
||||
|
||||
@ -50,7 +50,7 @@ I18n | Active | 2.x and 3.x | [nuxt-modules/i18n](https:
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
- [Vite](https://vitejs.dev/) or [webpack](https://webpack.js.org/)
|
||||
- [Rollup](https://rollupjs.org/)
|
||||
- [PostCSS](https://postcss.org/)
|
||||
- [esbuild](https://esbuild.github.io/)
|
||||
- [Vite](https://vitejs.dev) or [webpack](https://webpack.js.org)
|
||||
- [Rollup](https://rollupjs.org)
|
||||
- [PostCSS](https://postcss.org)
|
||||
- [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.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
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.
|
||||
|
||||
## 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:
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user