@nuxt/docs-nightly 4.1.3-29303775.dc69e26c → 4.1.3-29310283.19fc9abb

package/1.getting-started/02.installation.md

@@ -31,6 +31,7 @@ Or follow the steps below to set up a new Nuxt project on your computer.
   - **Node.js**: Make sure to use an even numbered version (18, 20, etc)
   - **Nuxtr**: Install the community-developed [Nuxtr extension](https://marketplace.visualstudio.com/items?itemName=Nuxtr.nuxtr-vscode)
   - **WSL**: If you are using Windows and experience slow HMR, you may want to try using [WSL (Windows Subsystem for Linux)](https://docs.microsoft.com/en-us/windows/wsl/install) which may solve some performance issues.
+  - **Windows slow DNS resolution** - instead of using `localhost:3000` for local dev server on Windows, use `127.0.0.1` for much faster loading experience on browsers.
   ::
 ::
 

package/1.getting-started/03.configuration.md

@@ -104,7 +104,7 @@ The `app.config.ts` file, located in the source directory (by default `app/`), i
 
 A minimal configuration file exports the `defineAppConfig` function containing an object with your configuration. The `defineAppConfig` helper is globally available without import.
 
-```ts [app.config.ts]
+```ts [app/app.config.ts]
 export default defineAppConfig({
   title: 'Hello Nuxt',
   theme: {

package/2.guide/0.index.md

@@ -7,12 +7,12 @@ surround: false
 ---
 
 ::card-group{class="sm:grid-cols-1"}
-  ::card{icon="i-lucide-medal" title="Key Concepts" to="/docs/guide/concepts"}
-  Discover the main concepts behind Nuxt, from auto-import, hybrid rendering to its TypeScript support.
-  ::
   ::card{icon="i-lucide-folders" title="Directory Structure" to="/docs/guide/directory-structure"}
   Learn about Nuxt directory structure and what benefits each directory or file offers.
   ::
+  ::card{icon="i-lucide-medal" title="Key Concepts" to="/docs/guide/concepts"}
+  Discover the main concepts behind Nuxt, from auto-import, hybrid rendering to its TypeScript support.
+  ::
   ::card{icon="i-lucide-star" title="Going Further" to="/docs/guide/going-further"}
   Master Nuxt with advanced concepts like experimental features, hooks, modules, and more.
   ::

package/2.guide/{2.directory-structure → 1.directory-structure}/.navigation.yml

@@ -1,3 +1,3 @@
 title: Directory Structure
 titleTemplate: '%s · Nuxt Directory Structure'
-icon: i-lucide-folders
+icon: i-vscode-icons-default-folder

package/2.guide/{2.directory-structure → 1.directory-structure}/0.nuxt.md

@@ -2,7 +2,7 @@
 title: ".nuxt"
 description: "Nuxt uses the .nuxt/ directory in development to generate your Vue application."
 head.title: ".nuxt/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-temp
 ---
 
 ::important

package/2.guide/{2.directory-structure → 1.directory-structure}/0.output.md

@@ -2,7 +2,7 @@
 title: ".output"
 description: "Nuxt creates the .output/ directory when building your application for production."
 head.title: ".output/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-package
 ---
 
 ::important

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/.navigation.yml

@@ -2,4 +2,4 @@ title: app
 titleTemplate: '%s · Nuxt Directory Structure'
 head.title: "app/"
 defaultOpen: true
-icon: i-lucide-folders
+icon: i-vscode-icons-folder-type-app

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/1.assets.md

@@ -2,7 +2,7 @@
 title: "assets"
 description: "The assets/ directory is used to add all the website's assets that the build tool will process."
 head.title: "assets/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-asset
 ---
 
 The directory usually contains the following types of files:

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/1.components.md

@@ -2,7 +2,7 @@
 title: "components"
 head.title: "components/"
 description: "The components/ directory is where you put all your Vue components."
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-component
 ---
 
 Nuxt automatically imports any components in this directory (along with components that are registered by any modules you may be using).

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/1.composables.md

@@ -2,7 +2,7 @@
 title: 'composables'
 head.title: 'composables/'
 description: Use the composables/ directory to auto-import your Vue composables into your application.
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-src
 ---
 
 ## Usage

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/1.layouts.md

@@ -2,7 +2,7 @@
 title: "layouts"
 head.title: "layouts/"
 description: "Nuxt provides a layouts framework to extract common UI patterns into reusable layouts."
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-view
 ---
 
 ::tip{icon="i-lucide-rocket" }

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/1.middleware.md

@@ -2,7 +2,7 @@
 title: "middleware"
 description: "Nuxt provides middleware to run code before navigating to a particular route."
 head.title: "middleware/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-middleware
 ---
 
 Nuxt provides a customizable **route middleware** framework you can use throughout your application, ideal for extracting code that you want to run before navigating to a particular route.

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/1.pages.md

@@ -2,7 +2,7 @@
 title: "pages"
 description: "Nuxt provides file-based routing to create routes within your web application."
 head.title: "pages/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-view
 ---
 
 ::note

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/1.plugins.md

@@ -2,7 +2,7 @@
 title: "plugins"
 description: "Nuxt has a plugins system to use Vue plugins and more at the creation of your Vue application."
 head.title: "plugins/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-plugin
 ---
 
 Nuxt automatically reads the files in the `app/plugins/` directory and loads them at the creation of the Vue application.

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/1.utils.md

@@ -2,7 +2,7 @@
 title: 'utils'
 head.title: 'utils/'
 description: Use the utils/ directory to auto-import your utility functions throughout your application.
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-tools
 ---
 
 The main purpose of the [`app/utils/` directory](/docs/4.x/guide/directory-structure/app/utils) is to allow a semantic distinction between your Vue composables and other auto-imported utility functions.

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/3.app-config.md

@@ -2,14 +2,14 @@
 title: app.config.ts
 head.title: 'app.config.ts'
 description: Expose reactive configuration within your application with the App Config file.
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-light-config
 ---
 
-Nuxt provides an `app.config` config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).
+Nuxt provides an `app/app.config.ts` config file to expose reactive configuration within your application with the ability to update it at runtime within lifecycle or using a nuxt plugin and editing it with HMR (hot-module-replacement).
 
 You can easily provide runtime app configuration using `app.config.ts` file. It can have either of `.ts`, `.js`, or `.mjs` extensions.
 
-```ts twoslash [app.config.ts]
+```ts twoslash [app/app.config.ts]
 export default defineAppConfig({
   foo: 'bar'
 })
@@ -27,7 +27,7 @@ When configuring a custom [`srcDir`](/docs/4.x/api/nuxt-config#srcdir), make sur
 
 To expose config and environment variables to the rest of your app, you will need to define configuration in `app.config` file.
 
-```ts twoslash [app.config.ts]
+```ts twoslash [app/app.config.ts]
 export default defineAppConfig({
   theme: {
     primaryColor: '#ababab'
@@ -126,14 +126,14 @@ Here's an example of how you can use:
 
 ::code-group
 
-```ts twoslash [layer/app.config.ts]
+```ts twoslash [layer/app/app.config.ts]
 export default defineAppConfig({
   // Default array value
   array: ['hello'],
 })
 ```
 
-```ts twoslash [app.config.ts]
+```ts twoslash [app/app.config.ts]
 export default defineAppConfig({
   // Overwrite default array value by using a merger function
   array: () => ['bonjour'],

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/3.app.md

@@ -2,7 +2,7 @@
 title: "app.vue"
 description: "The app.vue file is the main component of your Nuxt application."
 head.title: "app.vue"
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-vue
 ---
 
 ::tip

package/2.guide/{2.directory-structure → 1.directory-structure}/1.app/3.error.md

@@ -2,7 +2,7 @@
 title: "error.vue"
 description: "The error.vue file is the error page in your Nuxt application."
 head.title: "error.vue"
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-vue
 ---
 
 During the lifespan of your application, some errors may appear unexpectedly at runtime. In such case, we can use the `error.vue` file to override the default error files and display the error nicely.

package/2.guide/{2.directory-structure → 1.directory-structure}/1.content.md

@@ -2,7 +2,7 @@
 title: 'content'
 head.title: 'content/'
 description: Use the content/ directory to create a file-based CMS for your application.
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-log
 ---
 
 [Nuxt Content](https://content.nuxt.com) reads the [`content/` directory](/docs/4.x/guide/directory-structure/content) in your project and parses `.md`, `.yml`, `.csv` and `.json` files to create a file-based CMS for your application.

package/2.guide/{2.directory-structure → 1.directory-structure}/1.modules.md

@@ -2,7 +2,7 @@
 title: 'modules'
 head.title: 'modules/'
 description: Use the modules/ directory to automatically register local modules within your application.
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-nuxt
 ---
 
 It is a good place to place any local modules you develop while building your application.

package/2.guide/{2.directory-structure → 1.directory-structure}/1.node_modules.md

@@ -2,7 +2,7 @@
 title: "node_modules"
 description: "The package manager stores the dependencies of your project in the node_modules/ directory."
 head.title: "node_modules/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-node
 ---
 
 The package manager ([`npm`](https://docs.npmjs.com/cli/commands/npm) or [`yarn`](https://yarnpkg.com) or [`pnpm`](https://pnpm.io/cli/install) or [`bun`](https://bun.sh/package-manager)) creates this directory to store the dependencies of your project.

package/2.guide/{2.directory-structure → 1.directory-structure}/1.public.md

@@ -2,7 +2,7 @@
 title: "public"
 description: "The public/ directory is used to serve your website's static assets."
 head.title: "public/"
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-public
 ---
 
 Files contained within the `public/` directory are served at the root and are not modified by the build process. This is suitable for files that have to keep their names (e.g. `robots.txt`) _or_ likely won't change (e.g. `favicon.ico`).

package/2.guide/{2.directory-structure → 1.directory-structure}/1.server.md

@@ -2,7 +2,7 @@
 title: server
 head.title: 'server/'
 description: The server/ directory is used to register API and server handlers to your application.
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-server
 ---
 
 Nuxt automatically scans files inside these directories to register API and server handlers with Hot Module Replacement (HMR) support.

package/2.guide/{2.directory-structure → 1.directory-structure}/1.shared.md

@@ -2,7 +2,7 @@
 title: 'shared'
 head.title: 'shared/'
 description: 'Use the shared/ directory to share functionality between the Vue app and the Nitro server.'
-navigation.icon: i-lucide-folder
+navigation.icon: i-vscode-icons-folder-type-shared
 ---
 
 The `shared/` directory allows you to share code that can be used in both the Vue app and the Nitro server.
@@ -77,7 +77,7 @@ The way `shared/utils` and `shared/types` auto-imports work and are scanned is i
 -----| formatters
 -------| upper.ts         # Not auto-imported
 ---| types/
------| bar.d.ts           # Auto-imported
+-----| bar.ts             # Auto-imported
 ```
 
 Any other files you create in the `shared/` folder must be manually imported using the `#shared` alias (automatically configured by Nuxt):

package/2.guide/{2.directory-structure → 1.directory-structure}/2.env.md

@@ -2,7 +2,7 @@
 title: ".env"
 description: "A .env file specifies your build/dev-time environment variables."
 head.title: ".env"
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-dotenv
 ---
 
 ::important

package/2.guide/{2.directory-structure → 1.directory-structure}/2.gitignore.md

@@ -2,7 +2,7 @@
 title: ".gitignore"
 description: "A .gitignore file specifies intentionally untracked files that git should ignore."
 head.title: ".gitignore"
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-git
 ---
 
 A `.gitignore` file specifies intentionally untracked files that git should ignore.

package/2.guide/{2.directory-structure → 1.directory-structure}/2.nuxtignore.md

@@ -2,7 +2,8 @@
 title: .nuxtignore
 head.title: '.nuxtignore'
 description: The .nuxtignore file lets Nuxt ignore files in your project’s root directory during the build phase.
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-nuxt
+
 ---
 
 The `.nuxtignore` file tells Nuxt to ignore files in your project’s root directory ([`rootDir`](/docs/4.x/api/nuxt-config#rootdir)) during the build phase.

package/2.guide/{2.directory-structure → 1.directory-structure}/2.nuxtrc.md

@@ -2,7 +2,7 @@
 title: ".nuxtrc"
 description: "The .nuxtrc file allows you to define nuxt configurations in a flat syntax."
 head.title: ".nuxtrc"
-navigation.icon: i-lucide-file  
+navigation.icon: i-vscode-icons-file-type-nuxt
 ---
 
 The `.nuxtrc` file can be used to configure Nuxt with a flat syntax. It is based on [`unjs/rc9`](https://github.com/unjs/rc9).

package/2.guide/{2.directory-structure → 1.directory-structure}/3.nuxt-config.md

@@ -2,7 +2,7 @@
 title: "nuxt.config.ts"
 description: "Nuxt can be easily configured with a single nuxt.config file."
 head.title: "nuxt.config.ts"
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-nuxt
 ---
 
 The `nuxt.config` file extension can either be `.js`, `.ts` or `.mjs`.

package/2.guide/{2.directory-structure → 1.directory-structure}/3.package.md

@@ -2,7 +2,7 @@
 title: package.json
 head.title: package.json
 description: The package.json file contains all the dependencies and scripts for your application.
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-npm
 ---
 
 The minimal `package.json` of your Nuxt application should looks like:

package/2.guide/{2.directory-structure → 1.directory-structure}/3.tsconfig.md

@@ -2,7 +2,7 @@
 title: "tsconfig.json"
 description: "Nuxt generates multiple TypeScript configuration files with sensible defaults and your aliases."
 head.title: "tsconfig.json"
-navigation.icon: i-lucide-file
+navigation.icon: i-vscode-icons-file-type-tsconfig
 ---
 
 Nuxt [automatically generates](/docs/4.x/guide/concepts/typescript) multiple TypeScript configuration files (`.nuxt/tsconfig.app.json`, `.nuxt/tsconfig.server.json`, `.nuxt/tsconfig.node.json` and `.nuxt/tsconfig.shared.json`) with the resolved aliases you are using in your Nuxt project, as well as with other sensible defaults.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/docs-nightly",
-  "version": "4.1.3-29303775.dc69e26c",
+  "version": "4.1.3-29310283.19fc9abb",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nuxt/nuxt.git",