mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 07:05:11 +00:00
docs: rename 3.nuxt.config.md to 3.nuxt-config.md (#23819)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
parent
22f8432089
commit
a548b70342
@ -291,7 +291,7 @@ Nuxt 3 can be deployed to several cloud providers with a minimal amount of confi
|
|||||||
|
|
||||||
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 3 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`](/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:
|
||||||
|
|
||||||
```js [nuxt.config.ts]
|
```js [nuxt.config.ts]
|
||||||
export default {
|
export default {
|
||||||
|
@ -32,7 +32,7 @@ Start with one of our starters and themes directly by opening [nuxt.new](https:/
|
|||||||
- **Nuxtr**: Install the community-developed [Nuxtr extension](https://marketplace.visualstudio.com/items?itemName=Nuxtr.nuxtr-vscode)
|
- **Nuxtr**: Install the community-developed [Nuxtr extension](https://marketplace.visualstudio.com/items?itemName=Nuxtr.nuxtr-vscode)
|
||||||
- **Volar**: Either enable [**Take Over Mode**](https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode) (recommended) or add the [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
|
- **Volar**: Either enable [**Take Over Mode**](https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode) (recommended) or add the [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
|
||||||
|
|
||||||
If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)**, you can disable generating the shim for `*.vue` files in your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file:
|
If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)**, you can disable generating the shim for `*.vue` files in your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file:
|
||||||
|
|
||||||
```ts [nuxt.config.ts]
|
```ts [nuxt.config.ts]
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
|
@ -5,11 +5,11 @@ navigation.icon: i-ph-gear-duotone
|
|||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
By default, Nuxt is configured to cover most use cases. The [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file can override or extend this default configuration.
|
By default, Nuxt is configured to cover most use cases. The [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file can override or extend this default configuration.
|
||||||
|
|
||||||
## Nuxt Configuration
|
## Nuxt Configuration
|
||||||
|
|
||||||
The [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file is located at the root of a Nuxt project and can override or extend the application's behavior.
|
The [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file is located at the root of a Nuxt project and can override or extend the application's behavior.
|
||||||
|
|
||||||
A minimal configuration file exports the `defineNuxtConfig` function containing an object with your configuration. The `defineNuxtConfig` helper is globally available without import.
|
A minimal configuration file exports the `defineNuxtConfig` function containing an object with your configuration. The `defineNuxtConfig` helper is globally available without import.
|
||||||
|
|
||||||
@ -135,7 +135,7 @@ Non primitive JS types | ❌ No | ✅ Yes
|
|||||||
|
|
||||||
## External Configuration Files
|
## External Configuration Files
|
||||||
|
|
||||||
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
|
||||||
|----------------------------------------------|---------------------------|-------------------------
|
|----------------------------------------------|---------------------------|-------------------------
|
||||||
|
@ -19,7 +19,7 @@ export default defineNuxtConfig({
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
Providing an [`app.head`](/docs/api/nuxt-config#head) property in your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) allows you to customize the head for your entire app.
|
Providing an [`app.head`](/docs/api/nuxt-config#head) property in your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) allows you to customize the head for your entire app.
|
||||||
|
|
||||||
::callout
|
::callout
|
||||||
This method does not allow you to provide reactive data. We recommend to use `useHead()` in `app.vue`.
|
This method does not allow you to provide reactive data. We recommend to use `useHead()` in `app.vue`.
|
||||||
|
@ -17,7 +17,7 @@ One of the core features of Nuxt 3 is the layers and extending support. You can
|
|||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
You can extend a layer by adding the [extends](/docs/api/nuxt-config#extends) property to the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file.
|
You can extend a layer by adding the [extends](/docs/api/nuxt-config#extends) property to the [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file.
|
||||||
|
|
||||||
```ts [nuxt.config.ts]
|
```ts [nuxt.config.ts]
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
|
@ -17,7 +17,7 @@ Explore Nuxt Modules
|
|||||||
|
|
||||||
## Add Nuxt Modules
|
## Add Nuxt Modules
|
||||||
|
|
||||||
Once you have installed the modules you can add them to your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file under the `modules` property. Module developers usually provide additional steps and details for usage.
|
Once you have installed the modules you can add them to your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file under the `modules` property. Module developers usually provide additional steps and details for usage.
|
||||||
|
|
||||||
```ts [nuxt.config.ts]
|
```ts [nuxt.config.ts]
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
|
@ -11,7 +11,7 @@ The auto-registered files patterns are:
|
|||||||
- `modules/*/index.ts`
|
- `modules/*/index.ts`
|
||||||
- `modules/*.ts`
|
- `modules/*.ts`
|
||||||
|
|
||||||
You don't need to add those local modules to your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) separately.
|
You don't need to add those local modules to your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) separately.
|
||||||
|
|
||||||
::code-group
|
::code-group
|
||||||
|
|
||||||
|
@ -13,7 +13,6 @@ export default defineNuxtConfig({
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
::callout
|
::callout
|
||||||
`defineNuxtConfig` helper is globally available without import.
|
`defineNuxtConfig` helper is globally available without import.
|
||||||
::
|
::
|
||||||
@ -34,7 +33,6 @@ Discover all the available options in the **Nuxt configuration** documentation.
|
|||||||
|
|
||||||
To ensure your configuration is up to date, Nuxt will make a full restart when detecting changes in the main configuration file, the [`.env`](/docs/guide/directory-structure/env), [`.nuxtignore`](/docs/guide/directory-structure/nuxtignore) and `.nuxtrc` dotfiles.
|
To ensure your configuration is up to date, Nuxt will make a full restart when detecting changes in the main configuration file, the [`.env`](/docs/guide/directory-structure/env), [`.nuxtignore`](/docs/guide/directory-structure/nuxtignore) and `.nuxtrc` dotfiles.
|
||||||
|
|
||||||
|
|
||||||
The `.nuxtrc` file is a file that can be used to configure Nuxt with a fla syntax, it is based on [`unjs/rc9`](https://github.com/unjs/rc9).
|
The `.nuxtrc` file is a file that can be used to configure Nuxt with a fla syntax, it is based on [`unjs/rc9`](https://github.com/unjs/rc9).
|
||||||
|
|
||||||
``` [.nuxtrc]
|
``` [.nuxtrc]
|
@ -5,7 +5,7 @@ description: "Nuxt provides a runtime config API to expose configuration and sec
|
|||||||
|
|
||||||
## Exposing
|
## Exposing
|
||||||
|
|
||||||
To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your `nuxt.config` file, using the [`runtimeConfig`](/docs/guide/directory-structure/nuxt.config#runtimeconfig) option.
|
To expose config and environment variables to the rest of your app, you will need to define runtime configuration in your [`nuxt.config`](/docs/guide/directory-structure/nuxt-config) file, using the [`runtimeConfig`](/docs/api/nuxt-config#runtimeconfig) option.
|
||||||
|
|
||||||
```ts [nuxt.config.ts]
|
```ts [nuxt.config.ts]
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
|
@ -7,7 +7,7 @@ Nuxt layers are a powerful feature that you can use to share and reuse partial N
|
|||||||
|
|
||||||
:read-more{to="/docs/getting-started/layers"}
|
:read-more{to="/docs/getting-started/layers"}
|
||||||
|
|
||||||
A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file to indicate it is a layer.
|
A minimal Nuxt layer directory should contain a [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file to indicate it is a layer.
|
||||||
|
|
||||||
```ts [base/nuxt.config.ts]
|
```ts [base/nuxt.config.ts]
|
||||||
export default defineNuxtConfig({})
|
export default defineNuxtConfig({})
|
||||||
@ -20,7 +20,7 @@ Additionally, certain other files in the layer directory will be auto-scanned an
|
|||||||
- [`pages/*`](/docs/guide/directory-structure/pages) - Extend the default pages
|
- [`pages/*`](/docs/guide/directory-structure/pages) - Extend the default pages
|
||||||
- [`server/*`](/docs/guide/directory-structure/server) - Extend the default server endpoints & middleware
|
- [`server/*`](/docs/guide/directory-structure/server) - Extend the default server endpoints & middleware
|
||||||
- [`utils/*`](/docs/guide/directory-structure/utils) - Extend the default utils
|
- [`utils/*`](/docs/guide/directory-structure/utils) - Extend the default utils
|
||||||
- [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config)- Extend the default nuxt config
|
- [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config)- Extend the default nuxt config
|
||||||
- [`app.config.ts`](/docs/guide/directory-structure/app-config) - Extend the default app config
|
- [`app.config.ts`](/docs/guide/directory-structure/app-config) - Extend the default app config
|
||||||
|
|
||||||
## Basic Example
|
## Basic Example
|
||||||
@ -64,7 +64,7 @@ Additionally, certain other files in the layer directory will be auto-scanned an
|
|||||||
::
|
::
|
||||||
|
|
||||||
::callout
|
::callout
|
||||||
If you're interested in deepening your understanding about layers, consider examining [a fully fleshed out [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file on the [Docus theme](https://github.com/nuxt-themes/docus/blob/main/nuxt.config.ts).
|
If you're interested in deepening your understanding about layers, consider examining [a fully fleshed out [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file on the [Docus theme](https://github.com/nuxt-themes/docus/blob/main/nuxt.config.ts).
|
||||||
::
|
::
|
||||||
|
|
||||||
## Starter Template
|
## Starter Template
|
||||||
|
@ -12,7 +12,7 @@ links:
|
|||||||
npx nuxi typecheck [--log-level] [rootDir]
|
npx nuxi typecheck [--log-level] [rootDir]
|
||||||
```
|
```
|
||||||
|
|
||||||
The `typecheck` command runs [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/vue-tsc) to check types throughout your app.
|
The `typecheck` command runs [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/tsc) to check types throughout your app.
|
||||||
|
|
||||||
Option | Default | Description
|
Option | Default | Description
|
||||||
-------------------------|-----------------|------------------
|
-------------------------|-----------------|------------------
|
||||||
|
@ -64,7 +64,7 @@ npm install -D @nuxt/bridge@npm:@nuxt/bridge-edge
|
|||||||
|
|
||||||
Please make sure to avoid any CommonJS syntax such as `module.exports`, `require` or `require.resolve` in your config file. It will soon be deprecated and unsupported.
|
Please make sure to avoid any CommonJS syntax such as `module.exports`, `require` or `require.resolve` in your config file. It will soon be deprecated and unsupported.
|
||||||
|
|
||||||
You can use static `import`, dynamic `import()` and `export default` instead. Using TypeScript by renaming to [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) is also possible and recommended.
|
You can use static `import`, dynamic `import()` and `export default` instead. Using TypeScript by renaming to [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) is also possible and recommended.
|
||||||
|
|
||||||
```ts [nuxt.config.ts]
|
```ts [nuxt.config.ts]
|
||||||
import { defineNuxtConfig } from '@nuxt/bridge'
|
import { defineNuxtConfig } from '@nuxt/bridge'
|
||||||
|
@ -108,7 +108,7 @@ It will be much easier to migrate your application if you use Nuxt's TypeScript
|
|||||||
You can read more about Nuxt's TypeScript support [in the docs](/docs/guide/concepts/typescript).
|
You can read more about Nuxt's TypeScript support [in the docs](/docs/guide/concepts/typescript).
|
||||||
|
|
||||||
::callout
|
::callout
|
||||||
Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/vue-tsc) with `nuxi typecheck` command.
|
Nuxt can type-check your app using [`vue-tsc`](https://github.com/vuejs/language-tools/tree/master/packages/tsc) with `nuxi typecheck` command.
|
||||||
::
|
::
|
||||||
|
|
||||||
### Migration
|
### Migration
|
||||||
|
@ -69,9 +69,9 @@ export default () => { }
|
|||||||
|
|
||||||
With Nuxt 3, Nuxt is now a build-time-only dependency, which means that modules shouldn't attempt to hook into the Nuxt runtime.
|
With Nuxt 3, Nuxt is now a build-time-only dependency, which means that modules shouldn't attempt to hook into the Nuxt runtime.
|
||||||
|
|
||||||
Your module should work even if it's only added to [`buildModules`](/docs/guide/directory-structure/nuxt.config#buildmodules) (instead of `modules`). For example:
|
Your module should work even if it's only added to [`buildModules`](/docs/api/nuxt-config#runtimeconfig) (instead of `modules`). For example:
|
||||||
|
|
||||||
- Avoid updating `process.env` within a Nuxt module and reading by a Nuxt plugin; use [`runtimeConfig`](/docs/guide/directory-structure/nuxt.config#publicruntimeconfig) instead.
|
- Avoid updating `process.env` within a Nuxt module and reading by a Nuxt plugin; use [`runtimeConfig`](/docs/api/nuxt-config#runtimeconfig) instead.
|
||||||
- (*) Avoid depending on runtime hooks like `vue-renderer:*` for production
|
- (*) Avoid depending on runtime hooks like `vue-renderer:*` for production
|
||||||
- (*) Avoid adding `serverMiddleware` by importing them inside the module. Instead, add them by referencing a file path so that they are independent of the module's context
|
- (*) Avoid adding `serverMiddleware` by importing them inside the module. Instead, add them by referencing a file path so that they are independent of the module's context
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user