diff --git a/.eslintrc b/.eslintrc index a1ad73df0c..a6d2bd2130 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,4 +1,5 @@ { + "$schema": "https://json.schemastore.org/eslintrc", "globals": { "NodeJS": true, "$fetch": true diff --git a/.github/workflows/autofix-docs.yml b/.github/workflows/autofix-docs.yml index 0aa5e349f2..9673c5ed8d 100644 --- a/.github/workflows/autofix-docs.yml +++ b/.github/workflows/autofix-docs.yml @@ -19,7 +19,7 @@ jobs: steps: - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 20 cache: "pnpm" @@ -30,4 +30,4 @@ jobs: - name: Lint (docs) run: pnpm lint:docs:fix - - uses: autofix-ci/action@8bc06253bec489732e5f9c52884c7cace15c0160 + - uses: autofix-ci/action@8caa572fd27b0019a65e4c695447089c8d3138b9 diff --git a/.github/workflows/autofix.yml b/.github/workflows/autofix.yml index 8ca276b432..654f9b2516 100644 --- a/.github/workflows/autofix.yml +++ b/.github/workflows/autofix.yml @@ -15,7 +15,7 @@ jobs: steps: - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 20 cache: "pnpm" @@ -42,4 +42,4 @@ jobs: - name: Update bundle size run: pnpm vitest run bundle -u - - uses: autofix-ci/action@8bc06253bec489732e5f9c52884c7cace15c0160 + - uses: autofix-ci/action@8caa572fd27b0019a65e4c695447089c8d3138b9 diff --git a/.github/workflows/changelogensets.yml b/.github/workflows/changelogensets.yml index aa5dd6cc09..2e20f61f13 100644 --- a/.github/workflows/changelogensets.yml +++ b/.github/workflows/changelogensets.yml @@ -23,7 +23,7 @@ jobs: with: fetch-depth: 0 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 20 cache: "pnpm" diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5e9b7fcf0a..f780219bd2 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -40,7 +40,7 @@ jobs: steps: - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 20 cache: "pnpm" @@ -77,7 +77,7 @@ jobs: steps: - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 20 cache: "pnpm" @@ -117,7 +117,7 @@ jobs: steps: - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 20 cache: "pnpm" @@ -146,7 +146,7 @@ jobs: steps: - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 20 cache: "pnpm" @@ -182,7 +182,7 @@ jobs: steps: - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: ${{ matrix.node }} cache: "pnpm" @@ -257,7 +257,7 @@ jobs: with: fetch-depth: 0 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 20 cache: "pnpm" @@ -296,7 +296,7 @@ jobs: with: fetch-depth: 0 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 20 cache: "pnpm" diff --git a/.github/workflows/docs-e2e.yml b/.github/workflows/docs-e2e.yml index 9f709adec1..c7d17f8fb2 100644 --- a/.github/workflows/docs-e2e.yml +++ b/.github/workflows/docs-e2e.yml @@ -23,7 +23,7 @@ jobs: steps: - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: cache: "pnpm" diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 6777614c26..e7006e798c 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -22,7 +22,7 @@ jobs: steps: - uses: actions/checkout@c85c95e3d7251135ab7dc9ce3241c5835cc595a9 # v3.5.3 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 20 cache: "pnpm" diff --git a/.github/workflows/nuxt2-edge.yml b/.github/workflows/nuxt2-edge.yml index 7b8dbb6ac7..0d58210c74 100644 --- a/.github/workflows/nuxt2-edge.yml +++ b/.github/workflows/nuxt2-edge.yml @@ -27,7 +27,7 @@ jobs: fetch-depth: 0 # All history - name: fetch tags run: git fetch --depth=1 origin "+refs/tags/*:refs/tags/*" - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 16 registry-url: 'https://registry.npmjs.org' diff --git a/.github/workflows/release-pr.yml b/.github/workflows/release-pr.yml index 691ef6cf5f..5ce653f371 100644 --- a/.github/workflows/release-pr.yml +++ b/.github/workflows/release-pr.yml @@ -35,7 +35,7 @@ jobs: fetch-depth: 0 - run: corepack enable - - uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 + - uses: actions/setup-node@e33196f7422957bea03ed53f6fbb155025ffc7b8 # v3.7.0 with: node-version: 20 cache: "pnpm" diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000000..32d67b6ee6 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,7 @@ +{ + // See https://go.microsoft.com/fwlink/?LinkId=827846 + // for the documentation about the extensions.json format + "recommendations": [ + "vue.volar" + ] +} diff --git a/docs/1.getting-started/2.installation.md b/docs/1.getting-started/2.installation.md index 599f241410..4d706543c1 100644 --- a/docs/1.getting-started/2.installation.md +++ b/docs/1.getting-started/2.installation.md @@ -34,7 +34,7 @@ Start with one of our starters and themes directly by opening [nuxt.new](https:/ - **Volar**: Either enable [**Take Over Mode**](https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode) (recommended) or add the [TypeScript Vue Plugin](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) -If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)**, you can disable generating the shim for `*.vue` files in your `nuxt.config.ts` file: +If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)**, you can disable generating the shim for `*.vue` files in your [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file: ```ts [nuxt.config.ts] export default defineNuxtConfig({ diff --git a/docs/1.getting-started/3.configuration.md b/docs/1.getting-started/3.configuration.md index c2acfbb285..21dba96333 100644 --- a/docs/1.getting-started/3.configuration.md +++ b/docs/1.getting-started/3.configuration.md @@ -9,7 +9,7 @@ By default, Nuxt is configured to cover most use cases. The [`nuxt.config.ts`](/ ## Nuxt Configuration -The `nuxt.config.ts` file is located at the root of a Nuxt project and can override or extend the application's behavior. +The [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file is located at the root of a Nuxt project and can override or extend the application's behavior. A minimal configuration file exports the `defineNuxtConfig` function containing an object with your configuration. The `defineNuxtConfig` helper is globally available without import. @@ -135,7 +135,7 @@ Non primitive JS types | ❌ No | ✅ Yes ## External Configuration Files -Nuxt uses `nuxt.config.ts` file as the single source of trust for configurations and skips reading external configuration files. During the course of building your project, you may have a need to configure those. The following table highlights common configurations and, where applicable, how they can be configured with Nuxt. +Nuxt uses [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt.config) file as the single source of trust for configurations and skips reading external configuration files. During the course of building your project, you may have a need to configure those. The following table highlights common configurations and, where applicable, how they can be configured with Nuxt. Name | Config File | How To Configure |---------------------------------------------|---------------------------|------------------------- diff --git a/docs/1.getting-started/3.views.md b/docs/1.getting-started/3.views.md index adc6d0fa21..f694015447 100644 --- a/docs/1.getting-started/3.views.md +++ b/docs/1.getting-started/3.views.md @@ -28,7 +28,7 @@ If you are familiar with Vue, you might wonder where `main.js` is (the file that ![Components are reusable pieces of UI](/assets/docs/getting-started/views/components.svg) -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. +Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the [`components/` directory](/docs/guide/directory-structure/components), and they will be automatically available across your application without having to explicitly import them. ::code-group @@ -57,9 +57,9 @@ Most components are reusable pieces of the user interface, like buttons and menu ![Pages are views tied to a specific route](/assets/docs/getting-started/views/pages.svg) -Pages represent views for each specific route pattern. Every file in the `pages/` directory represents a different route displaying its content. +Pages represent views for each specific route pattern. Every file in the [`pages/` directory](/docs/guide/directory-structure/pages) represents a different route displaying its content. -To use pages, create `pages/index.vue` file and add `` component to the `app.vue` (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the `pages/` directory. +To use pages, create `pages/index.vue` file and add `` component to the `app.vue` (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the [`pages/` directory](/docs/guide/directory-structure/pages). ::code-group @@ -136,7 +136,7 @@ If you want to create more layouts and learn how to use them in your pages, find ## Advanced: Extending the HTML template ::alert{type=info} -If you only need to modify the head, you can refer to the [SEO and meta section](docs/getting-started/seo-meta). +If you only need to modify the head, you can refer to the [SEO and meta section](/docs/getting-started/seo-meta). :: You can have full control over the HTML template by adding a Nitro plugin that registers a hook. diff --git a/docs/1.getting-started/4.assets.md b/docs/1.getting-started/4.assets.md index 50ebbc9d35..efaab282f1 100644 --- a/docs/1.getting-started/4.assets.md +++ b/docs/1.getting-started/4.assets.md @@ -13,7 +13,7 @@ Nuxt uses two directories to handle assets like stylesheets, fonts or images. 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 `/`. +You can get a file in the [`public/` directory](/docs/guide/directory-structure/public) from your application's code or from a browser by the root URL `/`. ### Example @@ -29,9 +29,9 @@ For example, referencing an image file in the `public/img/` directory, available 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. +By convention, Nuxt uses the [`assets/` directory](/docs/guide/directory-structure/assets) to store these files but there is no auto-scan functionality for this directory, and you can use any other name for it. -In your application's code, you can reference a file located in the `assets/` directory by using the `~/assets/` path. +In your application's code, you can reference a file located in the [`assets/` directory](/docs/guide/directory-structure/assets) by using the `~/assets/` path. ### Example @@ -44,7 +44,7 @@ For example, referencing an image file that will be processed if a build tool is ``` ::alert{type=info icon=💡} -Nuxt won't serve files in the `assets/` directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/` directory](#public-directory). +Nuxt won't serve files in the [`assets/` directory](/docs/guide/directory-structure/assets) at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/` directory](#public-directory). :: ### Global Styles Imports diff --git a/docs/1.getting-started/4.styling.md b/docs/1.getting-started/4.styling.md index dc44580018..1ab1d73869 100644 --- a/docs/1.getting-started/4.styling.md +++ b/docs/1.getting-started/4.styling.md @@ -9,7 +9,7 @@ You can use CSS preprocessors, CSS frameworks, UI libraries and Nuxt modules to ## Local Stylesheets -If you're writing local stylesheets, the natural place to put them is the `assets/` directory. +If you're writing local stylesheets, the natural place to put them is the [`assets/` directory](/docs/guide/directory-structure/assets). ### Importing Within Components @@ -37,7 +37,7 @@ The stylesheets will be inlined in the HTML rendered by Nuxt. ### The CSS Property You can also use the `css` property in the Nuxt configuration. -The natural place for your stylesheets is the `assets/` directory. You can then reference its path and Nuxt will include it to all the pages of your application. +The natural place for your stylesheets is the [`assets/` directory](/docs/guide/directory-structure/assets). You can then reference its path and Nuxt will include it to all the pages of your application. ```ts [nuxt.config.ts] export default defineNuxtConfig({ @@ -105,7 +105,7 @@ export default defineNuxtConfig({ You can include external stylesheets in your application by adding a link element in the head section of your nuxt.config file. You can achieve this result using different methods. Note that local stylesheets can also be included like this. -You can manipulate the head with the `app.head` property of your Nuxt configuration: +You can manipulate the head with the [`app.head`](/docs/api/configuration/nuxt-config#head) property of your Nuxt configuration: ```ts [nuxt.config.ts] export default defineNuxtConfig({ diff --git a/docs/1.getting-started/5.routing.md b/docs/1.getting-started/5.routing.md index 37b1e272d1..8949768911 100644 --- a/docs/1.getting-started/5.routing.md +++ b/docs/1.getting-started/5.routing.md @@ -4,11 +4,11 @@ description: Nuxt file-system routing creates a route for every file in the page --- # Routing -One core feature of Nuxt is the file system router. Every Vue file inside the `pages/` directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route. +One core feature of Nuxt is the file system router. Every Vue file inside the [`pages/` directory](/docs/guide/directory-structure/pages) creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route. ## Pages -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. +Nuxt routing is based on [vue-router](https://router.vuejs.org/) and generates the routes from every component created in the [`pages/` directory](/docs/guide/directory-structure/pages), based on their filename. This file system routing uses naming conventions to create dynamic and nested routes: @@ -93,8 +93,8 @@ Route middleware runs within the Vue part of your Nuxt app. Despite the similar There are three kinds of route middleware: 1. Anonymous (or inline) route middleware, which are defined directly in the pages where they are used. -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. +2. Named route middleware, which are placed in the [`middleware/` directory](/docs/guide/directory-structure/middleware) 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](/docs/guide/directory-structure/middleware) (with a `.global` suffix) and will be automatically run on every route change. Example of an `auth` middleware protecting the `/dashboard` page: diff --git a/docs/1.getting-started/5.seo-meta.md b/docs/1.getting-started/5.seo-meta.md index 7ac269e588..c8bf6a110c 100644 --- a/docs/1.getting-started/5.seo-meta.md +++ b/docs/1.getting-started/5.seo-meta.md @@ -35,7 +35,7 @@ Shortcuts are available to make configuration easier: `charset` and `viewport`. ## `useHead` -The `useHead` composable function allows you to manage your head tags in a programmatic and reactive way, +The [`useHead`](/docs/api/composables/use-head) composable function allows you to manage your head tags in a programmatic and reactive way, powered by [Unhead](https://unhead.harlanzw.com/). As with all composables, it can only be used with a components `setup` and lifecycle hooks. @@ -59,7 +59,7 @@ We recommend to take a look at the [`useHead`](/docs/api/composables/use-head) a ## `useSeoMeta` and `useServerSeoMeta` -The `useSeoMeta` and `useServerSeoMeta` composables let you define your site's SEO meta tags as a flat object with full TypeScript support. +The `useSeoMeta` and [`useServerSeoMeta`](/docs/api/composables/use-server-seo-meta) composables let you define your site's SEO meta tags as a flat object with full TypeScript support. This helps you avoid typos and common mistakes, such as using `name` instead of `property`. @@ -108,7 +108,7 @@ const title = ref('Hello World') ## Types -The below is the non-reactive types used for `useHead`, `app.head` and components. +Below are the non-reactive types used for [`useHead`](/docs/api/composables/use-head), [`app.head`](/docs/api/configuration/nuxt-config#head) and components. ```ts interface MetaObject { @@ -196,7 +196,7 @@ If you want to use a function (for full control), then this cannot be set in you :: -Now, if you set the title to `My Page` with `useHead` on another page of your site, the title would appear as 'My Page - Site Title' in the browser tab. You could also pass `null` to default to the site title. +Now, if you set the title to `My Page` with [`useHead`](/docs/api/composables/use-head) on another page of your site, the title would appear as 'My Page - Site Title' in the browser tab. You could also pass `null` to default to the site title. ### Body Tags @@ -222,7 +222,7 @@ useHead({ ### With `definePageMeta` -Within your `pages/` directory, you can use `definePageMeta` along with `useHead` to set metadata based on the current route. +Within your [`pages/` directory](/docs/guide/directory-structure/pages), you can use `definePageMeta` along with [`useHead`](/docs/api/composables/use-head) to set metadata based on the current route. For example, you can first set the current page title (this is extracted at build time via a macro, so it can't be set dynamically): @@ -274,7 +274,7 @@ useHead({ ### External CSS -The example below shows how you might enable Google Fonts using either the `link` property of the `useHead` composable or using the `` component: +The example below shows how you might enable Google Fonts using either the `link` property of the [`useHead`](/docs/api/composables/use-head) composable or using the `` component: ::code-group diff --git a/docs/1.getting-started/6.data-fetching.md b/docs/1.getting-started/6.data-fetching.md index ea7101ebe5..1bf38cb017 100644 --- a/docs/1.getting-started/6.data-fetching.md +++ b/docs/1.getting-started/6.data-fetching.md @@ -5,15 +5,15 @@ description: Nuxt provides composables to handle data fetching within your appli # Data fetching -Nuxt comes with two composables and a built-in library to perform data-fetching in browser or server environments: `useFetch`, `useAsyncData` and `$fetch` . +Nuxt comes with two composables and a built-in library to perform data-fetching in browser or server environments: `useFetch`, [`useAsyncData`](/docs/api/composables/use-async-data) and `$fetch` . Used together, they ensure cross-environment compatibility and efficient caching and avoid duplicate network calls. -`useFetch` is the most straightforward way to handle data fetching in a component setup function. +[`useFetch`](/docs/api/composables/use-fetch) is the most straightforward way to handle data fetching in a component setup function. On the other hand, when wanting to make a network request based on user interaction, `$fetch` is almost always the right handler to go for. -If you need more fine-grained control, you can use `useAsyncData` and `$fetch` independently. +If you need more fine-grained control, you can use [`useAsyncData`](/docs/api/composables/use-async-data) and `$fetch` independently. The two composables share a common set of options and patterns that we will detail in the last sections. @@ -23,7 +23,7 @@ When using a framework like Nuxt that can perform calls and render pages on both ### Network calls duplication -The `useFetch` and `useAsyncData` composables ensure that once an API call is made on the server, the data is properly forwarded to the client in the payload. This JavaScript object is accessible through [`useNuxtApp().payload`](/docs/api/composables/use-nuxt-app#payload) and is used on the client to avoid refetching the same data when the code is executed in the browser. +The [`useFetch`](/docs/api/composables/use-fetch) and [`useAsyncData`](/docs/api/composables/use-async-data) composables ensure that once an API call is made on the server, the data is properly forwarded to the client in the payload. This JavaScript object is accessible through [`useNuxtApp().payload`](/docs/api/composables/use-nuxt-app#payload) and is used on the client to avoid refetching the same data when the code is executed in the browser. ::alert{icon=⚙️} Use the [Nuxt DevTools](https://devtools.nuxtjs.org) to inspect this data in the payload tab. @@ -31,7 +31,7 @@ Use the [Nuxt DevTools](https://devtools.nuxtjs.org) to inspect this data in the ### Effective caching -`useFetch` and `useAsyncData` both use a key to cache API responses and further reduce API calls. We will detail later how to invalidate this cache. +[`useFetch`](/docs/api/composables/use-fetch) and [`useAsyncData`](/docs/api/composables/use-async-data) both use a key to cache API responses and further reduce API calls. We will detail later how to invalidate this cache. ### Suspense @@ -43,7 +43,7 @@ These composables are auto-imported and can be used in `setup` functions or life ## `useFetch` -`useFetch` is the most straightforward way to perform data fetching. It is a wrapper around the `useAsyncData` composable and `$fetch` utility. +[`useFetch`](/docs/api/composables/use-fetch) is the most straightforward way to perform data fetching. It is a wrapper around the [`useAsyncData`](/docs/api/composables/use-async-data) composable and `$fetch` utility. ```vue [app.vue] ``` -You can alternatively use `useLazyFetch` and `useLazyAsyncData` as convenient methods to perform the same. +You can alternatively use [`useLazyFetch`](/docs/api/composables/use-lazy-fetch) and `useLazyAsyncData` as convenient methods to perform the same. ```ts const { pending, data: posts } = useLazyFetch('/api/posts') @@ -188,10 +188,10 @@ const { data: mountains } = await useFetch('/api/mountains', { #### Keys -`useFetch` and `useAsyncData` use keys to prevent refetching the same data. +[`useFetch`](/docs/api/composables/use-fetch) and [`useAsyncData`](/docs/api/composables/use-async-data) use keys to prevent refetching the same data. -- `useFetch` uses the provided URL as a key. Alternatively, a `key` value can be provided in the `options` object passed as a last argument. -- `useAsyncData` uses its first argument as a key if it is a string. If the first argument is the handler function that performs the query, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you. +- [`useFetch`](/docs/api/composables/use-fetch) uses the provided URL as a key. Alternatively, a `key` value can be provided in the `options` object passed as a last argument. +- [`useAsyncData`](/docs/api/composables/use-async-data) uses its first argument as a key if it is a string. If the first argument is the handler function that performs the query, then a key that is unique to the file name and line number of the instance of `useAsyncData` will be generated for you. ::alert{icon=📘} To get the cached data by key, you can use [`useNuxtData`](/docs/api/composables/use-nuxt-data) @@ -310,7 +310,7 @@ Using ` ``` -### Vue Auto-imports +#### Vue Auto-imports Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hooks and helpers that are auto-imported by Nuxt. @@ -46,7 +48,7 @@ Vue 3 exposes Reactivity APIs like `ref` or `computed`, as well as lifecycle hoo ``` -### Using Vue and Nuxt composables +#### Using Vue and Nuxt composables @@ -63,7 +65,7 @@ See the full explanation in this [comment](https://github.com/nuxt/nuxt/issues/1 ::NeedContribution :: -#### Example +##### Example **Example:** Breaking code: @@ -88,7 +90,7 @@ export const useMyComposable = () => { } ``` -## Directory-based Auto-imports +### Directory-based Auto-imports Nuxt directly auto-imports files created in defined directories: @@ -96,7 +98,7 @@ Nuxt directly auto-imports files created in defined directories: - `composables/` for [Vue composables](/docs/guide/directory-structure/composables). - `utils/` for helper functions and other utilities. -## Explicit Imports +### Explicit Imports Nuxt exposes every auto-import with the `#imports` alias that can be used to make the import explicit if needed: @@ -109,9 +111,9 @@ Nuxt exposes every auto-import with the `#imports` alias that can be used to mak ``` -## Disable Auto-imports +### Disabling Auto-imports -In case you want to disable auto-imports, you can set `imports.autoImport` to `false` in your `nuxt.config.ts`. +If you want to disable auto-importing composables and utilities, you can set `imports.autoImport` to `false` in the `nuxt.config` file. ```ts [nuxt.config.ts] export default defineNuxtConfig({ @@ -121,4 +123,20 @@ export default defineNuxtConfig({ }) ``` -This will disable implicit auto imports completely but it's still possible to use [Explicit Imports](#explicit-imports). +This will disable auto-imports completely but it's still possible to use [explicit imports](#explicit-imports) from `#imports`. + +## Auto-imported Components + +Nuxt also automatically imports components from your `~/components` directory, although this is configured separately from auto-importing composables and utility functions. + +:ReadMore{link="/docs/guide/directory-structure/components"} + +To disable auto-importing components from your own `~/components` directory, you can set `components.dirs` to an empty array (though note that this will not affect components added by modules). + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + components: { + dirs: [] + } +}) +``` diff --git a/docs/2.guide/1.concepts/2.vuejs-development.md b/docs/2.guide/1.concepts/2.vuejs-development.md index 137fb75f11..dc48f31179 100644 --- a/docs/2.guide/1.concepts/2.vuejs-development.md +++ b/docs/2.guide/1.concepts/2.vuejs-development.md @@ -36,7 +36,7 @@ Most applications need multiple pages and a way to navigate between them. This i The `app.vue` file is the entry point, which represents the page displayed in the browser window. -Inside the `