chore: wip

docs/0.index.md

@@ -1,216 +1,151 @@
 ---
 title: Documentation
 navigation: false
+layout: home
 description: Learn everything you need to know about Nuxt, from beginner to master.
+hero:
+  title: The Intuitive Web Framework
+  description: Discover the leading the web framework for building modern Vue applications.
+  cta:
+    - Get Started
+    - /getting-started/installation
+  secondary:
+    - Star on GitHub
+    - https://github.com/nuxt/nuxt
+  snippet: npx nuxi@latest init nuxt-app
 ---
 
-<!-- markdownlint-disable -->
-<!-- @case-police-disable -->
-::docs-hero
-#title
-Nuxt Docs
-#description
+# Introduction
+
 Nuxt is a free and [open-source framework](https://github.com/nuxt/nuxt) with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with [Vue.js](https://vuejs.org).
+
+We made everything so you can start writing `.vue` files from the beginning while enjoying hot module replacement in development and a performant application in production with server-side rendering by default.
+
+Nuxt has no vendor lock-in, allowing you to deploy your application [**anywhere, even to the edge**](/docs/getting-started/deployment).
+
+## Automation and Conventions
+
+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.
+
+::list{type=success}
+- **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.
+- **Code splitting:** Nuxt automatically splits your code into smaller chunks, which can help reduce the initial load time of your application.
+- **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.
+- **Auto-imports:** write Vue composables and components in their respectives directories and use them without having to import them with the benefits of tree-shaking and optimised JS bundles.
+- **Data-fetching utilities:** Nuxt provides composables to handle SSR-compatible data fetching as well as different strategies.
+- **Zero-config TypeScript support:** write type-safe code without having to learn TypeScript with our auto-generated types and `tsconfig.json`
+- **Configured build tools:** we use [Vite](https://vitejs.dev) by default to support hot module replacement (HMR) in development and bundling your code for production with best-practices baked-in.
 ::
 
-::card-item{ .mt-4 }
+Nuxt takes care of these and provides both frontend and backend functionality so you can focus on what matters: **creating your web application**.
+
+## Server-Side Rendering
+
+Nuxt comes with built-in server-side rendering (SSR) capabilities by default, without having to configure a server yourself, which has many benefits for web applications:
+
+::list{type=success}
+- **Faster initial page load time:** Nuxt sends a fully rendered HTML page to the browser, which can be displayed immediately. This can provide a faster perceived page load time and a better user experience (UX), especially on slower networks or devices.
+- **Improved SEO:** search engines can better index SSR pages because the HTML content is available immediately, rather than requiring JavaScript to render the content on the client-side.
+- **Better performance on low-powered devices:** it reduces the amount of JavaScript that needs to be downloaded and executed on the client-side, which can be beneficial for low-powered devices that may struggle with processing heavy JavaScript applications.
+- **Better accessibility:** the content is immediately available on the initial page load, improving accessibility for users who rely on screen readers or other assistive technologies.
+- **Easier caching:** pages can be cached on the server-side, which can further improve performance by reducing the amount of time it takes to generate and send the content to the client.
+::
+
+Overall, server-side rendering can provide a faster and more efficient user experience, as well as improve search engine optimization and accessibility.
+
+As Nuxt is a versatile framework, it gives you the possibility to statically render your whole application to a static hosting with `nuxt generate`,
+disable SSR globally with the `ssr: false` option or leverage hybrid rendering by setting up the `routeRules` option.
+
+::alert{type="info"}
+Read more about the [Nuxt rendering modes](/docs/guide/concepts/rendering).
+::
+
+### Server engine
+
+The Nuxt server engine [Nitro](https://nitro.unjs.io) unlocks new full-stack capabilities.
+
+In development, it uses Rollup and Node.js workers for your server code and context isolation. It also generates your server API by reading files in `server/api/` and server middleware from `server/middleware/`.
+
+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](/docs/guide/concepts/server-engine).
+::
+
+### Production-ready
+
+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](/docs/getting-started/deployment).
+::
+
+### Modular
+
+A module system allows to extend Nuxt with custom features and integrations with third-party services.
+
+::alert{type="info"}
+Discover more about [modules](/docs/guide/concepts/modules).
+::
+
+### Architecture
+
+Nuxt is composed of different [core packages](https://github.com/nuxt/nuxt/tree/main/packages):
+
+::list{type=info}
+- Core Engine: [nuxt](https://github.com/nuxt/nuxt/tree/main/packages/nuxt)
+- Bundlers: [@nuxt/vite-builder](https://github.com/nuxt/nuxt/tree/main/packages/vite) and [@nuxt/webpack-builder](https://github.com/nuxt/nuxt/tree/main/packages/webpack)
+- Command line interface: [nuxi](https://github.com/nuxt/nuxt/tree/main/packages/nuxi)
+- Server engine: [nitro](https://github.com/unjs/nitro)
+- Development kit: [@nuxt/kit](https://github.com/nuxt/nuxt/tree/main/packages/kit)
+- Nuxt 2 Bridge: [@nuxt/bridge](https://github.com/nuxt/bridge)
+::
+
+We recommend reading each concept to have a full vision of Nuxt capabilities and the scope of each package.
+
+::card-list
 ---
-is: 'div'
-gradientBorder: false
-descriptionClass: 'w-full sm:w-2/3'
-buttonsWrapperClass: 'pr-[100px] sm:pr-0'
-backgroundImage:
-  path: '/assets/docs/getting-started/views/getting-started'
-  width: '100'
-  height: '100'
-  format: 'png'
-buttons:
-  - label: 'Get started'
-    size: 'sm'
-    variant: 'primary-gradient'
-    to: '/docs/getting-started/introduction'
-  - label: 'Explore Examples'
-    size: 'sm'
-    variant: 'secondary'
-    to: '/docs/examples/essentials/hello-world'
+cardListClass: 'grid grid-cols-1 gap-y-4'
 ---
-#title
-Getting Started
-#description
-Start by learning Nuxt core features, from installation to deployment.
-::
-
-
-
-::docs-landing-section
-#title
-Guide
-#description
-From an idea to a masterpiece, guides take you on the path to becoming a Nuxter.
-#extra
-  ::card-list
-  :::card-item
-  ---
-  gradientBorder: false
-  headerClass: 'justify-start px-4 pt-4 sm:px-6'
-  image:
-    path: '/assets/docs/getting-started/views/docs-landing/key-concepts'
-    width: '52'
-    height: '58'
-    format: 'svg'
-  contentClass: 'gap-y-2'
-  to: '/docs/guide/concepts/auto-imports'
-  ---
-  #title
-  Key Concepts
-  #description
-  Get an overview of the concepts that drive the Nuxt experience.
-  :::
-  :::card-item
-  ---
-  gradientBorder: false
-  headerClass: 'justify-start px-4 pt-4 sm:px-6'
-  image:
-    path: '/assets/docs/getting-started/views/docs-landing/directory-structure'
-    width: '52'
-    height: '58'
-    format: 'svg'
-  contentClass: 'gap-y-2'
-  to: '/docs/guide/directory-structure/nuxt'
-  ---
-  #title
-  Directory Structure
-  #description
-  Navigate Nuxt directory structure with this handy guide.
-  :::
-  :::card-item
-  ---
-  gradientBorder: false
-  headerClass: 'justify-start px-4 pt-4 sm:px-6'
-  image:
-    path: '/assets/docs/getting-started/views/docs-landing/going-further'
-    width: '52'
-    height: '58'
-    format: 'svg'
-  contentClass: 'gap-y-2'
-  to: '/docs/guide/going-further/internals'
-  ---
-  #title
-  Going further
-  #description
-  Deep dive into Nuxt internals to master all the features.
-  :::
-  ::
-::
-
-::docs-landing-section
-#title
-API
-#description
-Every Nuxt components, composables and utilities, in details.
-#extra
-  ::card-list
-  :::card-item
-  ---
-  gradientBorder: false
-  headerClass: 'justify-start px-4 pt-4 sm:px-6'
-  image:
-    path: '/assets/docs/getting-started/views/docs-landing/composables'
-    width: '52'
-    height: '58'
-    format: 'svg'
-  contentClass: 'gap-y-2'
-  to: '/docs/api/composables/use-app-config'
-  ---
-  #title
-  Composables
-  #description
-  From data fetching to error handling, get familiar with Nuxt built-in composables.
-  :::
-  :::card-item
-  ---
-  gradientBorder: false
-  headerClass: 'justify-start px-4 pt-4 sm:px-6'
-  image:
-    path: '/assets/docs/getting-started/views/docs-landing/components'
-    width: '52'
-    height: '58'
-    format: 'svg'
-  contentClass: 'gap-y-2'
-  to: '/docs/api/components/client-only'
-  ---
-  #title
-  Components
-  #description
-  Nuxt components, auto-imported and ready to use in your application.
-  :::
-  :::card-item
-  ---
-  gradientBorder: false
-  headerClass: 'justify-start px-4 pt-4 sm:px-6'
-  image:
-    path: '/assets/docs/getting-started/views/docs-landing/utils'
-    width: '52'
-    height: '58'
-    format: 'svg'
-  contentClass: 'gap-y-2'
-  to: '/docs/api/utils/dollarfetch'
-  ---
-  #title
-  Utils
-  #description
-  Use utility functions to get fine-grained control over your app behavior.
-  :::
-  :::card-item
-  ---
-  gradientBorder: false
-  headerClass: 'justify-start px-4 pt-4 sm:px-6'
-  image:
-    path: '/assets/docs/getting-started/views/docs-landing/advanced'
-    width: '52'
-    height: '58'
-    format: 'svg'
-  contentClass: 'gap-y-2'
-  to: '/docs/api/advanced/hooks'
-  ---
-  #title
-  Advanced
-  #description
-  Learn about lifecycle hooks and Kit utilities in the advanced section.
-  :::
-  :::card-item
-  ---
-  gradientBorder: false
-  headerClass: 'justify-start px-4 pt-4 sm:px-6'
-  image:
-    path: '/assets/docs/getting-started/views/docs-landing/commands'
-    width: '52'
-    height: '58'
-    format: 'svg'
-  contentClass: 'gap-y-2'
-  to: '/docs/api/commands/add'
-  ---
-  #title
-  Commands
-  #description
-  Meet Nuxi, Nuxt 3 command-line tool. The essential companion in your journey.
-  :::
-  :::card-item
-  ---
-  gradientBorder: false
-  headerClass: 'justify-start px-4 pt-4 sm:px-6'
-  image:
-    path: '/assets/docs/getting-started/views/docs-landing/configuration'
-    width: '52'
-    height: '58'
-    format: 'svg'
-  contentClass: 'gap-y-2'
-  to: '/docs/api/configuration/nuxt-config'
-  ---
-  #title
-  Configuration
-  #description
-  Master the Nuxt config file to customize the framework behavior.
-  :::
-  ::
+  :::card-item
+  ---
+  gradientBorder: false
+  backgroundImage:
+    path: '/assets/docs/getting-started/views/are-you-nuxt'
+    width: '72px'
+    height: '92px'
+    format: 'png'
+  titleClass: 'text-5xl font-semibold u-text-gray-900 pb-2'
+  descriptionClass: 'md:mr-[64px] w-[90%]'
+  ---
+  #title
+  Are you Nuxt?
+  #description
+  Nuxt is the backbone of your Vue.js project, giving structure to build your project with confidence while keeping flexibility.
+<br>
+<br>
+  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.
+<br>
+<br>
+  Ready to try? Head over to the [Installation section](/docs/getting-started/installation).
+  :::
+
+  :::card-item
+  ---
+  gradientBorder: false
+  backgroundImage:
+    path: '/assets/docs/getting-started/views/contribute'
+    width: '72'
+    height: '92'
+    format: 'png'
+  titleClass: 'text-2xl u-text-gray-900 font-semibold'
+  descriptionClass: 'md:mr-[64px]'
+  ---
+  #title
+  Contribute
+  #description
+  Do you want to get involved in the evolution of Nuxt?
+  <br>
+  Follow the [contribution guide](/docs/community/contribution).
+  :::
 ::

docs/0.prologue/_dir.yml

@@ -1,4 +1,4 @@
-title: Key Concepts
+title: Prologue
 titleTemplate: '%s · Nuxt Concepts'
-navigation.icon: uil:award-alt
+navigation.icon: heroicons:light-bulb
 image: '/socials/key-concepts.jpg'

docs/1.getting-started/1.introduction.md

@@ -1,139 +0,0 @@
----
-navigation.icon: uil:info-circle
-description: Nuxt's goal is to make web development intuitive and performant with a great Developer Experience in mind.
----
-
-# Introduction
-
-Nuxt is a free and [open-source framework](https://github.com/nuxt/nuxt) with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with [Vue.js](https://vuejs.org).
-
-We made everything so you can start writing `.vue` files from the beginning while enjoying hot module replacement in development and a performant application in production with server-side rendering by default.
-
-Nuxt has no vendor lock-in, allowing you to deploy your application [**anywhere, even to the edge**](/docs/getting-started/deployment).
-
-## Automation and Conventions
-
-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.
-
-::list{type=success}
-- **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.
-- **Code splitting:** Nuxt automatically splits your code into smaller chunks, which can help reduce the initial load time of your application.
-- **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.
-- **Auto-imports:** write Vue composables and components in their respectives directories and use them without having to import them with the benefits of tree-shaking and optimised JS bundles.
-- **Data-fetching utilities:** Nuxt provides composables to handle SSR-compatible data fetching as well as different strategies.
-- **Zero-config TypeScript support:** write type-safe code without having to learn TypeScript with our auto-generated types and `tsconfig.json`
-- **Configured build tools:** we use [Vite](https://vitejs.dev) by default to support hot module replacement (HMR) in development and bundling your code for production with best-practices baked-in.
-::
-
-Nuxt takes care of these and provides both frontend and backend functionality so you can focus on what matters: **creating your web application**.
-
-## Server-Side Rendering
-
-Nuxt comes with built-in server-side rendering (SSR) capabilities by default, without having to configure a server yourself, which has many benefits for web applications:
-
-::list{type=success}
-- **Faster initial page load time:** Nuxt sends a fully rendered HTML page to the browser, which can be displayed immediately. This can provide a faster perceived page load time and a better user experience (UX), especially on slower networks or devices.
-- **Improved SEO:** search engines can better index SSR pages because the HTML content is available immediately, rather than requiring JavaScript to render the content on the client-side.
-- **Better performance on low-powered devices:** it reduces the amount of JavaScript that needs to be downloaded and executed on the client-side, which can be beneficial for low-powered devices that may struggle with processing heavy JavaScript applications.
-- **Better accessibility:** the content is immediately available on the initial page load, improving accessibility for users who rely on screen readers or other assistive technologies.
-- **Easier caching:** pages can be cached on the server-side, which can further improve performance by reducing the amount of time it takes to generate and send the content to the client.
-::
-
-Overall, server-side rendering can provide a faster and more efficient user experience, as well as improve search engine optimization and accessibility.
-
-As Nuxt is a versatile framework, it gives you the possibility to statically render your whole application to a static hosting with `nuxt generate`,
-disable SSR globally with the `ssr: false` option or leverage hybrid rendering by setting up the `routeRules` option.
-
-::alert{type="info"}
-Read more about the [Nuxt rendering modes](/docs/guide/concepts/rendering).
-::
-
-### Server engine
-
-The Nuxt server engine [Nitro](https://nitro.unjs.io) unlocks new full-stack capabilities.
-
-In development, it uses Rollup and Node.js workers for your server code and context isolation. It also generates your server API by reading files in `server/api/` and server middleware from `server/middleware/`.
-
-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](/docs/guide/concepts/server-engine).
-::
-
-### Production-ready
-
-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](/docs/getting-started/deployment).
-::
-
-### Modular
-
-A module system allows to extend Nuxt with custom features and integrations with third-party services.
-
-::alert{type="info"}
-Discover more about [modules](/docs/guide/concepts/modules).
-::
-
-### Architecture
-
-Nuxt is composed of different [core packages](https://github.com/nuxt/nuxt/tree/main/packages):
-
-::list{type=info}
-- Core Engine: [nuxt](https://github.com/nuxt/nuxt/tree/main/packages/nuxt)
-- Bundlers: [@nuxt/vite-builder](https://github.com/nuxt/nuxt/tree/main/packages/vite) and [@nuxt/webpack-builder](https://github.com/nuxt/nuxt/tree/main/packages/webpack)
-- Command line interface: [nuxi](https://github.com/nuxt/nuxt/tree/main/packages/nuxi)
-- Server engine: [nitro](https://github.com/unjs/nitro)
-- Development kit: [@nuxt/kit](https://github.com/nuxt/nuxt/tree/main/packages/kit)
-- Nuxt 2 Bridge: [@nuxt/bridge](https://github.com/nuxt/bridge)
-::
-
-We recommend reading each concept to have a full vision of Nuxt capabilities and the scope of each package.
-
-::card-list
----
-cardListClass: 'grid grid-cols-1 gap-y-4'
----
-  :::card-item
-  ---
-  gradientBorder: false
-  backgroundImage:
-    path: '/assets/docs/getting-started/views/are-you-nuxt'
-    width: '72px'
-    height: '92px'
-    format: 'png'
-  titleClass: 'text-5xl font-semibold u-text-gray-900 pb-2'
-  descriptionClass: 'md:mr-[64px] w-[90%]'
-  ---
-  #title
-  Are you Nuxt?
-  #description
-  Nuxt is the backbone of your Vue.js project, giving structure to build your project with confidence while keeping flexibility.
-<br>
-<br>
-  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.
-<br>
-<br>
-  Ready to try? Head over to the [Installation section](/docs/getting-started/installation).
-  :::
-
-  :::card-item
-  ---
-  gradientBorder: false
-  backgroundImage:
-    path: '/assets/docs/getting-started/views/contribute'
-    width: '72'
-    height: '92'
-    format: 'png'
-  titleClass: 'text-2xl u-text-gray-900 font-semibold'
-  descriptionClass: 'md:mr-[64px]'
-  ---
-  #title
-  Contribute
-  #description
-  Do you want to get involved in the evolution of Nuxt?
-  <br>
-  Follow the [contribution guide](/docs/community/contribution).
-  :::
-::

docs/1.getting-started/_dir.yml

@@ -1,3 +1,4 @@
 title: Get Started
 titleTemplate: '%s · Get Started with Nuxt'
 image: '/socials/get-started.jpg'
+navigation.icon: heroicons:rocket-launch

docs/2.directory-structure/0.index.md

@@ -0,0 +1,5 @@
+---
+navigation.title: Introduction
+---
+
+# Directory Structure

docs/2.directory-structure/0.nuxt.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: ".nuxt"
+title: ".nuxt/"
 description: "Nuxt uses the .nuxt/ directory in development to generate your Vue application."
 head.title: ".nuxt/"
 ---

docs/2.directory-structure/0.output.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: ".output"
+title: ".output/"
 description: "Nuxt creates the .output/ directory when building your application for production."
 head.title: ".output/"
 ---

docs/2.directory-structure/1.assets.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: "assets"
+title: "assets/"
 description: "The assets/ directory is used to add all the website's assets that the build tool will process."
 head.title: "assets/"
 ---

docs/2.directory-structure/1.components.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: "components"
+title: "components/"
 description: "The components/ directory is where you put all your Vue components."
 head.title: "components/"
 ---

docs/2.directory-structure/1.composables.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: 'composables'
+title: 'composables/'
 head.title: 'composables/'
 description: Use the composables/ directory to auto-import your Vue composables into your application.
 ---

docs/2.directory-structure/1.content.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: 'content'
+title: 'content/'
 head.title: 'content/'
 description: The Content module reads the content/ directory to create a file-based CMS for your application.
 ---

docs/2.directory-structure/1.layouts.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: "layouts"
+title: "layouts/"
 description: "Nuxt provides a layouts framework to extract common UI patterns into reusable layouts."
 head.title: "layouts/"
 ---

docs/2.directory-structure/1.middleware.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: "middleware"
+title: "middleware/"
 description: "Nuxt provides middleware to run code before navigating to a particular route."
 head.title: "middleware/"
 ---

docs/2.directory-structure/1.modules.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: 'modules'
+title: 'modules/'
 head.title: 'modules/'
 description: Use the modules/ directory to automatically register local modules within your application.
 ---

docs/2.directory-structure/1.node_modules.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: "node_modules"
+title: "node_modules/"
 description: "The package manager stores the dependencies of your project in the node_modules/ directory."
 head.title: "node_modules/"
 ---

docs/2.directory-structure/1.pages.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: "pages"
+title: "pages/"
 description: "Nuxt provides a file-based routing to create routes within your web application."
 head.title: "pages/"
 ---

docs/2.directory-structure/1.plugins.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: "plugins"
+title: "plugins/"
 description: "Nuxt reads the files in your plugins directory and loads them at the creation of the Vue application."
 head.title: "plugins/"
 ---

docs/2.directory-structure/1.public.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: "public"
+title: "public/"
 description: "The public/ directory is used to serve your website's static assets."
 head.title: "public/"
 ---

docs/2.directory-structure/1.server.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: server
+title: 'server/'
 head.title: 'server/'
 description: The server/ directory is used to register API and server handlers to your application.
 ---

docs/2.directory-structure/1.utils.md

@@ -1,6 +1,5 @@
 ---
-navigation.icon: IconDirectory
-title: 'utils'
+title: 'utils/'
 head.title: 'utils/'
 description: Use the utils/ directory to auto-import your utility functions throughout your application.
 ---

docs/2.directory-structure/2.env.md

@@ -1,5 +1,4 @@
 ---
-navigation.icon: IconFile
 title: ".env"
 description: "A .env file specifies your build/dev-time environment variables."
 head.title: ".env"

docs/2.directory-structure/2.gitignore.md

@@ -1,5 +1,4 @@
 ---
-navigation.icon: IconFile
 title: ".gitignore"
 description: "A .gitignore file specifies intentionally untracked files that git should ignore."
 head.title: ".gitignore"

docs/2.directory-structure/2.nuxtignore.md

@@ -1,5 +1,4 @@
 ---
-navigation.icon: IconFile
 title: .nuxtignore
 head.title: '.nuxtignore'
 description: The .nuxtignore file lets Nuxt ignore files in your project’s root directory during the build phase.

docs/2.directory-structure/3.app-config.md

@@ -1,5 +1,4 @@
 ---
-navigation.icon: IconFile
 title: app.config.ts
 head.title: 'app.config.ts'
 description: Nuxt 3 provides the app.config file to expose reactive configuration within your application.

docs/2.directory-structure/3.app.md

@@ -1,5 +1,4 @@
 ---
-navigation.icon: IconFile
 title: "app.vue"
 description: "The app.vue file is the main component in your Nuxt 3 applications."
 head.title: "app.vue"

docs/2.directory-structure/3.nuxt.config.md

@@ -1,5 +1,4 @@
 ---
-navigation.icon: IconFile
 title: "nuxt.config.ts"
 description: "Nuxt can be easily configured with a single nuxt.config file."
 head.title: "nuxt.config.ts"

docs/2.directory-structure/3.package.md

@@ -1,5 +1,4 @@
 ---
-navigation.icon: IconFile
 title: package.json
 head.title: package.json
 description: The package.json file contains all the dependencies and scripts for your application.

docs/2.directory-structure/3.tsconfig.md

@@ -1,5 +1,4 @@
 ---
-navigation.icon: IconFile
 title: "tsconfig.json"
 description: "Nuxt generates a .nuxt/tsconfig.json file with sensible defaults and your aliases."
 head.title: "tsconfig.json"

docs/2.directory-structure/_dir.yml

@@ -1,4 +1,4 @@
 title: Directory Structure
 titleTemplate: '%s · Nuxt Directory Structure'
-navigation.icon: uil:folder-open
+navigation.icon: heroicons:folder-open
 image: '/socials/directory-structure.jpg'

docs/2.guide/2.directory-structure/index.md

@@ -1,4 +0,0 @@
----
-navigation: false
-redirect: /guide/directory-structure/nuxt
----

docs/2.guide/_dir.yml

@@ -1 +0,0 @@
-image: '/socials/guide.jpg'

docs/2.guide/index.md

@@ -1,4 +0,0 @@
----
-navigation: false
-redirect: /guide/concepts/auto-imports
----

docs/3.api/_dir.yml

@@ -1,2 +0,0 @@
-title: API
-image: '/socials/api.jpg'

docs/3.modules/0.index.md

@@ -1,4 +1,5 @@
 ---
+navigation.title: 'Introduction'
 description: "Nuxt provides a module system to extend the framework core and simplify integrations."
 ---
 

docs/3.modules/_dir.yml

@@ -0,0 +1,2 @@
+navigation.icon: heroicons:puzzle-piece
+title: Modules

docs/3.modules/adapters.md

@@ -0,0 +1 @@
+Adapter for companies/SAAS, Electron, Ionic, Adsense

docs/3.modules/ecosystem.md

@@ -0,0 +1 @@
+Build by the Vite/Vue community to help development (Pinia, Regexp, etc.) as well as open source connectors

docs/3.modules/forms.md

@@ -0,0 +1 @@
+Search + Formkit

docs/3.modules/seo.md

@@ -0,0 +1,3 @@
+---
+navigation.title: SEO
+---

docs/4.examples/_dir.yml

@@ -1 +1,2 @@
 image: '/socials/examples.jpg'
+navigation.icon: heroicons:code-bracket-square