mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-25 15:15:19 +00:00
docs: fix more redirect issues (#8045)
This commit is contained in:
parent
a74c40caa6
commit
45fd722dc1
@ -107,4 +107,4 @@ Well done! A browser window should automatically open for <http://localhost:3000
|
|||||||
|
|
||||||
Now that you've created your Nuxt 3 project, you are ready to start building your application.
|
Now that you've created your Nuxt 3 project, you are ready to start building your application.
|
||||||
|
|
||||||
* Learn about the framework [concepts](/guide/concepts)
|
* Learn about the framework [concepts](/guide/concepts/auto-imports)
|
||||||
|
@ -49,7 +49,7 @@ Nuxt won't serve files in the `assets/` directory at a static URL like `/assets/
|
|||||||
|
|
||||||
### Global Styles Imports
|
### Global Styles Imports
|
||||||
|
|
||||||
To globally insert statements in your Nuxt components styles, you can use the [`Vite`](/api/configuration/nuxt.config#vite) option at your [`nuxt.config`](/api/configuration/nuxt.config) file.
|
To globally insert statements in your Nuxt components styles, you can use the [`Vite`](/api/configuration/nuxt-config#vite) option at your [`nuxt.config`](/api/configuration/nuxt-config) file.
|
||||||
|
|
||||||
#### Example
|
#### Example
|
||||||
|
|
||||||
|
@ -7,7 +7,7 @@ description: Nuxt provides good default values for meta tags, but you can overri
|
|||||||
|
|
||||||
Out-of-the-box, Nuxt provides good default values for `charset` and `viewport` meta tags, but you can override these if you need to, as well as customize other meta tags for your site in several different ways.
|
Out-of-the-box, Nuxt provides good default values for `charset` and `viewport` meta tags, but you can override these if you need to, as well as customize other meta tags for your site in several different ways.
|
||||||
|
|
||||||
:ReadMore{link="/api/configuration/nuxt.config#head"}
|
:ReadMore{link="/api/configuration/nuxt-config#head"}
|
||||||
|
|
||||||
## `useHead` Composable
|
## `useHead` Composable
|
||||||
|
|
||||||
|
@ -219,7 +219,7 @@ Using `<script setup lang="ts">` is the recommended way of declaring Vue compone
|
|||||||
|
|
||||||
When we call `fetch` in the browser, user headers like `cookie` will be directly sent to the API. But during server-side-rendering, since the `fetch` request takes place 'internally' within the server, it doesn't include the user's browser cookies, nor does it pass on cookies from the fetch response.
|
When we call `fetch` in the browser, user headers like `cookie` will be directly sent to the API. But during server-side-rendering, since the `fetch` request takes place 'internally' within the server, it doesn't include the user's browser cookies, nor does it pass on cookies from the fetch response.
|
||||||
|
|
||||||
::ReadMore{link="/api/utils/$fetch"}
|
::ReadMore{link="/api/utils/dollarfetch"}
|
||||||
::
|
::
|
||||||
|
|
||||||
### Example: Pass Client Headers to the API
|
### Example: Pass Client Headers to the API
|
||||||
|
@ -10,7 +10,7 @@ Contrary to a classic global declaration, Nuxt preserves typings and IDEs comple
|
|||||||
|
|
||||||
::alert{type=info icon=💡}
|
::alert{type=info icon=💡}
|
||||||
In the documentation, every function that is not explicitly imported is auto-imported by Nuxt and can be used as-is in your code.
|
In the documentation, every function that is not explicitly imported is auto-imported by Nuxt and can be used as-is in your code.
|
||||||
You can find a reference for auto-imported [composables](/api/composables/use-async-data) and [utilities](/api/utils/$fetch) in the API section.
|
You can find a reference for auto-imported [composables](/api/composables/use-async-data) and [utilities](/api/utils/dollarfetch) in the API section.
|
||||||
::
|
::
|
||||||
|
|
||||||
::alert{type=warning}
|
::alert{type=warning}
|
||||||
|
@ -61,7 +61,7 @@ Universal rendering is very versatile and can fit almost any use case, and is es
|
|||||||
|
|
||||||
Client-side and universal rendering are different strategies to display an interface in a browser.
|
Client-side and universal rendering are different strategies to display an interface in a browser.
|
||||||
|
|
||||||
By default, Nuxt uses **universal rendering** to provide better user experience and performance, and to optimize search engine indexing, but you can switch rendering modes in [one line of configuration](/api/configuration/nuxt.config#ssr).
|
By default, Nuxt uses **universal rendering** to provide better user experience and performance, and to optimize search engine indexing, but you can switch rendering modes in [one line of configuration](/api/configuration/nuxt-config#ssr).
|
||||||
|
|
||||||
## Coming in Nuxt 3
|
## Coming in Nuxt 3
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@ description: "Nuxt provides a module system to extend the framework core and sim
|
|||||||
|
|
||||||
# Modules
|
# Modules
|
||||||
|
|
||||||
Nuxt provides a module system to extend the framework core and simplify integrations. You don't need to develop everything from scratch or maintain boilerplate if there is already a Nuxt module for it. Adding Nuxt modules is possible using [`nuxt.config`](/api/configuration/nuxt.config#modules).
|
Nuxt provides a module system to extend the framework core and simplify integrations. You don't need to develop everything from scratch or maintain boilerplate if there is already a Nuxt module for it. Adding Nuxt modules is possible using [`nuxt.config`](/api/configuration/nuxt-config#modules).
|
||||||
|
|
||||||
## Exploring Nuxt Modules
|
## Exploring Nuxt Modules
|
||||||
|
|
||||||
|
@ -8,7 +8,7 @@ Nuxt 3 is fully typed and provides helpful shortcuts to ensure you have access t
|
|||||||
|
|
||||||
## Type-checking
|
## Type-checking
|
||||||
|
|
||||||
By default, Nuxt doesn't check types when you run `nuxi dev` or `nuxi build`, for performance reasons. However, you can enable type-checking at build or development time by installing `vue-tsc` and `typescript` as devDependencies and either enabling [the `typescript.typeCheck` option in your `nuxt.config` file](/api/configuration/nuxt.config#typescript) or [manually checking your types with nuxi](/api/commands/typecheck).
|
By default, Nuxt doesn't check types when you run `nuxi dev` or `nuxi build`, for performance reasons. However, you can enable type-checking at build or development time by installing `vue-tsc` and `typescript` as devDependencies and either enabling [the `typescript.typeCheck` option in your `nuxt.config` file](/api/configuration/nuxt-config#typescript) or [manually checking your types with nuxi](/api/commands/typecheck).
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
yarn nuxi typecheck
|
yarn nuxi typecheck
|
||||||
|
@ -269,7 +269,7 @@ Of course, you are welcome to define metadata for your own use throughout your a
|
|||||||
|
|
||||||
Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](https://vuejs.org/guide/built-ins/keep-alive.html#keepalive) if you set `keepalive: true` in your `definePageMeta`. This might be useful to do, for example, in a parent route that has dynamic child routes, if you want to preserve page state across route changes. You can also set props to be passed to `<KeepAlive>` (see a full list [here](https://vuejs.org/api/built-in-components.html#keepalive)).
|
Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](https://vuejs.org/guide/built-ins/keep-alive.html#keepalive) if you set `keepalive: true` in your `definePageMeta`. This might be useful to do, for example, in a parent route that has dynamic child routes, if you want to preserve page state across route changes. You can also set props to be passed to `<KeepAlive>` (see a full list [here](https://vuejs.org/api/built-in-components.html#keepalive)).
|
||||||
|
|
||||||
You can set a default value for this property [in your `nuxt.config`](/api/configuration/nuxt.config#keepalive).
|
You can set a default value for this property [in your `nuxt.config`](/api/configuration/nuxt-config#keepalive).
|
||||||
|
|
||||||
#### `key`
|
#### `key`
|
||||||
|
|
||||||
@ -287,7 +287,7 @@ You can define middleware to apply before loading this page. It will be merged w
|
|||||||
|
|
||||||
You can define transition properties for the `<transition>` component that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. You can see a list of options that can be passed [here](https://vuejs.org/api/built-in-components.html#transition) or read [more about how transitions work](https://vuejs.org/guide/built-ins/transition.html#transition).
|
You can define transition properties for the `<transition>` component that wraps your pages and layouts, or pass `false` to disable the `<transition>` wrapper for that route. You can see a list of options that can be passed [here](https://vuejs.org/api/built-in-components.html#transition) or read [more about how transitions work](https://vuejs.org/guide/built-ins/transition.html#transition).
|
||||||
|
|
||||||
You can set default values for these properties [in your `nuxt.config`](/api/configuration/nuxt.config#layouttransition).
|
You can set default values for these properties [in your `nuxt.config`](/api/configuration/nuxt-config#layouttransition).
|
||||||
|
|
||||||
#### `alias`
|
#### `alias`
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
# `useFetch`
|
# `useFetch`
|
||||||
|
|
||||||
This composable provides a convenient wrapper around [`useAsyncData`](/api/composables/use-async-data) and [`$fetch`](/api/utils/$fetch).
|
This composable provides a convenient wrapper around [`useAsyncData`](/api/composables/use-async-data) and [`$fetch`](/api/utils/dollarfetch).
|
||||||
|
|
||||||
It automatically generates a key based on URL and fetch options, provides type hints for request url based on server routes, and infers API response type.
|
It automatically generates a key based on URL and fetch options, provides type hints for request url based on server routes, and infers API response type.
|
||||||
|
|
||||||
|
@ -30,7 +30,7 @@ interface MetaObject extends Record<string, any> {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Application-wide configuration of the head metadata is possible through [nuxt.config](/api/configuration/nuxt.config#head), or by placing the `useHead` in the `app.vue` file.
|
Application-wide configuration of the head metadata is possible through [nuxt.config](/api/configuration/nuxt-config#head), or by placing the `useHead` in the `app.vue` file.
|
||||||
|
|
||||||
::alert{type=info}
|
::alert{type=info}
|
||||||
The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `reactive` properties. `meta` parameter can also accept a function returning an object to make the entire object reactive.
|
The properties of `useHead` can be dynamic, accepting `ref`, `computed` and `reactive` properties. `meta` parameter can also accept a function returning an object to make the entire object reactive.
|
||||||
|
@ -8,7 +8,7 @@ description: addRouteMiddleware() is a helper function to dynamically add middle
|
|||||||
`addRouteMiddleware()` is a helper function to dynamically add route middleware in your Nuxt application.
|
`addRouteMiddleware()` is a helper function to dynamically add route middleware in your Nuxt application.
|
||||||
|
|
||||||
::alert{type=info}
|
::alert{type=info}
|
||||||
Route middleware are navigation guards stored in the [`middleware/`](/guide/directory-structure/middleware) directory of your Nuxt application (unless [set otherwise](/api/configuration/nuxt.config#middleware)).
|
Route middleware are navigation guards stored in the [`middleware/`](/guide/directory-structure/middleware) directory of your Nuxt application (unless [set otherwise](/api/configuration/nuxt-config#middleware)).
|
||||||
::
|
::
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
@ -6,7 +6,7 @@ title: "defineNuxtRouteMiddleware"
|
|||||||
|
|
||||||
Create named route middleware using `defineNuxtRouteMiddleware` helper function.
|
Create named route middleware using `defineNuxtRouteMiddleware` helper function.
|
||||||
|
|
||||||
Route middleware are stored in the `middleware/` directory of your Nuxt application (unless [set otherwise](/api/configuration/nuxt.config#middleware)).
|
Route middleware are stored in the `middleware/` directory of your Nuxt application (unless [set otherwise](/api/configuration/nuxt-config#middleware)).
|
||||||
|
|
||||||
## Type
|
## Type
|
||||||
|
|
||||||
|
@ -4,7 +4,7 @@ title: "definePageMeta"
|
|||||||
|
|
||||||
# `definePageMeta`
|
# `definePageMeta`
|
||||||
|
|
||||||
`definePageMeta` is a compiler macro that you can use to set metadata for your **page** components located in the `pages/` directory (unless [set otherwise](https://v3.nuxtjs.org/api/configuration/nuxt.config#pages)). This way you can set custom metadata for each static or dynamic route of your Nuxt application.
|
`definePageMeta` is a compiler macro that you can use to set metadata for your **page** components located in the `pages/` directory (unless [set otherwise](https://v3.nuxtjs.org/api/configuration/nuxt-config#pages)). This way you can set custom metadata for each static or dynamic route of your Nuxt application.
|
||||||
|
|
||||||
```vue [pages/some-page.vue]
|
```vue [pages/some-page.vue]
|
||||||
<script setup>
|
<script setup>
|
||||||
|
@ -17,7 +17,7 @@ await prefetchComponents(['MyGlobalComponent1', 'MyGlobalComponent2'])
|
|||||||
```
|
```
|
||||||
|
|
||||||
::alert{icon=👉}
|
::alert{icon=👉}
|
||||||
Current implementation behaves exactly the same as [`preloadComponents`](/api/composables/preload-components) by preloading components instead of just prefetching we are working to improve this behavior.
|
Current implementation behaves exactly the same as [`preloadComponents`](/api/utils/preload-components) by preloading components instead of just prefetching we are working to improve this behavior.
|
||||||
::
|
::
|
||||||
|
|
||||||
::alert{icon=👉}
|
::alert{icon=👉}
|
||||||
|
@ -18,5 +18,5 @@ Option | Default | Description
|
|||||||
This command sets `process.env.NODE_ENV` to `production`. To override, define `NODE_ENV` in a `.env` file or as a command-line argument.
|
This command sets `process.env.NODE_ENV` to `production`. To override, define `NODE_ENV` in a `.env` file or as a command-line argument.
|
||||||
|
|
||||||
::alert
|
::alert
|
||||||
You can also enable type-checking at build or development time by installing `vue-tsc` and `typescript` as devDependencies and enabling [the `typescript.typeCheck` option in your `nuxt.config` file](/api/configuration/nuxt.config#typescript).
|
You can also enable type-checking at build or development time by installing `vue-tsc` and `typescript` as devDependencies and enabling [the `typescript.typeCheck` option in your `nuxt.config` file](/api/configuration/nuxt-config#typescript).
|
||||||
::
|
::
|
||||||
|
@ -11,7 +11,7 @@ Learn more about [meta tags](/guide/features/head-management#meta-components).
|
|||||||
::ReadMore{link="/api/composables/use-head"}
|
::ReadMore{link="/api/composables/use-head"}
|
||||||
::
|
::
|
||||||
|
|
||||||
::ReadMore{link="/getting-started/head-management"}
|
::ReadMore{link="/getting-started/seo-meta"}
|
||||||
::
|
::
|
||||||
|
|
||||||
::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-head" file="app.vue"}
|
::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-head" file="app.vue"}
|
||||||
|
@ -5,7 +5,7 @@ description: Some specific points about contributions to the nuxt/framework repo
|
|||||||
|
|
||||||
# nuxt/framework
|
# nuxt/framework
|
||||||
|
|
||||||
Once you've read the [general contribution guide](./contribution), here are some specific points to make about contributions to the `nuxt/framework` repository.
|
Once you've read the [general contribution guide](/community/contribution), here are some specific points to make about contributions to the `nuxt/framework` repository.
|
||||||
|
|
||||||
## Using the Playground
|
## Using the Playground
|
||||||
|
|
||||||
@ -25,7 +25,7 @@ You might have noticed already that we use ESLint to enforce a coding standard.
|
|||||||
|
|
||||||
### Documentation
|
### Documentation
|
||||||
|
|
||||||
If you are adding a new feature or refactoring or changing the behavior of Nuxt in any other manner, you'll likely want to document the changes. Please include any changes to the docs in the same PR. You don't have to write documentation up on the first commit (but please do so as soon as your pull request is mature enough). Make sure to make changes according to the [Documentation Guide](./contribution#documentation-guide).
|
If you are adding a new feature or refactoring or changing the behavior of Nuxt in any other manner, you'll likely want to document the changes. Please include any changes to the docs in the same PR. You don't have to write documentation up on the first commit (but please do so as soon as your pull request is mature enough). Make sure to make changes according to the [Documentation Guide](/community/contribution#documentation-guide).
|
||||||
|
|
||||||
### Final Checklist
|
### Final Checklist
|
||||||
|
|
||||||
|
@ -7,7 +7,7 @@ If you're starting a fresh Nuxt 3 project, please skip this section and go to [N
|
|||||||
::
|
::
|
||||||
|
|
||||||
::alert{type=warning}
|
::alert{type=warning}
|
||||||
Nuxt Bridge provides identical features to Nuxt 3 ([docs](/guide)) but there are some limitations, notably that `useAsyncData` and `useFetch` composables are not available. Please read the rest of this page for details.
|
Nuxt Bridge provides identical features to Nuxt 3 ([docs](/guide/concepts/auto-imports)) but there are some limitations, notably that `useAsyncData` and `useFetch` composables are not available. Please read the rest of this page for details.
|
||||||
::
|
::
|
||||||
|
|
||||||
Bridge is a forward-compatibility layer that allows you to experience many of the new Nuxt 3 features by simply installing and enabling a Nuxt module.
|
Bridge is a forward-compatibility layer that allows you to experience many of the new Nuxt 3 features by simply installing and enabling a Nuxt module.
|
||||||
@ -255,7 +255,7 @@ export default defineNuxtConfig({
|
|||||||
This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
|
This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`.
|
||||||
Accordingly, we recommend not to use both the native Nuxt 2 `head()` properties as well as `useHead`, as they may conflict.
|
Accordingly, we recommend not to use both the native Nuxt 2 `head()` properties as well as `useHead`, as they may conflict.
|
||||||
|
|
||||||
For more information on how to use this composable, see [the docs](/getting-started/head-management).
|
For more information on how to use this composable, see [the docs](/getting-started/seo-meta).
|
||||||
|
|
||||||
## Feature Flags
|
## Feature Flags
|
||||||
|
|
||||||
|
@ -270,4 +270,4 @@ export default defineNuxtConfig({
|
|||||||
|
|
||||||
This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`. Accordingly, it is recommended not to use both the native Nuxt 2 `head()` properties as well as `useHead`, as they may conflict.
|
This `useHead` composable uses `@vueuse/head` under the hood (rather than `vue-meta`) to manipulate your `<head>`. Accordingly, it is recommended not to use both the native Nuxt 2 `head()` properties as well as `useHead`, as they may conflict.
|
||||||
|
|
||||||
For more information on how to use this composable, see [the Nuxt 3 docs](/getting-started/head-management).
|
For more information on how to use this composable, see [the Nuxt 3 docs](/getting-started/seo-meta).
|
||||||
|
@ -21,5 +21,5 @@ Some of these significant changes include:
|
|||||||
1. Moving from a runtime Nuxt dependency to a minimal, standalone server compiled with nitropack.
|
1. Moving from a runtime Nuxt dependency to a minimal, standalone server compiled with nitropack.
|
||||||
|
|
||||||
::alert{type=info}
|
::alert{type=info}
|
||||||
If you need to remain on Nuxt 2, but want to benefit from Nuxt 3 features in Nuxt 2, you can alternatively check out [how to get started with Bridge](/bridge).
|
If you need to remain on Nuxt 2, but want to benefit from Nuxt 3 features in Nuxt 2, you can alternatively check out [how to get started with Bridge](/bridge/overview).
|
||||||
::
|
::
|
||||||
|
@ -3,8 +3,8 @@
|
|||||||
Nuxt 3 provides several different ways to manage your meta tags.
|
Nuxt 3 provides several different ways to manage your meta tags.
|
||||||
|
|
||||||
1. Through your `nuxt.config`.
|
1. Through your `nuxt.config`.
|
||||||
2. Through the `useHead` [composable](/getting-started/head-management)
|
2. Through the `useHead` [composable](/getting-started/seo-meta)
|
||||||
3. Through [global meta components](/getting-started/head-management)
|
3. Through [global meta components](/getting-started/seo-meta)
|
||||||
|
|
||||||
You can customize `title`, `titleTemplate`, `base`, `script`, `noscript`, `style`, `meta`, `link`, `htmlAttrs` and `bodyAttrs`.
|
You can customize `title`, `titleTemplate`, `base`, `script`, `noscript`, `style`, `meta`, `link`, `htmlAttrs` and `bodyAttrs`.
|
||||||
|
|
||||||
@ -12,7 +12,7 @@ You can customize `title`, `titleTemplate`, `base`, `script`, `noscript`, `style
|
|||||||
Nuxt currently uses [`vueuse/head`](https://github.com/vueuse/head) to manage your meta tags, but implementation details may change.
|
Nuxt currently uses [`vueuse/head`](https://github.com/vueuse/head) to manage your meta tags, but implementation details may change.
|
||||||
::
|
::
|
||||||
|
|
||||||
[Read more about meta tags](/getting-started/head-management).
|
[Read more about meta tags](/getting-started/seo-meta).
|
||||||
|
|
||||||
## Migration
|
## Migration
|
||||||
|
|
||||||
|
@ -3,6 +3,11 @@
|
|||||||
/getting-started/bridge /bridge 302!
|
/getting-started/bridge /bridge 302!
|
||||||
/getting-started/bridge-composition-api /bridge/bridge-composition-api 302!
|
/getting-started/bridge-composition-api /bridge/bridge-composition-api 302!
|
||||||
|
|
||||||
|
/contribution /community/contribution 302!
|
||||||
|
/bridge /bridge/overview 302!
|
||||||
|
/guide /guide/concepts/auto-imports 302!
|
||||||
|
/guide/concepts /guide/concepts/auto-imports 302!
|
||||||
|
|
||||||
# Concepts
|
# Concepts
|
||||||
/concepts/introduction /getting-started/introduction 302!
|
/concepts/introduction /getting-started/introduction 302!
|
||||||
/concepts/vuejs-development /guide/concepts/vuejs-development 302!
|
/concepts/vuejs-development /guide/concepts/vuejs-development 302!
|
||||||
@ -50,6 +55,8 @@
|
|||||||
/guide/features/app-config /guide/directory-structure/app.config 302!
|
/guide/features/app-config /guide/directory-structure/app.config 302!
|
||||||
/guide/features/runtime-config /guide/going-further/runtime-config 302!
|
/guide/features/runtime-config /guide/going-further/runtime-config 302!
|
||||||
/guide/features/teleports /api/components/teleports 302!
|
/guide/features/teleports /api/components/teleports 302!
|
||||||
|
/api/utils/$fetch /api/utils/dollarfetch 302!
|
||||||
|
/api/composables/preload-components /api/utils/preload-components 302
|
||||||
# https://github.com/nuxt/framework/pull/8038
|
# https://github.com/nuxt/framework/pull/8038
|
||||||
/api/configuration/nuxt.config /api/configuration/nuxt-config 302!
|
/api/configuration/nuxt.config /api/configuration/nuxt-config 302!
|
||||||
|
|
||||||
|
@ -18,7 +18,7 @@ const errorsToIgnore = [
|
|||||||
'/guide/directory-structure/nuxt.config',
|
'/guide/directory-structure/nuxt.config',
|
||||||
'/guide/directory-structure',
|
'/guide/directory-structure',
|
||||||
'/guide/directory-structure/app.config',
|
'/guide/directory-structure/app.config',
|
||||||
'/api/configuration/nuxt.config',
|
'/api/configuration/nuxt-config',
|
||||||
'/guide/deploy',
|
'/guide/deploy',
|
||||||
'/guide/features/app-config'
|
'/guide/features/app-config'
|
||||||
]
|
]
|
||||||
|
Loading…
Reference in New Issue
Block a user