docs: add more internal links (nuxt#22013)

beerose · Jul 7, 2023 · b49e5f4 · b49e5f4
1 parent d2aee40
commit b49e5f4
Show file tree

Hide file tree

Showing 57 changed files with 150 additions and 150 deletions.
diff --git 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
@@ -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
@@ -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 `<NuxtPage />` 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 `<NuxtPage />` 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
 

diff --git 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
@@ -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
@@ -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
@@ -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 `<Link>` 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 `<Link>` component:
 
 ::code-group