mirror of https://github.com/nuxt/nuxt.git
docs: new website design (#9007)
* docs: implement new website theme * chore: rename dirs * chore: update build * lint fix * chore: update deps * fix: include node_modules in esbuild step * chore: update deps * Update .gitignore * chore: update theme version * up * up * fix: use svg for illustration * chore: update to 0.0.12 * chore: force parse5 resolution * stay with build * feat: always display first home section * Update yarn.lock * chore: update theme * fix lint * docs: update home title * chore: update website theme version * Update docs/content/0.index.md Co-authored-by: pooya parsa <pyapar@gmail.com> * Update docs/content/0.index.md Co-authored-by: pooya parsa <pyapar@gmail.com> * up * chore: bump theme version * up * chore: up * up up and up * chore: generate * fix: boolean value * feat: new images * update again * chore: up * ouep * chore: up Co-authored-by: Daniel Roe <daniel@roe.dev> Co-authored-by: Clément Ollivier <clement.o2p@gmail.com> Co-authored-by: pooya parsa <pyapar@gmail.com>
This commit is contained in:
Sébastien Chopin
GitHub
parent
d6bfa216ae
commit
90784f79d7
|
|
@ -1,2 +1,4 @@
|
|||
# Local version of the website theme
|
||||
WEBSITE_THEME=/my/path/to/website-theme
|
||||
|
||||
OPEN_COLLECTIVE_API_KEY=
|
||||
|
|
|
|||
|
|
@ -6,3 +6,4 @@ static/sw.js
|
|||
.yarn/*
|
||||
!.yarn/releases
|
||||
!yarn.lock
|
||||
.vercel
|
||||
|
|
|
|||
|
|
@ -0,0 +1,337 @@
|
|||
---
|
||||
title: 'The Intuitive Web Framework'
|
||||
description: 'Build your next Vue.js application with confidence using Nuxt. An open source framework under MIT license that makes web development simple and powerful.'
|
||||
showcasesListId: 505
|
||||
---
|
||||
|
||||
::home-hero
|
||||
---
|
||||
primaryButtonText: 'Get started'
|
||||
primaryButtonLink: '/docs/getting-started/introduction'
|
||||
secondaryButtonText: 'Open on Github'
|
||||
secondaryButtonLink: 'https://github.com/nuxt/framework'
|
||||
---
|
||||
|
||||
#title
|
||||
The Intuitive Web Framework
|
||||
|
||||
#titleAnimationWord
|
||||
today.
|
||||
|
||||
#description
|
||||
Build your next Vue.js application with confidence using Nuxt. An open source framework under MIT license that makes web development simple and powerful.
|
||||
::
|
||||
|
||||
|
||||
::home-section{visible}
|
||||
#title
|
||||
Deliver an optimized [User Experience]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
|
||||
#description
|
||||
How a user interacts with and experiences your website will determine your impact. Utility, ease of use, and efficiency are key. **Nuxt is built with a set of features that make this possible.**
|
||||
#extra
|
||||
::home-card-list
|
||||
:::home-card-item
|
||||
---
|
||||
image:
|
||||
light: 'ux-fast-light.svg'
|
||||
dark: 'ux-fast.svg'
|
||||
---
|
||||
#title
|
||||
Fast and Furious
|
||||
#description
|
||||
Optimized with code-splitting, tree-shaking, optimized cold-start, link prefetching, payload extraction, just to name a few. Fast by default so you can focus on building.
|
||||
:::
|
||||
:::home-card-item
|
||||
---
|
||||
image:
|
||||
light: 'ux-hybrid-light.svg'
|
||||
dark: 'ux-hybrid.svg'
|
||||
---
|
||||
#title
|
||||
On-demand Rendering
|
||||
#description
|
||||
Decide what rendering strategy at the route level: SSR, SSG, CSR, ISR, ESR, SWR.
|
||||
Build any kind of website or web application with optimized performance in mind.
|
||||
:::
|
||||
:::home-card-item
|
||||
---
|
||||
image:
|
||||
light: 'ux-seo-light.svg'
|
||||
dark: 'ux-seo.svg'
|
||||
---
|
||||
#title
|
||||
SEO & Web Vitals
|
||||
#description
|
||||
By leveraging server-side rendering, ESM format and optimized images, Nuxt websites are indexable by search engines while giving the feeling of an app to the end-users.
|
||||
:::
|
||||
::
|
||||
::
|
||||
|
||||
::home-section
|
||||
---
|
||||
to: "/showcase"
|
||||
titleSizeClass: 'text-2xl font-semibold md:text-3xl lg:text-4xl'
|
||||
---
|
||||
#title
|
||||
Trusted by world-class companies
|
||||
#description
|
||||
Explore our selection of websites & applications made with Nuxt. F-500 companies, creative agencies and freelancers all trust us.
|
||||
#link
|
||||
Discover our showcase
|
||||
#extra
|
||||
:::home-companies-carousel
|
||||
:::
|
||||
::
|
||||
|
||||
::home-section
|
||||
#title
|
||||
Discover a new [Developer Experience]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
|
||||
#description
|
||||
Developers deserve solutions as well designed as non-technical people. Our focus is to empower Vue developers to ship great softwares with confidence.
|
||||
#extra
|
||||
::home-dx-section
|
||||
---
|
||||
buttonLink: "/docs/getting-started/installation"
|
||||
---
|
||||
::home-card-list
|
||||
:::home-card-item
|
||||
---
|
||||
image:
|
||||
light: 'dx-plug-and-play-light.svg'
|
||||
dark: 'dx-plug-and-play.svg'
|
||||
---
|
||||
#title
|
||||
Plug & Play
|
||||
#description
|
||||
Unlock features by creating folders and files with the [most intuitive directory structure]{.font-semibold} made for developers and teams.
|
||||
:::
|
||||
:::home-card-item
|
||||
---
|
||||
image:
|
||||
light: 'dx-effortless-light.svg'
|
||||
dark: dx-effortless.svg
|
||||
---
|
||||
#title
|
||||
Automation
|
||||
#description
|
||||
Repetitive tasks are [automated]{.font-semibold}: auto-imports, code-splitting, typings, minification, bundling for production. and more.
|
||||
:::
|
||||
:::home-card-item
|
||||
---
|
||||
image:
|
||||
light: 'dx-batteries-light.svg'
|
||||
dark: 'dx-batteries.svg'
|
||||
---
|
||||
#title
|
||||
Batteries Included
|
||||
#description
|
||||
Data fetching, state management, meta tags helpers, route guards, cookies, error handling, bundle analyzer and more.
|
||||
:::
|
||||
::
|
||||
::
|
||||
::
|
||||
|
||||
::home-section
|
||||
---
|
||||
titleSizeClass: 'text-2xl font-semibold md:text-3xl lg:text-4xl'
|
||||
---
|
||||
#title
|
||||
Trusted by the world wide web
|
||||
#description
|
||||
Their opinions are valuable and worth sharing to everyone.
|
||||
#extra
|
||||
:::home-testimonials-list
|
||||
#items
|
||||
::::home-testimonials-item
|
||||
---
|
||||
authorImg: evan
|
||||
authorUrl: 'https://twitter.com/youyuxi'
|
||||
---
|
||||
#author
|
||||
Evan You
|
||||
#job
|
||||
Creator of VueJS
|
||||
#quote
|
||||
Nuxt offers a compelling solution and a great ecosystem to help you ship fullstack Vue apps that are performant and SEO friendly. The flexibility to choose between SSR and SSG is icing on the cake.
|
||||
::::
|
||||
|
||||
::::home-testimonials-item
|
||||
---
|
||||
authorImg: sarah
|
||||
authorUrl: 'https://twitter.com/sarah_edo'
|
||||
---
|
||||
#author
|
||||
Sarah Drasner
|
||||
#job
|
||||
Core Team of Vue.js
|
||||
#quote
|
||||
Nuxt has outstanding developer productivity, experience, and performance right out of the gate!
|
||||
There’s so much attention to detail, ensuring teams have everything at their fingertips to productively build all manners of applications.
|
||||
::::
|
||||
|
||||
::::home-testimonials-item
|
||||
---
|
||||
authorImg: addy
|
||||
authorUrl: 'https://twitter.com/addyosmani'
|
||||
---
|
||||
#author
|
||||
Addy Osmani
|
||||
#job
|
||||
Chief Engineer of Chrome
|
||||
#quote
|
||||
Nuxt is a fantastic choice for teams building a production-grade product on the web. It aims to bake in performance best-practices while maintaining excellent Vue.js DX.
|
||||
::::
|
||||
:::
|
||||
::
|
||||
|
||||
::home-section
|
||||
#title
|
||||
Ship faster with [Nuxt modules]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
|
||||
#description
|
||||
Nuxt is made with a robust plugin system. Integrate with popular CMS or UI librairies with one line of code. With more than 15M monthly downloads and 1K contributors, Nuxt modules are you day to day companions.
|
||||
#link
|
||||
Explore Nuxt modules
|
||||
#extra
|
||||
::home-modules-list
|
||||
::
|
||||
::
|
||||
|
||||
::home-section
|
||||
#title
|
||||
A community of [Web builders]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-300}
|
||||
#description
|
||||
Nuxt is composed of web builders all over the world who like to craft beautiful user experiences with Vue.js.
|
||||
#extra
|
||||
::home-card-list
|
||||
---
|
||||
gridClass: 'lg:grid-cols-4'
|
||||
---
|
||||
:::home-card-item
|
||||
---
|
||||
icon: 'fa-brands:npm'
|
||||
to: 'https://www.npmjs.com/package/nuxt'
|
||||
---
|
||||
#title
|
||||
56M
|
||||
#description
|
||||
npm downloads
|
||||
:::
|
||||
:::home-card-item
|
||||
---
|
||||
icon: 'fa-brands:discord'
|
||||
to: 'https://discord.com/invite/ps2h6QT'
|
||||
---
|
||||
#title
|
||||
20k
|
||||
#description
|
||||
Discord members
|
||||
:::
|
||||
:::home-card-item
|
||||
---
|
||||
icon: 'fa-brands:github'
|
||||
to: 'https://github.com/nuxt'
|
||||
---
|
||||
#title
|
||||
55k
|
||||
#description
|
||||
GitHub stars
|
||||
:::
|
||||
:::home-card-item
|
||||
---
|
||||
icon: 'fa-brands:twitter'
|
||||
to: 'https://twitter.com/nuxt_js'
|
||||
---
|
||||
#title
|
||||
76k
|
||||
#description
|
||||
Twitter followers
|
||||
:::
|
||||
::
|
||||
::
|
||||
|
||||
::home-section
|
||||
#title
|
||||
A solution to cover [all your needs]{.text-transparent .bg-clip-text .bg-gradient-to-r .from-green-400 .to-teal-400}
|
||||
#description
|
||||
Developers deserve solutions as well designed as non-technical people. Our focus is to empower Vue developers to ship great softwares with confidence.
|
||||
#extra
|
||||
::home-needs-section
|
||||
---
|
||||
buttonLink: "/support/solutions"
|
||||
---
|
||||
#cards
|
||||
:::home-card-list
|
||||
:::home-card-item
|
||||
---
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: 'needs-official-agency-light.svg'
|
||||
dark: 'needs-official-agency.svg'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/support/agencies'
|
||||
---
|
||||
#title
|
||||
Official agency partners
|
||||
#description
|
||||
A careful network of trusted agencies from all over the world!
|
||||
:::
|
||||
:::home-card-item
|
||||
---
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
image:
|
||||
light: 'needs-nuxt-expert-light.svg'
|
||||
dark: 'needs-nuxt-expert.svg'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
contentClass: 'gap-y-2'
|
||||
to: '/support/solutions'
|
||||
---
|
||||
#title
|
||||
Nuxt experts network
|
||||
#description
|
||||
A network of freelance from all over the world, certified by the NuxtLabs team !
|
||||
:::
|
||||
:::home-card-item
|
||||
---
|
||||
headerClass: 'justify-start px-4 pt-4 sm:px-6'
|
||||
contentClass: 'gap-y-2'
|
||||
image:
|
||||
light: 'needs-community-support-light.svg'
|
||||
dark: 'needs-community-support.svg'
|
||||
imageHeight: '58'
|
||||
imageWidth: '52'
|
||||
to: '/support/solutions'
|
||||
---
|
||||
#title
|
||||
Community support
|
||||
#description
|
||||
More than 2000 active contributors on multiple platforms are here to help !
|
||||
:::
|
||||
:::
|
||||
::
|
||||
::
|
||||
|
||||
::home-journey-section
|
||||
#content
|
||||
:::home-section
|
||||
---
|
||||
buttons:
|
||||
- label: 'Get started'
|
||||
size: 'xl'
|
||||
variant: 'primary-gradient'
|
||||
to: '/docs/getting-started/introduction'
|
||||
- label: 'Explore Examples'
|
||||
size: 'xl'
|
||||
variant: 'secondary'
|
||||
to: '/docs/examples/essentials/hello-world'
|
||||
---
|
||||
#sectionTitle
|
||||
GETTING STARTED
|
||||
#title
|
||||
Start your Nuxt Journey
|
||||
#description
|
||||
Learn everything you need to know, from beginner to master.
|
||||
:::
|
||||
::
|
||||
|
|
@ -26,7 +26,7 @@ Nuxt takes care of this and provides both frontend and backend functionality so
|
|||
|
||||
### View engine
|
||||
|
||||
Nuxt uses Vue.js as a view engine. All Vue 3 capabilities are available in Nuxt. You can read about the details of the Vue integration with Nuxt in the [Key Concepts section](/guide/concepts/vuejs-development).
|
||||
Nuxt uses Vue.js as a view engine. All Vue 3 capabilities are available in Nuxt. You can read about the details of the Vue integration with Nuxt in the [Key Concepts section](/docs/guide/concepts/vuejs-development).
|
||||
|
||||
### Automation and conventions
|
||||
|
||||
|
|
@ -36,12 +36,12 @@ Nuxt uses conventions and an opinionated directory structure to automate repetit
|
|||
- Auto-imports
|
||||
- File-system routing and API layer
|
||||
- Data-fetching utilities
|
||||
- Zero-config Typescript support
|
||||
- Zero-config TypeScript support
|
||||
- Configured build tools
|
||||
::
|
||||
|
||||
::alert{type="info"}
|
||||
Discover more in the [Key concepts section](/guide/concepts/auto-imports).
|
||||
Discover more in the [Key concepts section](/docs/guide/concepts/auto-imports).
|
||||
::
|
||||
|
||||
### Rendering modes
|
||||
|
|
@ -56,7 +56,7 @@ Nuxt offers different rendering modes to accommodate various use-cases:
|
|||
::
|
||||
|
||||
::alert{type="info"}
|
||||
Read more about [Nuxt rendering modes](/guide/concepts/rendering).
|
||||
Read more about [Nuxt rendering modes](/docs/guide/concepts/rendering).
|
||||
::
|
||||
|
||||
### Server engine
|
||||
|
|
@ -68,7 +68,7 @@ In development, it uses Rollup and Node.js workers for your server code and cont
|
|||
In production, Nitro builds your app and server into one universal `.output` directory. This output is light: minified and removed from any Node.js modules (except polyfills). You can deploy this output on any system supporting JavaScript, from Node.js, Serverless, Workers, Edge-side rendering or purely static.
|
||||
|
||||
::alert{type="info"}
|
||||
Read more about [Nuxt server engine](/guide/concepts/server-engine).
|
||||
Read more about [Nuxt server engine](/docs/guide/concepts/server-engine).
|
||||
::
|
||||
|
||||
### Production-ready
|
||||
|
|
@ -76,7 +76,7 @@ Read more about [Nuxt server engine](/guide/concepts/server-engine).
|
|||
A Nuxt application can be deployed on a Node or Deno server, pre-rendered to be hosted in static environments, or deployed to serverless and edge providers.
|
||||
|
||||
::alert{type="info"}
|
||||
Discover more in the [deployment section](/getting-started/deployment).
|
||||
Discover more in the [deployment section](/docs/getting-started/deployment).
|
||||
::
|
||||
|
||||
### Modular
|
||||
|
|
@ -84,7 +84,7 @@ Discover more in the [deployment section](/getting-started/deployment).
|
|||
A module system allows to extend Nuxt with custom features and integrations with third-party services.
|
||||
|
||||
::alert{type="info"}
|
||||
Discover more about [modules](/guide/concepts/modules).
|
||||
Discover more about [modules](/docs/guide/concepts/modules).
|
||||
::
|
||||
|
||||
### Architecture
|
||||
|
|
@ -109,9 +109,9 @@ Nuxt is the backbone of your Vue.js project, giving structure to build your proj
|
|||
Extendable with a strong module ecosystem and hooks engine, it makes it easy to connect your REST or GraphQL endpoints, favorite CMS, CSS frameworks and more. PWA and AMP support is only a module away from your Nuxt project.
|
||||
|
||||
::alert{type=info icon=👍}
|
||||
Ready to try? Head over to the [Installation section](/getting-started/installation).
|
||||
Ready to try? Head over to the [Installation section](/docs/getting-started/installation).
|
||||
::
|
||||
|
||||
### Contribute
|
||||
|
||||
Do you want to get involved in the evolution of Nuxt? [Follow the contribution guide 👉](/community/contribution)
|
||||
Do you want to get involved in the evolution of Nuxt? [Follow the contribution guide 👉](/docs/community/contribution)
|
||||
|
|
@ -81,7 +81,7 @@ There are two ways to deploy a Nuxt application to any static hosting services:
|
|||
|
||||
### Crawl-based Pre-rendering
|
||||
|
||||
Use the [`nuxi generate` command](/api/commands/generate) to build your application. For every page, Nuxt uses a crawler to generate a corresponding HTML and payload files. The built files will be generated in the `.output/public` directory.
|
||||
Use the [`nuxi generate` command](/docs/api/commands/generate) to build your application. For every page, Nuxt uses a crawler to generate a corresponding HTML and payload files. The built files will be generated in the `.output/public` directory.
|
||||
|
||||
```bash
|
||||
npx nuxi generate
|
||||
|
|
@ -89,7 +89,7 @@ npx nuxi generate
|
|||
|
||||
### Manual Pre-rendering
|
||||
|
||||
You can manually specify routes that [Nitro](/guide/concepts/server-engine) will fetch and pre-render during the build.
|
||||
You can manually specify routes that [Nitro](/docs/guide/concepts/server-engine) will fetch and pre-render during the build.
|
||||
|
||||
```ts [nuxt.config.ts|js]
|
||||
defineNuxtConfig({
|
||||
|
|
@ -115,7 +115,7 @@ defineNuxtConfig({
|
|||
|
||||
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`](/guide/directory-structure/nuxt.config) file:
|
||||
You can explicitly set the desired preset in the [`nuxt.config`](/docs/guide/directory-structure/nuxt.config) file:
|
||||
|
||||
```js [nuxt.config.js|ts]
|
||||
export default {
|
||||
|
|
@ -25,7 +25,7 @@ Options API | ✅ | ✅ | ✅
|
|||
Components Auto Import | ✅ | ✅ | ✅
|
||||
`<script setup>` syntax | ❌ | 🚧 Partial | ✅
|
||||
Auto Imports | ❌ | ✅ | ✅
|
||||
Webpack | 4 | 4 | 5
|
||||
webpack | 4 | 4 | 5
|
||||
Vite | ⚠️ Partial | 🚧 Partial | ✅
|
||||
Nuxi CLI | ❌ Old | ✅ nuxi | ✅ nuxi
|
||||
Static sites | ✅ | ✅ | ✅
|
||||
|
|
@ -50,7 +50,7 @@ If you prefer to progressively migrate your Nuxt 2 application to Nuxt 3, you ca
|
|||
|
||||
### Latest release
|
||||
|
||||
To upgrade Nuxt 3 to the [latest release](/community/changelog), use the `nuxi upgrade` command.
|
||||
To upgrade Nuxt 3 to the [latest release](/docs/community/changelog), use the `nuxi upgrade` command.
|
||||
|
||||
```bash
|
||||
npx nuxi upgrade
|
||||
|
|
@ -59,5 +59,5 @@ npx nuxi upgrade
|
|||
### Edge release channel
|
||||
|
||||
::alert{type=info icon=👉}
|
||||
To use the latest Nuxt 3 build and test features before their release, read the [edge release channel](/guide/going-further/edge-channel) guide.
|
||||
To use the latest Nuxt 3 build and test features before their release, read the [edge release channel](/docs/guide/going-further/edge-channel) guide.
|
||||
::
|
||||
|
|
@ -111,4 +111,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.
|
||||
|
||||
* Learn about the framework [concepts](/guide/concepts/auto-imports)
|
||||
* Learn about the framework [concepts](/docs/guide/concepts/auto-imports)
|
||||
|
|
@ -5,7 +5,7 @@ description: Nuxt is configured with sensible defaults. The config file can over
|
|||
|
||||
# Configuration
|
||||
|
||||
By default, Nuxt is configured to cover most use cases. The [`nuxt.config.ts`](/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
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ export default defineNuxtConfig({
|
|||
This file will often be mentioned in the documentation, for example to add custom scripts, register modules or change rendering modes.
|
||||
|
||||
::alert{type=info}
|
||||
Every configuration option is described in the [Configuration Reference](/api/configuration/nuxt-config).
|
||||
Every configuration option is described in the [Configuration Reference](/docs/api/configuration/nuxt-config).
|
||||
::
|
||||
|
||||
::alert{type=info}
|
||||
|
|
@ -57,7 +57,7 @@ NUXT_API_SECRET=api_secret_token
|
|||
|
||||
::
|
||||
|
||||
These variables are exposed to the rest of your application using the [`useRuntimeConfig`](/api/composables/use-runtime-config) composable.
|
||||
These variables are exposed to the rest of your application using the [`useRuntimeConfig`](/docs/api/composables/use-runtime-config) composable.
|
||||
|
||||
```vue [pages/index.vue]
|
||||
<script setup>
|
||||
|
|
@ -85,7 +85,7 @@ export default defineAppConfig({
|
|||
})
|
||||
```
|
||||
|
||||
These variables are exposed to the rest of your application using the [`useAppConfig`](/api/composables/use-app-config) composable.
|
||||
These variables are exposed to the rest of your application using the [`useAppConfig`](/docs/api/composables/use-app-config) composable.
|
||||
|
||||
```vue [pages/index.vue]
|
||||
<script setup>
|
||||
|
|
@ -8,7 +8,7 @@ Nuxt provides several component layers to implement the user interface of your a
|
|||
|
||||
## `app.vue`
|
||||
|
||||
|
||||
|
||||
|
||||
By default, Nuxt will treat this file as the **entrypoint** and render its content for every route of the application.
|
||||
|
||||
|
|
@ -26,7 +26,7 @@ If you are familiar with Vue, you might wonder where `main.js` is (the file that
|
|||
|
||||
## Components
|
||||
|
||||
|
||||
|
||||
|
||||
Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the `components/` directory, and they will be automatically available across your application without having to explicitly import them.
|
||||
|
||||
|
|
@ -55,7 +55,7 @@ Most components are reusable pieces of the user interface, like buttons and menu
|
|||
|
||||
## Pages
|
||||
|
||||
|
||||
|
||||
|
||||
Pages represent views use for each specific route pattern. Every file in the `pages/` directory represents a different route displaying its content.
|
||||
|
||||
|
|
@ -85,17 +85,17 @@ To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to
|
|||
::
|
||||
|
||||
::alert
|
||||
You will learn more about pages in the [Routing section](/getting-started/routing)
|
||||
You will learn more about pages in the [Routing section](/docs/getting-started/routing)
|
||||
::
|
||||
|
||||
## Layouts
|
||||
|
||||
|
||||
|
||||
|
||||
Layouts are wrappers around pages that contain a common User Interface for several pages, such as a header and footer display. Layouts are Vue files using `<slot />` components to display the **page** content. The `layouts/default.vue` file will be used by default. Custom layouts can be set as part of your page metadata.
|
||||
|
||||
::alert
|
||||
If you only have a single layout in your application, we recommend using app.vue with the [`<NuxtPage />` component](/api/components/nuxt-page) instead.
|
||||
If you only have a single layout in your application, we recommend using app.vue with the [`<NuxtPage />` component](/docs/api/components/nuxt-page) instead.
|
||||
::
|
||||
|
||||
::code-group
|
||||
|
|
@ -131,4 +131,4 @@ If you only have a single layout in your application, we recommend using app.vue
|
|||
|
||||
::
|
||||
|
||||
If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](/guide/directory-structure/layouts).
|
||||
If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](/docs/guide/directory-structure/layouts).
|
||||
|
|
@ -6,12 +6,12 @@ navigation.icon: uil:image
|
|||
|
||||
Nuxt uses two directories to handle assets like stylesheets, fonts or images.
|
||||
|
||||
- The [`public/` directory](/guide/directory-structure/public) content is served at the server root as-is.
|
||||
- The [`assets/` directory](/guide/directory-structure/assets) contains by convention every asset that you want the build tool (Vite or Webpack) to process.
|
||||
- The [`public/` directory](/docs/guide/directory-structure/public) content is served at the server root as-is.
|
||||
- The [`assets/` directory](/docs/guide/directory-structure/assets) contains by convention every asset that you want the build tool (Vite or webpack) to process.
|
||||
|
||||
## `public/` Directory
|
||||
|
||||
The [`public/` directory](/guide/directory-structure/public) is used as a public server for static assets publicly available at a defined URL of your application.
|
||||
The [`public/` directory](/docs/guide/directory-structure/public) is used as a public server for static assets publicly available at a defined URL of your application.
|
||||
|
||||
You can get a file in the `public/` directory from your application's code or from a browser by the root URL `/`.
|
||||
|
||||
|
|
@ -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) 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) 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/` directory to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it.
|
||||
|
||||
|
|
@ -49,11 +49,11 @@ Nuxt won't serve files in the `assets/` directory at a static URL like `/assets/
|
|||
|
||||
### 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`](/docs/api/configuration/nuxt-config#vite) option at your [`nuxt.config`](/docs/api/configuration/nuxt-config) file.
|
||||
|
||||
#### Example
|
||||
|
||||
In this example, there is a [sass partial](https://sass-lang.com/documentation/at-rules/use#partials) file containing color variables to be used by your Nuxt [pages](/guide/directory-structure/pages) and [components](/guide/directory-structure/components)
|
||||
In this example, there is a [sass partial](https://sass-lang.com/documentation/at-rules/use#partials) file containing color variables to be used by your Nuxt [pages](/docs/guide/directory-structure/pages) and [components](/docs/guide/directory-structure/components)
|
||||
|
||||
::code-group
|
||||
|
||||
|
|
@ -8,7 +8,7 @@ One core feature of Nuxt is the file system router. Every Vue file inside the `p
|
|||
|
||||
## Pages
|
||||
|
||||
Nuxt routing is based on [vue-router](https://router.vuejs.org/) and generates the routes from every component created in the [`pages/`](/guide/directory-structure/pages) directory, 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/`](/docs/guide/directory-structure/pages) directory, based on their filename.
|
||||
|
||||
This file system routing uses naming conventions to create dynamic and nested routes:
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ When a `<NuxtLink>` enters the viewport on the client side, Nuxt will automatica
|
|||
</template>
|
||||
```
|
||||
|
||||
:ReadMore{link="/api/components/nuxt-link"}
|
||||
:ReadMore{link="/docs/api/components/nuxt-link"}
|
||||
|
||||
## Route Parameters
|
||||
|
||||
|
|
@ -73,7 +73,7 @@ console.log(route.params.id)
|
|||
</script>
|
||||
```
|
||||
|
||||
:ReadMore{link="/api/composables/use-route"}
|
||||
:ReadMore{link="/docs/api/composables/use-route"}
|
||||
|
||||
## Route Middleware
|
||||
|
||||
|
|
@ -120,7 +120,7 @@ definePageMeta({
|
|||
|
||||
## Route Validation
|
||||
|
||||
Nuxt offers route validation via the `validate` property in [`definePageMeta`](/api/utils/define-page-meta) in each page you wish to validate.
|
||||
Nuxt offers route validation via the `validate` property in [`definePageMeta`](/docs/api/utils/define-page-meta) in each page you wish to validate.
|
||||
|
||||
The `validate` property accepts the `route` as an argument. You can return a boolean value to determine whether or not this is a valid route to be rendered with this page. If you return `false`, and another match can't be found, this will cause a 404 error. You can also directly return an object with `statusCode`/`statusMessage` to respond immediately with an error (other matches will not be checked).
|
||||
|
||||
|
|
@ -9,7 +9,7 @@ Improve your Nuxt app's SEO with powerful head config, composables and component
|
|||
|
||||
## App Head
|
||||
|
||||
Providing an [app.head](/api/configuration/nuxt-config#head) property in your `nuxt.config.ts` allows you to customize the head for your entire app.
|
||||
Providing an [app.head](/docs/api/configuration/nuxt-config#head) property in your `nuxt.config.ts` allows you to customize the head for your entire app.
|
||||
|
||||
::alert{type=info}
|
||||
This method does not allow you to provide reactive data, if you need global reactive data you can use `useHead` in `app.vue`.
|
||||
|
|
@ -42,7 +42,7 @@ export default defineNuxtConfig({
|
|||
})
|
||||
```
|
||||
|
||||
:ReadMore{link="/api/configuration/nuxt-config/#head"}
|
||||
:ReadMore{link="/docs/api/configuration/nuxt-config/#head"}
|
||||
|
||||
## Composable: `useHead`
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ useHead({
|
|||
</script>
|
||||
```
|
||||
|
||||
::ReadMore{link="/api/composables/use-head"}
|
||||
::ReadMore{link="/docs/api/composables/use-head"}
|
||||
::
|
||||
|
||||
## Components
|
||||
|
|
@ -227,7 +227,7 @@ useHead({
|
|||
</script>
|
||||
```
|
||||
|
||||
::LinkExample{link="/examples/composables/use-head"}
|
||||
::LinkExample{link="/docs/examples/composables/use-head"}
|
||||
::
|
||||
|
||||
:ReadMore{link="/guide/directory-structure/pages/#page-metadata"}
|
||||
|
|
@ -9,7 +9,7 @@ Nuxt leverages Vue's [`<Transition>`](https://vuejs.org/guide/built-ins/transiti
|
|||
|
||||
## Page transitions
|
||||
|
||||
You can enable page transitions to apply an automatic transition for all your [pages](/guide/directory-structure/pages).
|
||||
You can enable page transitions to apply an automatic transition for all your [pages](/docs/guide/directory-structure/pages).
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
|
|
@ -19,7 +19,7 @@ export default defineNuxtConfig({
|
|||
})
|
||||
```
|
||||
|
||||
To start adding transition between your pages, add the following CSS to your [`app.vue`](/guide/directory-structure/app):
|
||||
To start adding transition between your pages, add the following CSS to your [`app.vue`](/docs/guide/directory-structure/app):
|
||||
|
||||
::code-group
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ This produces the following result when navigating between pages:
|
|||
<source src="https://res.cloudinary.com/nuxt/video/upload/v1665061349/nuxt3/nuxt3-page-transitions_umwvmh.mp4" type="video/mp4">
|
||||
</video>
|
||||
|
||||
To set a different transition for a page, set the `pageTransition` key in [`definePageMeta`](/api/utils/define-page-meta) of the page:
|
||||
To set a different transition for a page, set the `pageTransition` key in [`definePageMeta`](/docs/api/utils/define-page-meta) of the page:
|
||||
|
||||
::code-group
|
||||
|
||||
|
|
@ -110,7 +110,7 @@ Moving to the about page will add the 3d rotation effect:
|
|||
|
||||
## Layout transitions
|
||||
|
||||
You can enable layout transitions to apply an automatic transition for all your [layouts](/guide/directory-structure/layouts).
|
||||
You can enable layout transitions to apply an automatic transition for all your [layouts](/docs/guide/directory-structure/layouts).
|
||||
|
||||
```ts [nuxt.config.ts]
|
||||
export default defineNuxtConfig({
|
||||
|
|
@ -120,7 +120,7 @@ export default defineNuxtConfig({
|
|||
})
|
||||
```
|
||||
|
||||
To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/guide/directory-structure/app):
|
||||
To start adding transition between your pages and layouts, add the following CSS to your [`app.vue`](/docs/guide/directory-structure/app):
|
||||
|
||||
::code-group
|
||||
|
||||
|
|
@ -310,7 +310,7 @@ Learn more about additional [JavaScript hooks](https://vuejs.org/guide/built-ins
|
|||
|
||||
## Dynamic Transitions
|
||||
|
||||
To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/guide/directory-structure/middleware) to assign a different transition name to `to.meta.pageTransition`.
|
||||
To apply dynamic transitions using conditional logic, you can leverage inline [middleware](/docs/guide/directory-structure/middleware) to assign a different transition name to `to.meta.pageTransition`.
|
||||
|
||||
::code-group
|
||||
|
||||
|
|
@ -17,7 +17,7 @@ Within your pages, components and plugins you can use `useFetch` to universally
|
|||
|
||||
This composable provides a convenient wrapper around `useAsyncData` and `$fetch`. 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.
|
||||
|
||||
::ReadMore{link="/api/composables/use-fetch"}
|
||||
::ReadMore{link="/docs/api/composables/use-fetch"}
|
||||
::
|
||||
|
||||
### Example
|
||||
|
|
@ -32,14 +32,14 @@ const { data: count } = await useFetch('/api/count')
|
|||
</template>
|
||||
```
|
||||
|
||||
::LinkExample{link="/examples/composables/use-fetch"}
|
||||
::LinkExample{link="/docs/examples/composables/use-fetch"}
|
||||
::
|
||||
|
||||
## `useLazyFetch`
|
||||
|
||||
This composable behaves identically to `useFetch` with the `lazy: true` option set. In other words, the async function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
|
||||
|
||||
::ReadMore{link="/api/composables/use-lazy-fetch"}
|
||||
::ReadMore{link="/docs/api/composables/use-lazy-fetch"}
|
||||
::
|
||||
|
||||
### Example
|
||||
|
|
@ -76,7 +76,7 @@ You might be asking yourself: what is the difference between `useFetch` and `use
|
|||
In brief, `useFetch` receives a URL and gets that data, whereas `useAsyncData` might have more complex logic. `useFetch(url)` is nearly equivalent to `useAsyncData(url, () => $fetch(url))` - it's developer experience sugar for the most common use case.
|
||||
::
|
||||
|
||||
::ReadMore{link="/api/composables/use-async-data"}
|
||||
::ReadMore{link="/docs/api/composables/use-async-data"}
|
||||
::
|
||||
|
||||
### Example
|
||||
|
|
@ -99,14 +99,14 @@ const { data } = await useAsyncData('count', () => $fetch('/api/count'))
|
|||
</template>
|
||||
```
|
||||
|
||||
::LinkExample{link="/examples/composables/use-async-data"}
|
||||
::LinkExample{link="/docs/examples/composables/use-async-data"}
|
||||
::
|
||||
|
||||
## `useLazyAsyncData`
|
||||
|
||||
This composable behaves identically to `useAsyncData` with the `lazy: true` option set. In other words, the async function does not block navigation. That means you will need to handle the situation where the data is `null` (or whatever value you have provided in a custom `default` factory function).
|
||||
|
||||
::ReadMore{link="/api/composables/use-lazy-async-data"}
|
||||
::ReadMore{link="/docs/api/composables/use-lazy-async-data"}
|
||||
::
|
||||
|
||||
### Example
|
||||
|
|
@ -166,7 +166,7 @@ Invalidate the cache of `useAsyncData`, `useLazyAsyncData`, `useFetch` and `useL
|
|||
|
||||
This method is useful if you want to refresh all the data fetching for a current page.
|
||||
|
||||
::ReadMore{link="/api/utils/refresh-nuxt-data"}
|
||||
::ReadMore{link="/docs/api/utils/refresh-nuxt-data"}
|
||||
::
|
||||
|
||||
#### Example
|
||||
|
|
@ -192,7 +192,7 @@ Delete cached data, error status and pending promises of `useAsyncData` and `use
|
|||
|
||||
This method is useful if you want to invalidate the data fetching for another page.
|
||||
|
||||
::ReadMore{link="/api/utils/clear-nuxt-data"}
|
||||
::ReadMore{link="/docs/api/utils/clear-nuxt-data"}
|
||||
::
|
||||
|
||||
## Options API support
|
||||
|
|
@ -220,19 +220,19 @@ Options API support for `asyncData` may well change before the stable release of
|
|||
Using `<script setup lang="ts">` is the recommended way of declaring Vue components in Nuxt 3.
|
||||
::
|
||||
|
||||
::ReadMore{link="/api/utils/define-nuxt-component"}
|
||||
::ReadMore{link="/docs/api/utils/define-nuxt-component"}
|
||||
::
|
||||
|
||||
## Isomorphic `fetch` and `$fetch`
|
||||
|
||||
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/dollarfetch"}
|
||||
::ReadMore{link="/docs/api/utils/dollarfetch"}
|
||||
::
|
||||
|
||||
### Example: Pass Client Headers to the API
|
||||
|
||||
We can use [`useRequestHeaders`](/api/composables/use-request-headers) to access and proxy cookies to the API from server-side.
|
||||
We can use [`useRequestHeaders`](/docs/api/composables/use-request-headers) to access and proxy cookies to the API from server-side.
|
||||
|
||||
The example below adds the request headers to an isomorphic `$fetch` call to ensure that the API endpoint has access to the same `cookie` header originally sent by the user.
|
||||
|
||||
|
|
@ -9,7 +9,7 @@ Nuxt provides useState composable to create a reactive and SSR-friendly shared s
|
|||
|
||||
`useState` is an SSR-friendly [`ref`](https://vuejs.org/api/reactivity-core.html#ref) replacement. Its value will be preserved after server-side rendering (during client-side hydration) and shared across all components using a unique key.
|
||||
|
||||
::ReadMore{link="/api/composables/use-state"}
|
||||
::ReadMore{link="/docs/api/composables/use-state"}
|
||||
::
|
||||
|
||||
::alert{icon=👉}
|
||||
|
|
@ -53,22 +53,22 @@ const counter = useState('counter', () => Math.round(Math.random() * 1000))
|
|||
</template>
|
||||
```
|
||||
|
||||
::LinkExample{link="/examples/composables/use-state"}
|
||||
::LinkExample{link="/docs/examples/composables/use-state"}
|
||||
::
|
||||
|
||||
::ReadMore{link="/api/composables/use-state"}
|
||||
::ReadMore{link="/docs/api/composables/use-state"}
|
||||
::
|
||||
|
||||
### Advanced
|
||||
|
||||
In this example, we use a composable that detects the user's default locale from the HTTP request headers and keeps it in a `locale` state.
|
||||
|
||||
::LinkExample{link="/examples/other/locale"}
|
||||
::LinkExample{link="/docs/examples/other/locale"}
|
||||
::
|
||||
|
||||
## Shared State
|
||||
|
||||
By using [auto-imported composables](/guide/directory-structure/composables) we can define global type-safe states and import them across the app.
|
||||
By using [auto-imported composables](/docs/guide/directory-structure/composables) we can define global type-safe states and import them across the app.
|
||||
|
||||
```ts [composables/states.ts]
|
||||
export const useCounter = () => useState<number>('counter', () => 0)
|
||||
|
|
@ -83,7 +83,7 @@ const handleError = () => clearError({ redirect: '/' })
|
|||
|
||||
This function will return the global Nuxt error that is being handled.
|
||||
|
||||
::ReadMore{link="/api/composables/use-error"}
|
||||
::ReadMore{link="/docs/api/composables/use-error"}
|
||||
::
|
||||
|
||||
### `createError`
|
||||
|
|
@ -117,7 +117,7 @@ You can call this function at any point on client-side, or (on server side) dire
|
|||
|
||||
It is recommended instead to use `throw createError()`.
|
||||
|
||||
::ReadMore{link="/api/utils/show-error"}
|
||||
::ReadMore{link="/docs/api/utils/show-error"}
|
||||
::
|
||||
|
||||
### `clearError`
|
||||
|
|
@ -126,7 +126,7 @@ It is recommended instead to use `throw createError()`.
|
|||
|
||||
This function will clear the currently handled Nuxt error. It also takes an optional path to redirect to (for example, if you want to navigate to a 'safe' page).
|
||||
|
||||
::ReadMore{link="/api/utils/clear-error"}
|
||||
::ReadMore{link="/docs/api/utils/clear-error"}
|
||||
::
|
||||
|
||||
## Rendering Errors Within Your App
|
||||
|
|
@ -158,5 +158,5 @@ If you navigate to another route, the error will be cleared automatically.
|
|||
</template>
|
||||
```
|
||||
|
||||
::LinkExample{link="/examples/app/error-handling"}
|
||||
::LinkExample{link="/docs/examples/app/error-handling"}
|
||||
::
|
||||
|
|
@ -8,7 +8,7 @@ How to test your Nuxt application.
|
|||
|
||||
::alert{icon=👉}
|
||||
Test utils are still in development and the API and behavior may change. Currently, it is in preview stage but not yet ready for testing production apps.
|
||||
If you are a module author, you can find more specific informations in the [Module Author's guide](/guide/going-further/modules#testing)
|
||||
If you are a module author, you can find more specific informations in the [Module Author's guide](/docs/guide/going-further/modules#testing)
|
||||
::
|
||||
|
||||
In Nuxt 3, we have a rewritten version of `@nuxt/test-utils` available as `@nuxt/test-utils-edge`. We support [Vitest](https://github.com/vitest-dev/vitest) and [Jest](https://jestjs.io/) as the test runner.
|
||||
|
|
@ -93,7 +93,7 @@ Whether to run a separate build step.
|
|||
|
||||
#### `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. (More info can be found [here](/guide/going-further/testing).)
|
||||
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. (More info can be found [here](/docs/guide/going-further/testing).)
|
||||
|
||||
* Type: `boolean`
|
||||
* Default: `false`
|
||||
|
|
@ -10,16 +10,16 @@ Contrary to a classic global declaration, Nuxt preserves typings and IDEs comple
|
|||
|
||||
::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.
|
||||
You can find a reference for auto-imported [composables](/api/composables/use-async-data) and [utilities](/api/utils/dollarfetch) in the API section.
|
||||
You can find a reference for auto-imported [composables](/docs/api/composables/use-async-data) and [utilities](/docs/api/utils/dollarfetch) in the API section.
|
||||
::
|
||||
|
||||
::alert{type=warning}
|
||||
Auto imports don't currently work within the [server directory](/guide/directory-structure/server).
|
||||
Auto imports don't currently work within the [server directory](/docs/guide/directory-structure/server).
|
||||
::
|
||||
|
||||
## Nuxt Auto-imports
|
||||
|
||||
Nuxt auto-imports functions and composables to perform [data fetching](/getting-started/data-fetching), get access to the [app context](/api/composables/use-nuxt-app) and [runtime config](/guide/going-further/runtime-config), manage [state](/getting-started/state-management) or define components and plugins.
|
||||
Nuxt auto-imports functions and composables to perform [data fetching](/docs/getting-started/data-fetching), get access to the [app context](/docs/api/composables/use-nuxt-app) and [runtime config](/docs/guide/going-further/runtime-config), manage [state](/docs/getting-started/state-management) or define components and plugins.
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
|
|
@ -44,8 +44,8 @@ Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hoo
|
|||
|
||||
Nuxt directly auto-imports files created in defined directories:
|
||||
|
||||
- `components/` for [Vue components](/guide/directory-structure/components).
|
||||
- `composables/` for [Vue composables](/guide/directory-structure/composables).
|
||||
- `components/` for [Vue components](/docs/guide/directory-structure/components).
|
||||
- `composables/` for [Vue composables](/docs/guide/directory-structure/composables).
|
||||
|
||||
## Explicit Imports
|
||||
|
||||
|
|
@ -23,11 +23,11 @@ Nuxt has always used Vue as a frontend framework. We chose to build Nuxt on top
|
|||
|
||||
### Components Auto-imports
|
||||
|
||||
Every Vue component created in the [`components/` directory](/guide/directory-structure/components) of a Nuxt project will be available in your project without having to import it. If a component is not used anywhere, your production’s code will not include it.
|
||||
Every Vue component created in the [`components/` directory](/docs/guide/directory-structure/components) of a Nuxt project will be available in your project without having to import it. If a component is not used anywhere, your production’s code will not include it.
|
||||
|
||||
### Vue Router
|
||||
|
||||
Most applications need multiple pages and a way to navigate between them. This is called **routing**. Nuxt uses a [`pages/` directory](/guide/directory-structure/pages) 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/` directory](/docs/guide/directory-structure/pages) and naming conventions to directly create routes mapped to your files using the official [Vue Router library](https://router.vuejs.org/).
|
||||
|
||||
### Example
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ Try to replace the `<template>`’s content with a custom welcome message. The b
|
|||
|
||||
**If you were a previous user of Nuxt 2 or Vue 2, keep reading to get a feel of the differences between Vue 2 and Vue 3, and how Nuxt integrates those evolutions.**
|
||||
|
||||
**Otherwise, go to the next chapter to discover another key feature of Nuxt: [Rendering modes](/guide/concepts/rendering)**.
|
||||
**Otherwise, go to the next chapter to discover another key feature of Nuxt: [Rendering modes](/docs/guide/concepts/rendering)**.
|
||||
|
||||
## Differences with Nuxt 2 / Vue 2
|
||||
|
||||
|
|
@ -102,7 +102,7 @@ Used with the `setup` keyword in the `<script>` definition, here is the above co
|
|||
|
||||
The goal of Nuxt 3 is to provide a great developer experience around the Composition API.
|
||||
|
||||
- Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt 3 [built-in composables](/api/composables/use-async-data).
|
||||
- Use auto-imported [Reactivity functions](https://vuejs.org/api/reactivity-core.html) from Vue and Nuxt 3 [built-in composables](/docs/api/composables/use-async-data).
|
||||
- Write your own auto-imported reusable functions in the `composables/` directory.
|
||||
|
||||
### TypeScript Support
|
||||
|
|
@ -110,5 +110,5 @@ The goal of Nuxt 3 is to provide a great developer experience around the Composi
|
|||
Both Vue 3 and Nuxt 3 are written in TypeScript. A fully typed codebase prevents mistakes and documents APIs usage. This doesn’t mean that you have to write your application in TypeScript to take advantage of it. With Nuxt 3, you can opt-in by renaming your file from `.js` to `.ts` , or add `<script lang="ts">` in a component.
|
||||
|
||||
::alert{type="info"}
|
||||
🔎 [Read the details about Typescript in Nuxt 3](/guide/concepts/typescript)
|
||||
🔎 [Read the details about TypeScript in Nuxt 3](/docs/guide/concepts/typescript)
|
||||
::
|
||||
|
|
@ -10,8 +10,8 @@ Both the browser and server can interpret JavaScript code to render Vue.js compo
|
|||
|
||||
Out of the box, a traditional Vue.js application is rendered in the browser (or **client**). Then, Vue.js generates HTML elements after the browser downloads and parses all the JavaScript code containing the instructions to create the current interface.
|
||||
|
||||
{.light-img}
|
||||
{.dark-img}
|
||||
{.light-img}
|
||||
{.dark-img}
|
||||
|
||||
While this technique allows building complex and dynamic UIs with smooth page transitions, it has different pros and cons:
|
||||
|
||||
|
|
@ -40,8 +40,8 @@ Making a static page interactive in the browser is called "Hydration."
|
|||
|
||||
Universal rendering allows a Nuxt application to provide quick page load times while preserving the benefits of client-side rendering. Furthermore, as the content is already present in the HTML document, crawlers can index it without overhead.
|
||||
|
||||
{.light-img}
|
||||
{.dark-img}
|
||||
{.light-img}
|
||||
{.dark-img}
|
||||
|
||||
### Pros
|
||||
|
||||
|
|
@ -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.
|
||||
|
||||
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](/docs/api/configuration/nuxt-config#ssr).
|
||||
|
||||
## Coming in Nuxt 3
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ Hybrid rendering allows different caching rules per route using **Route Rules**
|
|||
|
||||
Traditionally, server-side and universal rendering was only possible using Node.js. Nuxt 3 takes it to another level by directly rendering code in CDN edge workers, reducing latency and costs.
|
||||
|
||||
Nitro is the new [server engine](/guide/concepts/server-engine) that powers Nuxt 3. It offers cross-platform support for Node.js, Deno, Workers, and more. Nitro's design is platform-agnostic and allows rendering a Nuxt application at the edge, closer to your users, allowing replication and further optimizations.
|
||||
Nitro is the new [server engine](/docs/guide/concepts/server-engine) that powers Nuxt 3. It offers cross-platform support for Node.js, Deno, Workers, and more. Nitro's design is platform-agnostic and allows rendering a Nuxt application at the edge, closer to your users, allowing replication and further optimizations.
|
||||
|
||||
### Route Rules
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ Nuxt 3 is powered by a new server engine, [Nitro](https://nitro.unjs.io/).
|
|||
|
||||
## API Layer
|
||||
|
||||
Server [API endpoints](/guide/directory-structure/server#api-routes) and [Middleware](/guide/directory-structure/server#server-middleware) are added by Nitro that internally uses [h3](https://github.com/unjs/h3).
|
||||
Server [API endpoints](/docs/guide/directory-structure/server#api-routes) and [Middleware](/docs/guide/directory-structure/server#server-middleware) are added by Nitro that internally uses [h3](https://github.com/unjs/h3).
|
||||
|
||||
Key features include:
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ Key features include:
|
|||
Check out [the h3 docs](https://github.com/unjs/h3) for more information.
|
||||
|
||||
::alert{type="info" icon=ℹ️}
|
||||
Learn more about the API layer in the [`server/`](/guide/directory-structure/server) directory.
|
||||
Learn more about the API layer in the [`server/`](/docs/guide/directory-structure/server) directory.
|
||||
::
|
||||
|
||||
## Direct API Calls
|
||||
|
|
@ -51,7 +51,7 @@ Nitro produces a standalone server dist that is independent of `node_modules`.
|
|||
|
||||
The server in Nuxt 2 is not standalone and requires part of Nuxt core to be involved by running `nuxt start` (with the [`nuxt-start`](https://www.npmjs.com/package/nuxt-start) or [`nuxt`](https://www.npmjs.com/package/nuxt) distributions) or custom programmatic usage, which is fragile and prone to breakage and not suitable for serverless and service-worker environments.
|
||||
|
||||
Nuxt 3 generates this dist when running `nuxt build` into a [`.output`](/guide/directory-structure/output) directory.
|
||||
Nuxt 3 generates this dist when running `nuxt build` into a [`.output`](/docs/guide/directory-structure/output) directory.
|
||||
|
||||
The output contains runtime code to run your Nuxt server in any environment (including experimental browser service workers!) and serve your static files, making it a true hybrid framework for the JAMstack. In addition, Nuxt implements a native storage layer, supporting multi-source drivers and local assets.
|
||||
|
||||
|
|
@ -4,7 +4,7 @@ description: "Nuxt provides a module system to extend the framework core and sim
|
|||
|
||||
# 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`](/docs/api/configuration/nuxt-config#modules).
|
||||
|
||||
## Exploring Nuxt Modules
|
||||
|
||||
|
|
@ -14,7 +14,7 @@ This is one of the reasons why Nuxt provides a module system that makes it possi
|
|||
|
||||
Best of all, Nuxt modules can be distributed in npm packages. This makes it possible for them to be reused across projects and shared with the community, helping create an ecosystem of high-quality add-ons.
|
||||
|
||||
::ReadMore{link="https://modules.nuxtjs.org/?version=3.x" title="Nuxt 3 Compatible Modules"}
|
||||
::ReadMore{link="/modules" title="Nuxt 3 Compatible Modules"}
|
||||
::
|
||||
|
||||
## The `modules` Property
|
||||
|
|
@ -45,7 +45,7 @@ Nuxt modules are now build-time-only, and the `buildModules` property used in Nu
|
|||
|
||||
## Module Development
|
||||
|
||||
Everyone has the opportunity to develop modules. Read more about developing modules in the [Module Author Guide](/guide/going-further/modules).
|
||||
Everyone has the opportunity to develop modules. Read more about developing modules in the [Module Author Guide](/docs/guide/going-further/modules).
|
||||
|
||||
::ReadMore{link="/guide/going-further/modules" title="Module Author Guide"}
|
||||
::
|
||||
|
|
@ -158,7 +158,7 @@ const pkg = require('cjs-pkg')
|
|||
console.log(pkg) // { test: 123 }
|
||||
```
|
||||
|
||||
[Node.js in native ESM mode](https://nodejs.org/api/esm.html#interoperability-with-commonjs), [typescript with `esModuleInterop` enabled](https://www.typescriptlang.org/tsconfig#esModuleInterop) and bundlers such as Webpack, provide a compatibility mechanism so that we can default import such library.
|
||||
[Node.js in native ESM mode](https://nodejs.org/api/esm.html#interoperability-with-commonjs), [typescript with `esModuleInterop` enabled](https://www.typescriptlang.org/tsconfig#esModuleInterop) and bundlers such as webpack, provide a compatibility mechanism so that we can default import such library.
|
||||
This mechanism is often referred to as "interop require default":
|
||||
|
||||
```js
|
||||
|
|
@ -8,7 +8,7 @@ Nuxt 3 is fully typed and provides helpful shortcuts to ensure you have access t
|
|||
|
||||
## 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](/docs/api/configuration/nuxt-config#typescript) or [manually checking your types with nuxi](/docs/api/commands/typecheck).
|
||||
|
||||
```bash
|
||||
yarn nuxi typecheck
|
||||
|
|
@ -28,10 +28,10 @@ Some of the references in the file are to files that are only generated within y
|
|||
|
||||
This file contains the recommended basic TypeScript configuration for your project, including resolved aliases injected by Nuxt or modules you are using, so you can get full type support and path auto-complete for aliases like `~/file` or `#build/file`.
|
||||
|
||||
[Read more about how to extend this configuration](/guide/directory-structure/tsconfig).
|
||||
[Read more about how to extend this configuration](/docs/guide/directory-structure/tsconfig).
|
||||
|
||||
::alert{icon=👉}
|
||||
Nitro also [auto-generates types](/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/guide/directory-structure/composables), plus other core functionality.
|
||||
Nitro also [auto-generates types](/docs/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/guide/directory-structure/composables), plus other core functionality.
|
||||
::
|
||||
|
||||
::alert
|
||||
|
|
@ -13,4 +13,4 @@ Nuxt creates the `.output/` directory when building your application for product
|
|||
You should not touch any files inside since the whole directory will be re-created when running `nuxt build`.
|
||||
::
|
||||
|
||||
Use this directory to deploy your Nuxt application to production. Learn more in our [deployment section](/guide/deploy).
|
||||
Use this directory to deploy your Nuxt application to production. Learn more in our [deployment section](/docs/guide/deploy).
|
||||
|
|
@ -13,8 +13,8 @@ The directory usually contains the following types of files:
|
|||
|
||||
- Stylesheets (CSS, SASS, etc.)
|
||||
- Fonts
|
||||
- Images that won't be served from the [`public/`](/guide/directory-structure/public) directory.
|
||||
- Images that won't be served from the [`public/`](/docs/guide/directory-structure/public) directory.
|
||||
|
||||
If you want to serve assets from the server, we recommend taking a look at the [`public/`](/guide/directory-structure/public) directory.
|
||||
If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/guide/directory-structure/public) directory.
|
||||
|
||||
::ReadMore{link="/getting-started/assets"}
|
||||
::ReadMore{link="/docs/getting-started/assets"}
|
||||
|
|
@ -301,5 +301,5 @@ export default {
|
|||
|
||||
It will automatically import the components only if used and also support HMR when updating your components in `node_modules/awesome-ui/components/`.
|
||||
|
||||
::LinkExample{link="/examples/auto-imports/components"}
|
||||
::LinkExample{link="/docs/examples/auto-imports/components"}
|
||||
::
|
||||
|
|
@ -7,7 +7,7 @@ description: Use the composables/ directory to auto-import your Vue composables
|
|||
|
||||
# Composables Directory
|
||||
|
||||
Nuxt 3 uses the `composables/` directory to automatically import your Vue composables into your application using [auto-imports](/guide/concepts/auto-imports)!
|
||||
Nuxt 3 uses the `composables/` directory to automatically import your Vue composables into your application using [auto-imports](/docs/guide/concepts/auto-imports)!
|
||||
|
||||
Under the hood, Nuxt auto generates the file `.nuxt/imports.d.ts` to declare the types.
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ const foo = useFoo()
|
|||
</script>
|
||||
```
|
||||
|
||||
::LinkExample{link="/examples/auto-imports/composables"}
|
||||
::LinkExample{link="/docs/examples/auto-imports/composables"}
|
||||
::
|
||||
|
||||
## Examples
|
||||
|
|
@ -64,7 +64,7 @@ export const useFoo = () => {
|
|||
|
||||
### Access plugin injections
|
||||
|
||||
You can access [plugin injections](/guide/directory-structure/plugins#automatically-providing-helpers) from composables:
|
||||
You can access [plugin injections](/docs/guide/directory-structure/plugins#automatically-providing-helpers) from composables:
|
||||
|
||||
```js [composables/test.ts]
|
||||
export const useHello = () => {
|
||||
|
|
@ -65,7 +65,7 @@ The module automatically loads and parses them.
|
|||
|
||||
### Render Pages
|
||||
|
||||
To render content pages, add a [catch-all route](/guide/directory-structure/pages/#catch-all-route) using the `ContentDoc` component:
|
||||
To render content pages, add a [catch-all route](/docs/guide/directory-structure/pages/#catch-all-route) using the `ContentDoc` component:
|
||||
|
||||
```vue [pages/[...slug].vue]
|
||||
<template>
|
||||
|
|
@ -11,7 +11,7 @@ Nuxt provides a customizable layouts framework you can use throughout your appli
|
|||
|
||||
Layouts are placed in the `layouts/` directory and will be automatically loaded via asynchronous import when used. Layouts are used by adding `<NuxtLayout>` to your `app.vue`, and either setting a `layout` property as part of your page metadata (if you are using the `~/pages` integration), or by manually specifying it as a prop to `<NuxtLayout>`. (**Note**: The layout name is normalized to kebab-case, so `someLayout` becomes `some-layout`.)
|
||||
|
||||
If you only have a single layout in your application, we recommend using [app.vue](/guide/directory-structure/app) instead.
|
||||
If you only have a single layout in your application, we recommend using [app.vue](/docs/guide/directory-structure/app) instead.
|
||||
|
||||
::alert{type=warning}
|
||||
Unlike other components, your layouts must have a single root element to allow Nuxt to apply transitions between layout changes - and this root element cannot be a `<slot />`.
|
||||
|
|
@ -107,7 +107,7 @@ definePageMeta({
|
|||
::
|
||||
|
||||
::alert{type=info}
|
||||
Learn more about [defining page meta](/guide/directory-structure/pages#page-metadata).
|
||||
Learn more about [defining page meta](/docs/guide/directory-structure/pages#page-metadata).
|
||||
::
|
||||
|
||||
## Changing the Layout Dynamically
|
||||
|
|
@ -131,7 +131,7 @@ definePageMeta({
|
|||
</script>
|
||||
```
|
||||
|
||||
::LinkExample{link="/examples/routing/layouts"}
|
||||
::LinkExample{link="/docs/examples/routing/layouts"}
|
||||
::
|
||||
|
||||
## Overriding a Layout on a Per-page Basis
|
||||
|
|
@ -19,7 +19,7 @@ There are three kinds of route middleware:
|
|||
2. Named route middleware, which are placed in the `middleware/` directory and will be automatically loaded via asynchronous import when used on a page. (**Note**: The route middleware name is normalized to kebab-case, so `someMiddleware` becomes `some-middleware`.)
|
||||
3. Global route middleware, which are placed in the `middleware/` directory (with a `.global` suffix) and will be automatically run on every route change.
|
||||
|
||||
The first two kinds of route middleware can be [defined in `definePageMeta`](/guide/directory-structure/pages).
|
||||
The first two kinds of route middleware can be [defined in `definePageMeta`](/docs/guide/directory-structure/pages).
|
||||
|
||||
## Format
|
||||
|
||||
|
|
@ -45,13 +45,13 @@ Unlike navigation guards in [the vue-router docs](https://router.vuejs.org/guide
|
|||
* `return navigateTo('/')` or `return navigateTo({ path: '/' })` - redirects to the given path and will set the redirect code to [`302` Found](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/302) if the redirect happens on the server side
|
||||
* `return navigateTo('/', { redirectCode: 301 })` - redirects to the given path and will set the redirect code to [`301` Moved Permanently](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/301) if the redirect happens on the server side
|
||||
|
||||
::ReadMore{link="/api/utils/navigate-to"}
|
||||
::ReadMore{link="/docs/api/utils/navigate-to"}
|
||||
::
|
||||
|
||||
* `return abortNavigation()` - stops the current navigation
|
||||
* `return abortNavigation(error)` - rejects the current navigation with an error
|
||||
|
||||
::ReadMore{link="/api/utils/abort-navigation"}
|
||||
::ReadMore{link="/docs/api/utils/abort-navigation"}
|
||||
::
|
||||
|
||||
::alert{type=warning}
|
||||
|
|
@ -94,5 +94,5 @@ definePageMeta({
|
|||
|
||||
Now, before navigation to that page can complete, the `auth` route middleware will be run.
|
||||
|
||||
::LinkExample{link="/examples/routing/middleware"}
|
||||
::LinkExample{link="/docs/examples/routing/middleware"}
|
||||
::
|
||||
|
|
@ -10,7 +10,7 @@ head.title: "Pages"
|
|||
Nuxt provides a file-based routing to create routes within your web application using [Vue Router](https://router.vuejs.org) under the hood.
|
||||
|
||||
::alert{type="info"}
|
||||
This directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [app.vue](/guide/directory-structure/app) (unless you set `pages: true` in `nuxt.config` or have a [`app/router.options.ts`](/guide/directory-structure/pages#router-options)), reducing your application's bundle size.
|
||||
This directory is **optional**, meaning that [`vue-router`](https://router.vuejs.org) won't be included if you only use [app.vue](/docs/guide/directory-structure/app) (unless you set `pages: true` in `nuxt.config` or have a [`app/router.options.ts`](/docs/guide/directory-structure/pages#router-options)), reducing your application's bundle size.
|
||||
::
|
||||
|
||||
## Usage
|
||||
|
|
@ -48,7 +48,7 @@ export default defineComponent({
|
|||
|
||||
The `pages/index.vue` file will be mapped to the `/` route of your application.
|
||||
|
||||
If you are using [app.vue](/guide/directory-structure/app), make sure to use the `<NuxtPage/>` component to display the current page:
|
||||
If you are using [app.vue](/docs/guide/directory-structure/app), make sure to use the `<NuxtPage/>` component to display the current page:
|
||||
|
||||
```vue [app.vue]
|
||||
<template>
|
||||
|
|
@ -220,7 +220,7 @@ definePageMeta({
|
|||
</script>
|
||||
```
|
||||
|
||||
::LinkExample{link="/examples/routing/pages"}
|
||||
::LinkExample{link="/docs/examples/routing/pages"}
|
||||
::
|
||||
|
||||
## Page Metadata
|
||||
|
|
@ -276,7 +276,7 @@ Nuxt will automatically wrap your page in [the Vue `<KeepAlive>` component](http
|
|||
|
||||
When your goal is to preserve state for parent routes use this syntax: `<NuxtPage keepalive />`. 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`](/docs/api/configuration/nuxt-config#keepalive).
|
||||
|
||||
#### `key`
|
||||
|
||||
|
|
@ -284,17 +284,17 @@ You can set a default value for this property [in your `nuxt.config`](/api/confi
|
|||
|
||||
#### `layout`
|
||||
|
||||
You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/guide/directory-structure/layouts).
|
||||
You can define the layout used to render the route. This can be either false (to disable any layout), a string or a ref/computed, if you want to make it reactive in some way. [More about layouts](/docs/guide/directory-structure/layouts).
|
||||
|
||||
#### `layoutTransition` and `pageTransition`
|
||||
|
||||
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`](/docs/api/configuration/nuxt-config#layouttransition).
|
||||
|
||||
#### `middleware`
|
||||
|
||||
You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/guide/directory-structure/middleware).
|
||||
You can define middleware to apply before loading this page. It will be merged with all the other middleware used in any matching parent/child routes. It can be a string, a function (an anonymous/inlined middleware function following [the global before guard pattern](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards)), or an array of strings/functions. [More about named middleware](/docs/guide/directory-structure/middleware).
|
||||
|
||||
#### `name`
|
||||
|
||||
|
|
@ -321,7 +321,7 @@ export {}
|
|||
|
||||
## Navigation
|
||||
|
||||
To navigate between pages of your app, you should use the [`<NuxtLink>`](/api/components/nuxt-link) component.
|
||||
To navigate between pages of your app, you should use the [`<NuxtLink>`](/docs/api/components/nuxt-link) component.
|
||||
|
||||
This component is included with Nuxt and therefore you don't have to import it as you do with other components.
|
||||
|
||||
|
|
@ -334,7 +334,7 @@ A simple link to the `index.vue` page in your `pages` folder:
|
|||
```
|
||||
|
||||
::alert{type="info"}
|
||||
Learn more about [`<NuxtLink>`](/api/components/nuxt-link) usage.
|
||||
Learn more about [`<NuxtLink>`](/docs/api/components/nuxt-link) usage.
|
||||
::
|
||||
|
||||
## Router Options
|
||||
|
|
@ -32,7 +32,7 @@ Only `myPlugin.ts` and `myOtherPlugin/index.ts` would be registered.
|
|||
|
||||
## Creating Plugins
|
||||
|
||||
The only argument passed to a plugin is [`nuxtApp`](/api/composables/use-nuxt-app).
|
||||
The only argument passed to a plugin is [`nuxtApp`](/docs/api/composables/use-nuxt-app).
|
||||
|
||||
```ts
|
||||
export default defineNuxtPlugin(nuxtApp => {
|
||||
|
|
@ -58,7 +58,7 @@ This is useful in situations where you have a plugin that depends on another plu
|
|||
|
||||
## Using Composables Within Plugins
|
||||
|
||||
You can use [composables](/guide/directory-structure/composables) within Nuxt plugins:
|
||||
You can use [composables](/docs/guide/directory-structure/composables) within Nuxt plugins:
|
||||
|
||||
```ts
|
||||
export default defineNuxtPlugin((NuxtApp) => {
|
||||
|
|
@ -179,5 +179,5 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|||
|
||||
:ReadMore{link="https://vuejs.org/guide/reusability/custom-directives.html"}
|
||||
|
||||
::LinkExample{link="/examples/app/plugins"}
|
||||
::LinkExample{link="/docs/examples/app/plugins"}
|
||||
::
|
||||
|
|
@ -7,10 +7,10 @@ description: Use the utils/ directory to auto-import your utility functions thro
|
|||
|
||||
# Utils Directory
|
||||
|
||||
Nuxt 3 uses the `utils/` directory to automatically import helper functions and other utilities throughout your application using [auto-imports](/guide/concepts/auto-imports)!
|
||||
Nuxt 3 uses the `utils/` directory to automatically import helper functions and other utilities throughout your application using [auto-imports](/docs/guide/concepts/auto-imports)!
|
||||
|
||||
::alert{type=info}
|
||||
The main purpose of the `utils/` directory is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.
|
||||
|
||||
The way `utils/` auto-imports work and are scanned is identical to [the composables/ directory](/guide/directory-structure/composables). You can see examples and more information about how they work in that section of the docs.
|
||||
The way `utils/` auto-imports work and are scanned is identical to [the composables/ directory](/docs/guide/directory-structure/composables). You can see examples and more information about how they work in that section of the docs.
|
||||
::
|
||||
|
|
@ -9,7 +9,7 @@ description: The .nuxtignore file lets Nuxt ignore files in your project’s roo
|
|||
|
||||
The `.nuxtignore` file lets Nuxt ignore `layout`, `pages`, `components`, `composables` and `middleware` files in your project’s root directory (`rootDir`) during the build phase. The `.nuxtignore` file is subject to the same specification as `.gitignore` and `.eslintignore` files, in which each line is a glob pattern indicating which files should be ignored.
|
||||
|
||||
**Note**: You can also configure [`ignoreOptions`](/guide/directory-structure/nuxt.config#ignoreoptions), [`ignorePrefix`](/guide/directory-structure/nuxt.config#ignoreprefix) and [`ignore`](/guide/directory-structure/nuxt.config#ignore) in your `nuxt.config` file.
|
||||
**Note**: You can also configure [`ignoreOptions`](/docs/guide/directory-structure/nuxt.config#ignoreoptions), [`ignorePrefix`](/docs/guide/directory-structure/nuxt.config#ignoreprefix) and [`ignore`](/docs/guide/directory-structure/nuxt.config#ignore) in your `nuxt.config` file.
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ export default defineAppConfig({
|
|||
})
|
||||
```
|
||||
|
||||
When adding `theme` to the `app.config`, Nuxt uses Vite or Webpack to bundle the code. We can universally access `theme` in both server and browser using [useAppConfig](/api/composables/use-app-config) composable.
|
||||
When adding `theme` to the `app.config`, Nuxt uses Vite or webpack to bundle the code. We can universally access `theme` in both server and browser using [useAppConfig](/docs/api/composables/use-app-config) composable.
|
||||
|
||||
```js
|
||||
const appConfig = useAppConfig()
|
||||
|
|
@ -11,7 +11,7 @@ The `app.vue` file is the main component in your Nuxt 3 applications.
|
|||
|
||||
## Minimal usage
|
||||
|
||||
With Nuxt 3, the [`pages/`](/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>
|
||||
|
|
@ -21,7 +21,7 @@ With Nuxt 3, the [`pages/`](/guide/directory-structure/pages) directory is optio
|
|||
|
||||
## Usage With Pages
|
||||
|
||||
If you have a [`pages/`](/guide/directory-structure/pages) directory, to display the current page, use the `<NuxtPage>` component:
|
||||
If you have a [`pages/`](/docs/guide/directory-structure/pages) directory, to display the current page, use the `<NuxtPage>` component:
|
||||
|
||||
```vue [app.vue]
|
||||
<template>
|
||||
|
|
@ -41,4 +41,4 @@ Since Nuxt 3 uses [`<Suspense>`](https://vuejs.org/guide/built-ins/suspense.html
|
|||
Remember that `app.vue` acts as the main component of your Nuxt application. Anything you add to it (JS and CSS) will be global and included in every page.
|
||||
::
|
||||
|
||||
If you want to have the possibility to customize the structure around the page between pages, check out the [`layouts/`](/guide/directory-structure/layouts) directory.
|
||||
If you want to have the possibility to customize the structure around the page between pages, check out the [`layouts/`](/docs/guide/directory-structure/layouts) directory.
|
||||
|
|
@ -32,5 +32,5 @@ export default defineNuxtConfig({
|
|||
|
||||
To ensure your configuration is up to date, Nuxt will make a full restart when detecting changes in the main configuration file, the `.env`, `.nuxtignore` and `.nuxtrc` dotfiles.
|
||||
|
||||
::ReadMore{link="/api/configuration/nuxt-config"}
|
||||
::ReadMore{link="/docs/api/configuration/nuxt-config"}
|
||||
::
|
||||
|
|
@ -7,7 +7,7 @@ head.title: "TypeScript Config File"
|
|||
|
||||
# TypeScript Configuration File
|
||||
|
||||
Nuxt [automatically generates](/guide/concepts/typescript) a `.nuxt/tsconfig.json` file with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults. You can benefit from this by creating a `tsconfig.json` in the root of your project with the following content:
|
||||
Nuxt [automatically generates](/docs/guide/concepts/typescript) a `.nuxt/tsconfig.json` file with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults. You can benefit from this by creating a `tsconfig.json` in the root of your project with the following content:
|
||||
|
||||
```json
|
||||
{
|
||||
|
|
@ -11,13 +11,13 @@ Nuxt is a minimal but highly customizable framework to build web applications. T
|
|||
|
||||
When you start Nuxt in development mode with `nuxi dev` or building a production application with `nuxi build`,
|
||||
a common context will be created, referred to as `nuxt` internally. It holds normalized options merged with `nuxt.config` file,
|
||||
some internal state, and a powerful [hooking system](/api/advanced/hooks) powered by [unjs/hookable](https://github.com/unjs/hookable)
|
||||
some internal state, and a powerful [hooking system](/docs/api/advanced/hooks) powered by [unjs/hookable](https://github.com/unjs/hookable)
|
||||
allowing different components to communicate with each other. You can think of it as **Builder Core**.
|
||||
|
||||
This context is globally available to be used with [nuxt/kit](/api/advanced/kit) composables.
|
||||
This context is globally available to be used with [nuxt/kit](/docs/api/advanced/kit) composables.
|
||||
Therefore only one instance of Nuxt is allowed to run per process.
|
||||
|
||||
To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt Modules](/guide/going-further/modules).
|
||||
To extend the Nuxt interface and hook into different stages of the build process, we can use [Nuxt Modules](/docs/guide/going-further/modules).
|
||||
|
||||
For more details, check out [the source code](https://github.com/nuxt/framework/blob/main/packages/nuxt/src/core/nuxt.ts).
|
||||
|
||||
|
|
@ -30,9 +30,9 @@ You can think of it as **Runtime Core**.
|
|||
This context can be accessed using `useNuxtApp()` composable within Nuxt plugins and `<script setup>` and vue composables.
|
||||
Global usage is possible for the browser but not on the server, to avoid sharing context between users.
|
||||
|
||||
To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/guide/directory-structure/plugins).
|
||||
To extend the `nuxtApp` interface and hook into different stages or access contexts, we can use [Nuxt Plugins](/docs/guide/directory-structure/plugins).
|
||||
|
||||
Check [Nuxt App](/api/composables/use-nuxt-app) for more information about this interface.
|
||||
Check [Nuxt App](/docs/api/composables/use-nuxt-app) for more information about this interface.
|
||||
|
||||
`nuxtApp` has the following properties:
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ Nuxt builds and bundles project using Node.js but also has a runtime side.
|
|||
|
||||
While both areas can be extended, that runtime context is isolated from build-time. Therefore, they are not supposed to share state, code, or context other than runtime configuration!
|
||||
|
||||
`nuxt.config` and [Nuxt Modules](/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/guide/directory-structure/plugins) can be used to extend runtime.
|
||||
`nuxt.config` and [Nuxt Modules](/docs/guide/going-further/modules) can be used to extend the build context, and [Nuxt Plugins](/docs/guide/directory-structure/plugins) can be used to extend runtime.
|
||||
|
||||
When building an application for production, `nuxi build` will generate a standalone build
|
||||
in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/guide/going-further/modules).
|
||||
in the `.output` directory, independent of `nuxt.config` and [Nuxt modules](/docs/guide/going-further/modules).
|
||||
|
|
@ -9,7 +9,7 @@ Nuxt provides a runtime config API to expose configuration within your applicati
|
|||
|
||||
## Exposing Runtime Config
|
||||
|
||||
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` option](/guide/directory-structure/nuxt.config#runtimeconfig).
|
||||
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` option](/docs/guide/directory-structure/nuxt.config#runtimeconfig).
|
||||
|
||||
**Example:**
|
||||
|
||||
|
|
@ -7,7 +7,7 @@ description: "Edge channel allows to use latest commits from the repository."
|
|||
|
||||
Nuxt 3 is landing commits, improvements, and bug fixes every day. You can opt-in to test them earlier before the next release.
|
||||
|
||||
After each commit is merged into the `main` branch of [nuxt/framework](https://github.com/nuxt/framework) and **passing all tests**, we trigger an automated npm release using Github Actions publishing Nuxt 3 packages.
|
||||
After each commit is merged into the `main` branch of [nuxt/framework](https://github.com/nuxt/framework) and **passing all tests**, we trigger an automated npm release using GitHub Actions publishing Nuxt 3 packages.
|
||||
|
||||
You can opt in to use this release channel and avoid waiting for the next release and helping Nuxt by beta testing changes.
|
||||
|
||||
|
|
@ -9,7 +9,7 @@ Nuxt provides a powerful hooking system to expand almost every aspect using hook
|
|||
|
||||
## Nuxt Hooks (Build Time)
|
||||
|
||||
These hooks are available for [Nuxt Modules](/guide/going-further/modules) and build context.
|
||||
These hooks are available for [Nuxt Modules](/docs/guide/going-further/modules) and build context.
|
||||
|
||||
### Usage with `nuxt.config`
|
||||
|
||||
|
|
@ -35,7 +35,7 @@ export default defineNuxtModule({
|
|||
|
||||
## App Hooks (Runtime)
|
||||
|
||||
App hooks can be mainly used by [Nuxt Plugins](/guide/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
|
||||
App hooks can be mainly used by [Nuxt Plugins](/docs/guide/directory-structure/plugins) to hook into rendering lifecycle but could also be used in Vue composables.
|
||||
|
||||
### Usage with Plugins
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ export default defineNuxtPlugin((nuxtApp) => {
|
|||
```
|
||||
|
||||
::alert{icon=👉}
|
||||
Learn more about [available lifecycle hooks](/api/advanced/hooks)
|
||||
Learn more about [available lifecycle hooks](/docs/api/advanced/hooks)
|
||||
::
|
||||
|
||||
## Nitro App Hooks (Runtime)
|
||||
|
|
@ -71,5 +71,5 @@ export default defineNitroPlugin((nitroApp) => {
|
|||
```
|
||||
|
||||
::alert{icon=👉}
|
||||
Learn more about available [Nitro lifecycle hooks](/api/advanced/hooks#nitro-hooks-runtime-server-side).
|
||||
Learn more about available [Nitro lifecycle hooks](/docs/api/advanced/hooks#nitro-hooks-runtime-server-side).
|
||||
::
|
||||
|
|
@ -8,7 +8,7 @@ description: "Learn how to create a Nuxt module."
|
|||
A powerful configuration and hooks system makes it possible to customize almost every aspect of Nuxt Framework and add endless possible integrations when it comes to customization.
|
||||
|
||||
Nuxt provides a zero-config experience with a preset of integrations and best practices to develop Web applications.
|
||||
A powerful configuration and hooks system makes it possible to customize almost every aspect of Nuxt Framework and add endless possible integrations when it comes to customization. You can learn more about how Nuxt works in the [Nuxt internals](/guide/going-further/internals) section.
|
||||
A powerful configuration and hooks system makes it possible to customize almost every aspect of Nuxt Framework and add endless possible integrations when it comes to customization. You can learn more about how Nuxt works in the [Nuxt internals](/docs/guide/going-further/internals) section.
|
||||
|
||||
Nuxt exposes a powerful API called **Nuxt Modules**. Nuxt modules are simple async functions that sequentially run when starting Nuxt in development mode using `nuxi dev` or building a project for production with `nuxi build`.
|
||||
Using Nuxt Modules, we can encapsulate, properly test and share custom solutions as npm packages without adding unnecessary boilerplate to the Nuxt project itself.
|
||||
|
|
@ -43,7 +43,7 @@ A Nuxt module is a simple function accepting inline user options and `nuxt` argu
|
|||
|
||||
It is totally up to you, as the module author, how to handle the rest of the logic.
|
||||
|
||||
Starting with Nuxt 3, modules can benefit all [Nuxt Kit](/api/advanced/kit) utilities.
|
||||
Starting with Nuxt 3, modules can benefit all [Nuxt Kit](/docs/api/advanced/kit) utilities.
|
||||
|
||||
```ts [modules/example.ts]
|
||||
// modules/module.mjs
|
||||
|
|
@ -77,7 +77,7 @@ export default defineNuxtConfig({
|
|||
|
||||
## Defining Nuxt Modules
|
||||
|
||||
Creating Nuxt modules involves tedious and common tasks. [Nuxt Kit](/api/advanced/kit), provides a convenient and standard API to define Nuxt modules using `defineNuxtModule`:
|
||||
Creating Nuxt modules involves tedious and common tasks. [Nuxt Kit](/docs/api/advanced/kit), provides a convenient and standard API to define Nuxt modules using `defineNuxtModule`:
|
||||
|
||||
```js
|
||||
import { defineNuxtModule } from '@nuxt/kit'
|
||||
|
|
@ -145,7 +145,7 @@ Exposing types and using typescript to develop modules can benefit users even wh
|
|||
|
||||
### Avoid CommonJS Syntax
|
||||
|
||||
Nuxt 3, relies on native ESM. Please read [Native ES Modules](/guide/going-further/esm) for more information.
|
||||
Nuxt 3, relies on native ESM. Please read [Native ES Modules](/docs/guide/going-further/esm) for more information.
|
||||
|
||||
## Modules Ecosystem
|
||||
|
||||
|
|
@ -165,9 +165,9 @@ Linking to the integration website and documentation is always a good idea.
|
|||
|
||||
To make your modules discoverable, use `nuxt-` prefix for the npm package name. This is always the best starting point to draft and try an idea!
|
||||
|
||||
### Listing Module on modules.nuxtjs.org
|
||||
### Listing Module
|
||||
|
||||
Do you have a working Module and want it listed on [modules.nuxtjs.org](https://modules.nuxtjs.org)? Open an issue in [nuxt/modules](https://github.com/nuxt/modules/issues/new) repository.
|
||||
Do you have a working Module and want it [listed](/modules)? Open an issue in [nuxt/modules](https://github.com/nuxt/modules/issues/new) repository.
|
||||
Nuxt team can help you to apply best practices before listing.
|
||||
|
||||
### Do Not Advertize With a Specific Nuxt Version
|
||||
|
|
@ -257,7 +257,7 @@ export default defineNuxtModule<ModuleOptions>({
|
|||
})
|
||||
```
|
||||
|
||||
::ReadMore{link="/api/advanced/kit" title="API > Advanced > Kit"}
|
||||
::ReadMore{link="/docs/api/advanced/kit" title="API > Advanced > Kit"}
|
||||
::
|
||||
|
||||
### Add a CSS Library
|
||||
|
|
@ -5,7 +5,7 @@ description: "@nuxt/kit provides features for module authors."
|
|||
|
||||
# Nuxt Kit
|
||||
|
||||
> Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/api/advanced/hooks) and [Nuxt Builder Core](/guide/going-further/internals#the-nuxt-interface) and developing [Nuxt Modules](/guide/going-further/modules) super easy!
|
||||
> Nuxt Kit provides composable utilities to make interacting with [Nuxt Hooks](/docs/api/advanced/hooks) and [Nuxt Builder Core](/docs/guide/going-further/internals#the-nuxt-interface) and developing [Nuxt Modules](/docs/guide/going-further/modules) super easy!
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -27,14 +27,14 @@ You can install the latest Nuxt Kit by adding it to the `dependencies` section o
|
|||
import { useNuxt } from '@nuxt/kit'
|
||||
```
|
||||
|
||||
::ReadMore{link="/api/advanced/kit" title="API > Advanced > Kit"}
|
||||
::ReadMore{link="/docs/api/advanced/kit" title="API > Advanced > Kit"}
|
||||
::
|
||||
|
||||
::alert{type="warning"}
|
||||
Nuxt Kit utilities are only available for modules and not meant to be imported in runtime (components, Vue composables, pages, plugins, or server routes).
|
||||
::
|
||||
|
||||
Nuxt Kit is an [esm-only package](/guide/going-further/esm) meaning that you **cannot** `require('@nuxt/kit')`. As a workaround, use dynamic import in the CommonJS context:
|
||||
Nuxt Kit is an [esm-only package](/docs/guide/going-further/esm) meaning that you **cannot** `require('@nuxt/kit')`. As a workaround, use dynamic import in the CommonJS context:
|
||||
|
||||
```js [test.cjs]
|
||||
// This does NOT work!
|
||||
|
|
@ -18,7 +18,7 @@ function useMyComposable () {
|
|||
}
|
||||
```
|
||||
|
||||
Plugins also receive `nuxtApp` as the first argument for convenience. [Read more about plugins.](/guide/directory-structure/plugins)
|
||||
Plugins also receive `nuxtApp` as the first argument for convenience. [Read more about plugins.](/docs/guide/directory-structure/plugins)
|
||||
|
||||
::alert{icon=👉}
|
||||
**`useNuxtApp` (on the server) only works during `setup`, inside Nuxt plugins or `Lifecycle Hooks`**.
|
||||
|
|
@ -38,5 +38,5 @@ console.log(nuxtApp.$hello('name')) // Prints "Hello name!"
|
|||
In Nuxt 2 plugins, this was referred to as [inject function](https://nuxtjs.org/docs/directory-structure/plugins#inject-in-root--context).
|
||||
|
||||
::alert{icon=👉}
|
||||
It is possible to inject helpers by returning an object with a `provide` key. See the [plugins documentation](/guide/directory-structure/plugins) for more information.
|
||||
It is possible to inject helpers by returning an object with a `provide` key. See the [plugins documentation](/docs/guide/directory-structure/plugins) for more information.
|
||||
::
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# `useAppConfig`
|
||||
|
||||
Access the reactive [app config](/guide/directory-structure/app.config) defined in the project.
|
||||
Access the reactive [app config](/docs/guide/directory-structure/app.config) defined in the project.
|
||||
|
||||
**Usage:**
|
||||
|
||||
|
|
@ -80,5 +80,5 @@ const { data, pending, error, refresh } = await useAsyncData(
|
|||
)
|
||||
```
|
||||
|
||||
::ReadMore{link="/getting-started/data-fetching"}
|
||||
::ReadMore{link="/docs/getting-started/data-fetching"}
|
||||
::
|
||||
|
|
@ -157,5 +157,5 @@ export default defineEventHandler(event => {
|
|||
})
|
||||
```
|
||||
|
||||
::LinkExample{link="/examples/composables/use-cookie"}
|
||||
::LinkExample{link="/docs/examples/composables/use-cookie"}
|
||||
::
|
||||
|
|
@ -8,5 +8,5 @@ const error = useError()
|
|||
|
||||
`useError` sets an error in the state and creates a reactive and SSR-friendly global Nuxt error across components.
|
||||
|
||||
::ReadMore{link="/getting-started/error-handling"}
|
||||
::ReadMore{link="/docs/getting-started/error-handling"}
|
||||
::
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
# `useFetch`
|
||||
|
||||
This composable provides a convenient wrapper around [`useAsyncData`](/api/composables/use-async-data) and [`$fetch`](/api/utils/dollarfetch).
|
||||
This composable provides a convenient wrapper around [`useAsyncData`](/docs/api/composables/use-async-data) and [`$fetch`](/docs/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.
|
||||
|
||||
|
|
@ -40,7 +40,7 @@ type AsyncData<DataT> = {
|
|||
|
||||
## Params
|
||||
|
||||
* **Url**: The URL to fetch.
|
||||
* **URL**: The URL to fetch.
|
||||
* **Options (extends [unjs/ofetch](https://github.com/unjs/ofetch) options & [AsyncDataOptions](/api/composables/use-async-data#params))**:
|
||||
* `method`: Request method.
|
||||
* `query`: Adds query search params to URL using [ufo](https://github.com/unjs/ufo)
|
||||
|
|
@ -122,7 +122,7 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
|
|||
})
|
||||
```
|
||||
|
||||
:ReadMore{link="/getting-started/data-fetching"}
|
||||
:ReadMore{link="/docs/getting-started/data-fetching"}
|
||||
|
||||
::LinkExample{link="/examples/composables/use-fetch"}
|
||||
::LinkExample{link="/docs/examples/composables/use-fetch"}
|
||||
::
|
||||
|
|
@ -8,7 +8,7 @@ Nuxt provides the `useHead` composable to add and customize the head properties
|
|||
|
||||
`useHead` is powered by [@vueuse/head](https://github.com/vueuse/head), you can find more in-depth documentation [here](https://unhead.harlanzw.com/)
|
||||
|
||||
::ReadMore{link="/getting-started/seo-meta"}
|
||||
::ReadMore{link="/docs/getting-started/seo-meta"}
|
||||
::
|
||||
|
||||
## Type
|
||||
|
|
@ -34,5 +34,5 @@ You can use `useHydration()` within composables, plugins and components.
|
|||
|
||||
Once the initial data is returned using the `get` function on the server side, you can access that data within `nuxtApp.payload` using the unique key that is passed as the first parameter in `useHydration` composable.
|
||||
|
||||
::ReadMore{link="/getting-started/data-fetching"}
|
||||
::ReadMore{link="/docs/getting-started/data-fetching"}
|
||||
::
|
||||
|
|
@ -8,11 +8,11 @@ description: This wrapper around useAsyncData triggers navigation immediately.
|
|||
|
||||
## Description
|
||||
|
||||
By default, [useAsyncData](/api/composables/use-async-data) blocks navigation until its async handler is resolved.
|
||||
By default, [useAsyncData](/docs/api/composables/use-async-data) blocks navigation until its async handler is resolved.
|
||||
|
||||
> `useLazyAsyncData` has the same signature as `useAsyncData`.
|
||||
|
||||
:ReadMore{link="/api/composables/use-async-data"}
|
||||
:ReadMore{link="/docs/api/composables/use-async-data"}
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -36,4 +36,4 @@ watch(count, (newCount) => {
|
|||
</script>
|
||||
```
|
||||
|
||||
:ReadMore{link="/getting-started/data-fetching#uselazyasyncdata"}
|
||||
:ReadMore{link="/docs/getting-started/data-fetching#uselazyasyncdata"}
|
||||
|
|
@ -8,11 +8,11 @@ description: This wrapper around useFetch triggers navigation immediately.
|
|||
|
||||
## Description
|
||||
|
||||
By default, [useFetch](/api/composables/use-fetch) blocks navigation until its async handler is resolved.
|
||||
By default, [useFetch](/docs/api/composables/use-fetch) blocks navigation until its async handler is resolved.
|
||||
|
||||
> `useLazyFetch` has the same signature as `useFetch`.
|
||||
|
||||
:ReadMore{link="/api/composables/use-fetch"}
|
||||
:ReadMore{link="/docs/api/composables/use-fetch"}
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -40,4 +40,4 @@ watch(posts, (newPosts) => {
|
|||
</script>
|
||||
```
|
||||
|
||||
:ReadMore{link="/getting-started/data-fetching#uselazyfetch"}
|
||||
:ReadMore{link="/docs/getting-started/data-fetching#uselazyfetch"}
|
||||
|
|
@ -32,11 +32,11 @@ As you can see in the example above, `$hello` has become the new and custom part
|
|||
|
||||
### `hook(name, cb)`
|
||||
|
||||
Hooks available in `nuxtApp` allows you to customize the runtime aspects of your Nuxt application. You can use runtime hooks in Vue.js composables and [Nuxt plugins](/guide/directory-structure/plugins) to hook into the rendering lifecycle.
|
||||
Hooks available in `nuxtApp` allows you to customize the runtime aspects of your Nuxt application. You can use runtime hooks in Vue.js composables and [Nuxt plugins](/docs/guide/directory-structure/plugins) to hook into the rendering lifecycle.
|
||||
|
||||
`hook` function is useful for adding custom logic by hooking into the rendering lifecycle at a specific point. `hook` function is mostly used when creating Nuxt plugins.
|
||||
|
||||
See [Runtime Hooks](/api/advanced/hooks#app-hooks-runtime) for available runtime hooks called by Nuxt.
|
||||
See [Runtime Hooks](/docs/api/advanced/hooks#app-hooks-runtime) for available runtime hooks called by Nuxt.
|
||||
|
||||
```js [plugins/test.ts]
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
|
|
@ -34,5 +34,5 @@ const { data } = await useFetch('/api/confidential', {
|
|||
```
|
||||
|
||||
::alert{icon=👉}
|
||||
[Another example](/getting-started/data-fetching#example-pass-client-headers-to-the-api) shows how we can pass cookies from the initial request to another API route.
|
||||
[Another example](/docs/getting-started/data-fetching#example-pass-client-headers-to-the-api) shows how we can pass cookies from the initial request to another API route.
|
||||
::
|
||||
|
|
@ -18,5 +18,5 @@ useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>
|
|||
Because the data inside `useState` will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
|
||||
::
|
||||
|
||||
::ReadMore{link="/getting-started/state-management"}
|
||||
::ReadMore{link="/docs/getting-started/state-management"}
|
||||
::
|
||||
|
|
@ -124,5 +124,5 @@ defineNuxtLink({
|
|||
- **exactActiveClass**: A default class to apply on exact active links. Works the same as [Vue Router's `linkExactActiveClass` option](https://router.vuejs.org/api/#linkexactactiveclass). Defaults to Vue Router's default (`"router-link-exact-active"`)
|
||||
- **prefetchedClass**: A default class to apply to links that have been prefetched.
|
||||
|
||||
::LinkExample{link="/examples/routing/nuxt-link"}
|
||||
::LinkExample{link="/docs/examples/routing/nuxt-link"}
|
||||
::
|
||||
|
|
@ -34,5 +34,5 @@ The `<NuxtErrorBoundary>` component handles client-side errors happening in its
|
|||
</template>
|
||||
```
|
||||
|
||||
::ReadMore{link="/getting-started/error-handling"}
|
||||
::ReadMore{link="/docs/getting-started/error-handling"}
|
||||
::
|
||||
|
|
@ -37,5 +37,5 @@ The `to` target of [`<Teleport>`](https://vuejs.org/guide/built-ins/teleport.htm
|
|||
</template>
|
||||
```
|
||||
|
||||
::LinkExample{link="/examples/app/teleport"}
|
||||
::LinkExample{link="/docs/examples/app/teleport"}
|
||||
::
|
||||
|
|
@ -7,10 +7,10 @@ description: Nuxt uses ofetch to expose globally the $fetch helper for making HT
|
|||
|
||||
Nuxt uses [ofetch](https://github.com/unjs/ofetch) to expose globally the `$fetch` helper for making HTTP requests within your Vue app or API routes.
|
||||
|
||||
::ReadMore{link="/getting-started/data-fetching"}
|
||||
::ReadMore{link="/docs/getting-started/data-fetching"}
|
||||
::
|
||||
|
||||
During server-side rendering, calling `$fetch` to fetch your internal [API routes](/guide/directory-structure/server) will directly call the relevant function (emulating the request), **saving an additional API call**.
|
||||
During server-side rendering, calling `$fetch` to fetch your internal [API routes](/docs/guide/directory-structure/server) will directly call the relevant function (emulating the request), **saving an additional API call**.
|
||||
|
||||
Note that `$fetch` is the preferred way to make HTTP calls in Nuxt 3 instead of [@nuxt/http](https://github.com/nuxt/http) and [@nuxtjs/axios](https://github.com/nuxt-community/axios-module) that are made for Nuxt 2.
|
||||
|
||||
|
|
@ -7,7 +7,7 @@ title: "abortNavigation"
|
|||
`abortNavigation` is a helper function that prevents navigation from taking place and throws an error if one is set as a parameter.
|
||||
|
||||
::alert{type="warning"}
|
||||
`abortNavigation` is only usable inside a [route middleware handler](/guide/directory-structure/middleware).
|
||||
`abortNavigation` is only usable inside a [route middleware handler](/docs/guide/directory-structure/middleware).
|
||||
::
|
||||
|
||||
## Type
|
||||
|
|
@ -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.
|
||||
|
||||
::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/`](/docs/guide/directory-structure/middleware) directory of your Nuxt application (unless [set otherwise](/docs/api/configuration/nuxt-config#middleware)).
|
||||
::
|
||||
|
||||
## Usage
|
||||
|
|
@ -23,7 +23,7 @@ addRouteMiddleware (name: string | RouteMiddleware, middleware?: RouteMiddleware
|
|||
|
||||
`name` can be either a string or a function of type `RouteMiddleware`. Function takes the next route `to` as the first argument and the current route `from` as the second argument, both of which are Vue route objects.
|
||||
|
||||
Learn more about available properties of [route objects](/api/composables/use-route).
|
||||
Learn more about available properties of [route objects](/docs/api/composables/use-route).
|
||||
|
||||
- **middleware** `type: RouteMiddleware`
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ clearError()
|
|||
clearError({ redirect: '/homepage' })
|
||||
```
|
||||
|
||||
Errors are set in state using [`useError()`](/api/composables/use-error). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
|
||||
Errors are set in state using [`useError()`](/docs/api/composables/use-error). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
|
||||
|
||||
::ReadMore{link="/getting-started/error-handling"}
|
||||
::ReadMore{link="/docs/getting-started/error-handling"}
|
||||
::
|
||||
|
|
@ -44,5 +44,5 @@ export default eventHandler(() => {
|
|||
}
|
||||
```
|
||||
|
||||
::ReadMore{link="/getting-started/error-handling"}
|
||||
::ReadMore{link="/docs/getting-started/error-handling"}
|
||||
::
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue