You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/1.getting-started/01.introduction.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,14 +12,14 @@ We made everything so you can start writing `.vue` files from the beginning whil
12
12
Nuxt has no vendor lock-in, allowing you to deploy your application [**everywhere, even on the edge**](/blog/nuxt-on-the-edge).
13
13
14
14
::tip
15
-
If you want to play around with Nuxt in your browser, you can [try it out in one of our online sandboxes](/docs/getting-started/installation#play-online).
15
+
If you want to play around with Nuxt in your browser, you can [try it out in one of our online sandboxes](/docs/3.x/getting-started/installation#play-online).
16
16
::
17
17
18
18
## Automation and Conventions
19
19
20
20
Nuxt uses conventions and an opinionated directory structure to automate repetitive tasks and allow developers to focus on pushing features. The configuration file can still customize and override its default behaviors.
21
21
22
-
-**File-based routing:** define routes based on the structure of your [`pages/` directory](/docs/guide/directory-structure/pages). This can make it easier to organize your application and avoid the need for manual route configuration.
22
+
-**File-based routing:** define routes based on the structure of your [`pages/` directory](/docs/3.x/guide/directory-structure/pages). This can make it easier to organize your application and avoid the need for manual route configuration.
23
23
-**Code splitting:** Nuxt automatically splits your code into smaller chunks, which can help reduce the initial load time of your application.
24
24
-**Server-side rendering out of the box:** Nuxt comes with built-in SSR capabilities, so you don't have to set up a separate server yourself.
25
25
-**Auto-imports:** write Vue composables and components in their respective directories and use them without having to import them with the benefits of tree-shaking and optimized JS bundles.
Copy file name to clipboardExpand all lines: docs/1.getting-started/03.configuration.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,11 +4,11 @@ description: Nuxt is configured with sensible defaults to make you productive.
4
4
navigation.icon: i-lucide-cog
5
5
---
6
6
7
-
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.
7
+
By default, Nuxt is configured to cover most use cases. The [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file can override or extend this default configuration.
8
8
9
9
## Nuxt Configuration
10
10
11
-
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.
11
+
The [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file is located at the root of a Nuxt project and can override or extend the application's behavior.
12
12
13
13
A minimal configuration file exports the `defineNuxtConfig` function containing an object with your configuration. The `defineNuxtConfig` helper is globally available without import.
These variables are exposed to the rest of your application using the [`useAppConfig`](/docs/api/composables/use-app-config) composable.
119
+
These variables are exposed to the rest of your application using the [`useAppConfig`](/docs/3.x/api/composables/use-app-config) composable.
120
120
121
121
```vue [pages/index.vue]
122
122
<script setup lang="ts">
@@ -145,20 +145,20 @@ Non primitive JS types | ❌ No | ✅ Yes
145
145
146
146
## External Configuration Files
147
147
148
-
Nuxt uses [`nuxt.config.ts`](/docs/guide/directory-structure/nuxt-config) file as the single source of truth 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.
148
+
Nuxt uses [`nuxt.config.ts`](/docs/3.x/guide/directory-structure/nuxt-config) file as the single source of truth 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.
[Nitro](https://nitro.build) | ~~`nitro.config.ts`~~ | Use [`nitro`](/docs/api/nuxt-config#nitro) key in `nuxt.config`
153
-
[PostCSS](https://postcss.org) | ~~`postcss.config.js`~~ | Use [`postcss`](/docs/api/nuxt-config#postcss) key in `nuxt.config`
154
-
[Vite](https://vite.dev) | ~~`vite.config.ts`~~ | Use [`vite`](/docs/api/nuxt-config#vite) key in `nuxt.config`
155
-
[webpack](https://webpack.js.org) | ~~`webpack.config.ts`~~ | Use [`webpack`](/docs/api/nuxt-config#webpack-1) key in `nuxt.config`
152
+
[Nitro](https://nitro.build) | ~~`nitro.config.ts`~~ | Use [`nitro`](/docs/3.x/api/nuxt-config#nitro) key in `nuxt.config`
153
+
[PostCSS](https://postcss.org) | ~~`postcss.config.js`~~ | Use [`postcss`](/docs/3.x/api/nuxt-config#postcss) key in `nuxt.config`
154
+
[Vite](https://vite.dev) | ~~`vite.config.ts`~~ | Use [`vite`](/docs/3.x/api/nuxt-config#vite) key in `nuxt.config`
155
+
[webpack](https://webpack.js.org) | ~~`webpack.config.ts`~~ | Use [`webpack`](/docs/3.x/api/nuxt-config#webpack-1) key in `nuxt.config`
Copy file name to clipboardExpand all lines: docs/1.getting-started/04.views.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,7 +26,7 @@ If you are familiar with Vue, you might wonder where `main.js` is (the file that
26
26
27
27
28
28
29
-
Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the [`components/`](/docs/guide/directory-structure/components) directory, and they will be automatically available across your application without having to explicitly import them.
29
+
Most components are reusable pieces of the user interface, like buttons and menus. In Nuxt, you can create these components in the [`components/`](/docs/3.x/guide/directory-structure/components) directory, and they will be automatically available across your application without having to explicitly import them.
30
30
31
31
::code-group
32
32
@@ -55,9 +55,9 @@ Most components are reusable pieces of the user interface, like buttons and menu
55
55
56
56
57
57
58
-
Pages represent views for each specific route pattern. Every file in the [`pages/`](/docs/guide/directory-structure/pages) directory represents a different route displaying its content.
58
+
Pages represent views for each specific route pattern. Every file in the [`pages/`](/docs/3.x/guide/directory-structure/pages) directory represents a different route displaying its content.
59
59
60
-
To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to the [`app.vue`](/docs/guide/directory-structure/app) (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the [`pages/`](/docs/guide/directory-structure/pages) directory.
60
+
To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to the [`app.vue`](/docs/3.x/guide/directory-structure/app) (or remove `app.vue` for default entry). You can now create more pages and their corresponding routes by adding new files in the [`pages/`](/docs/3.x/guide/directory-structure/pages) directory.
61
61
62
62
::code-group
63
63
@@ -91,7 +91,7 @@ To use pages, create `pages/index.vue` file and add `<NuxtPage />` component to
91
91
Layouts are wrappers around pages that contain a common User Interface for several pages, such as header and footer displays. 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.
92
92
93
93
::note
94
-
If you only have a single layout in your application, we recommend using [`app.vue`](/docs/guide/directory-structure/app) with [`<NuxtPage />`](/docs/api/components/nuxt-page) instead.
94
+
If you only have a single layout in your application, we recommend using [`app.vue`](/docs/3.x/guide/directory-structure/app) with [`<NuxtPage />`](/docs/3.x/api/components/nuxt-page) instead.
95
95
::
96
96
97
97
::code-group
@@ -137,12 +137,12 @@ If you only have a single layout in your application, we recommend using [`app.v
137
137
138
138
::
139
139
140
-
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).
140
+
If you want to create more layouts and learn how to use them in your pages, find more information in the [Layouts section](/docs/3.x/guide/directory-structure/layouts).
141
141
142
142
## Advanced: Extending the HTML Template
143
143
144
144
::note
145
-
If you only need to modify the `<head>`, you can refer to the [SEO and meta section](/docs/getting-started/seo-meta).
145
+
If you only need to modify the `<head>`, you can refer to the [SEO and meta section](/docs/3.x/getting-started/seo-meta).
146
146
::
147
147
148
148
You can have full control over the HTML template by adding a Nitro plugin that registers a hook.
Copy file name to clipboardExpand all lines: docs/1.getting-started/05.assets.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,14 +6,14 @@ navigation.icon: i-lucide-image
6
6
7
7
Nuxt uses two directories to handle assets like stylesheets, fonts or images.
8
8
9
-
- The [`public/`](/docs/guide/directory-structure/public) directory content is served at the server root as-is.
10
-
- The [`assets/`](/docs/guide/directory-structure/assets) directory contains by convention every asset that you want the build tool (Vite or webpack) to process.
9
+
- The [`public/`](/docs/3.x/guide/directory-structure/public) directory content is served at the server root as-is.
10
+
- The [`assets/`](/docs/3.x/guide/directory-structure/assets) directory contains by convention every asset that you want the build tool (Vite or webpack) to process.
11
11
12
12
## Public Directory
13
13
14
-
The [`public/`](/docs/guide/directory-structure/public) directory is used as a public server for static assets publicly available at a defined URL of your application.
14
+
The [`public/`](/docs/3.x/guide/directory-structure/public) directory is used as a public server for static assets publicly available at a defined URL of your application.
15
15
16
-
You can get a file in the [`public/`](/docs/guide/directory-structure/public) directory from your application's code or from a browser by the root URL `/`.
16
+
You can get a file in the [`public/`](/docs/3.x/guide/directory-structure/public) directory from your application's code or from a browser by the root URL `/`.
17
17
18
18
### Example
19
19
@@ -29,9 +29,9 @@ For example, referencing an image file in the `public/img/` directory, available
29
29
30
30
Nuxt uses [Vite](https://vite.dev/guide/assets.html) (default) 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://vite.dev/plugins) (for Vite) or [loaders](https://webpack.js.org/loaders) (for webpack) to process other kinds of assets, like stylesheets, fonts or SVGs. This step transforms the original file, mainly for performance or caching purposes (such as stylesheet minification or browser cache invalidation).
31
31
32
-
By convention, Nuxt uses the [`assets/`](/docs/guide/directory-structure/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.
32
+
By convention, Nuxt uses the [`assets/`](/docs/3.x/guide/directory-structure/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.
33
33
34
-
In your application's code, you can reference a file located in the [`assets/`](/docs/guide/directory-structure/assets) directory by using the `~/assets/` path.
34
+
In your application's code, you can reference a file located in the [`assets/`](/docs/3.x/guide/directory-structure/assets) directory by using the `~/assets/` path.
35
35
36
36
### Example
37
37
@@ -44,5 +44,5 @@ For example, referencing an image file that will be processed if a build tool is
44
44
```
45
45
46
46
::note
47
-
Nuxt won't serve files in the [`assets/`](/docs/guide/directory-structure/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](#public-directory) directory.
47
+
Nuxt won't serve files in the [`assets/`](/docs/3.x/guide/directory-structure/assets) directory at a static URL like `/assets/my-file.png`. If you need a static URL, use the [`public/`](#public-directory) directory.
Copy file name to clipboardExpand all lines: docs/1.getting-started/06.styling.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ You can use CSS preprocessors, CSS frameworks, UI libraries and Nuxt modules to
9
9
10
10
## Local Stylesheets
11
11
12
-
If you're writing local stylesheets, the natural place to put them is the [`assets/` directory](/docs/guide/directory-structure/assets).
12
+
If you're writing local stylesheets, the natural place to put them is the [`assets/` directory](/docs/3.x/guide/directory-structure/assets).
13
13
14
14
### Importing Within Components
15
15
@@ -37,7 +37,7 @@ The stylesheets will be inlined in the HTML rendered by Nuxt.
37
37
### The CSS Property
38
38
39
39
You can also use the `css` property in the Nuxt configuration.
40
-
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.
40
+
The natural place for your stylesheets is the [`assets/` directory](/docs/3.x/guide/directory-structure/assets). You can then reference its path and Nuxt will include it to all the pages of your application.
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 this way.
123
123
124
-
You can manipulate the head with the [`app.head`](/docs/api/nuxt-config#head) property of your Nuxt configuration:
124
+
You can manipulate the head with the [`app.head`](/docs/3.x/api/nuxt-config#head) property of your Nuxt configuration:
125
125
126
126
```ts twoslash [nuxt.config.ts]
127
127
exportdefaultdefineNuxtConfig({
@@ -507,7 +507,7 @@ Here are a few modules to help you get started:
507
507
-[Nuxt UI](https://ui.nuxt.com): A UI Library for Modern Web Apps
508
508
-[Panda CSS](https://panda-css.com/docs/installation/nuxt): CSS-in-JS engine that generates atomic CSS at build time
509
509
510
-
Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a [Nuxt plugin](/docs/guide/directory-structure/plugins) and/or [make your own module](/docs/guide/going-further/modules). Share them with the [community](/modules) if you do!
510
+
Nuxt modules provide you with a good developer experience out of the box, but remember that if your favorite tool doesn't have a module, it doesn't mean that you can't use it with Nuxt! You can configure it yourself for your own project. Depending on the tool, you might need to use a [Nuxt plugin](/docs/3.x/guide/directory-structure/plugins) and/or [make your own module](/docs/3.x/guide/going-further/modules). Share them with the [community](/modules) if you do!
511
511
512
512
### Easily Load Webfonts
513
513
@@ -519,7 +519,7 @@ If you are using [UnoCSS](https://unocss.dev/integrations/nuxt), note that it co
519
519
520
520
### Transitions
521
521
522
-
Nuxt comes with the same `<Transition>` element that Vue has, and also has support for the experimental [View Transitions API](/docs/getting-started/transitions#view-transitions-api-experimental).
522
+
Nuxt comes with the same `<Transition>` element that Vue has, and also has support for the experimental [View Transitions API](/docs/3.x/getting-started/transitions#view-transitions-api-experimental).
0 commit comments