docs: update structure (#7047)

Co-authored-by: Pooya Parsa <pooya@pi0.io>

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

@@ -42,7 +42,7 @@ Nuxt is the backbone of your Vue.js project, giving structure to build your proj
 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.
 
 ::alert{type=info icon=👍}
-Ready to try? Head over to the [Installation section](/getting-started/quick-start).
+Ready to try? Head over to the [Installation section](/getting-started/installation).
 ::
 
 ### Are You *Courageously* Nuxt?

docs/content/1.getting-started/2.installation.md

@@ -1,4 +1,4 @@
-# Quick Start
+# Installation
 
 Starting fresh? Getting started with Nuxt 3 is straightforward!
 
@@ -104,4 +104,3 @@ Well done! A browser window should automatically open for <http://localhost:3000
 Now that you've created your Nuxt 3 project, you are ready to start building your application.
 
 * Learn about the framework [concepts](/guide/concepts)
-* Learn more about the framework [features](/guide/features)

docs/content/1.getting-started/5.seo-meta.md

@@ -1,4 +1,4 @@
-# Head Management
+# SEO and Meta
 
 Out-of-the-box, Nuxt provides good default values for `charset` and `viewport` meta tags, but you can override these if you need to, as well as customize other meta tags for your site in several different ways.
 

docs/content/1.getting-started/index.md

@@ -3,5 +3,5 @@ title: Get Started
 layout.aside: true
 layout.asideClass: ''
 navigation.exclusive: true
-navigation.redirect: /getting-started/quick-start
+navigation.redirect: /getting-started/introduction
 ---

docs/content/2.guide/1.concepts/1.auto-imports.md

@@ -15,7 +15,7 @@ Auto imports don't currently work within the [server directory](/guide/directory
 
 ## Nuxt Auto-imports
 
-Nuxt auto-imports functions and composables to perform [data fetching](/guide/features/data-fetching), get access to the [app context](/api/composables/use-nuxt-app) and [runtime config](/guide/features/runtime-config), manage [state](/guide/features/state-management) or define components and plugins.
+Nuxt auto-imports functions and composables to perform [data fetching](/getting-started/data-fetching), get access to the [app context](/api/composables/use-nuxt-app) and [runtime config](/guide/going-further/runtime-config), manage [state](/getting-started/state-management) or define components and plugins.
 
 ```vue
 <script setup>

docs/content/2.guide/1.concepts/4.server-engine.md

@@ -1,8 +1,7 @@
 # Server Engine
 
-Nuxt 3 is powered by a new server engine, code-named "Nitro".
+Nuxt 3 is powered by a new server engine, [Nitro](https://nitro.unjs.io/).
 
-This engine has many benefits:
 ::list
 
 - Cross-platform support for Node.js, Browsers, service-workers and more.

docs/content/2.guide/1.concepts/index.md

@@ -1,7 +1,7 @@
 ---
-title: Concepts
+title: Key Concepts
 layout.aside: true
 layout.asideClass: ''
-navigation.redirect: /guide/concepts/introduction
+navigation.redirect: /guide/concepts/auto-imports
 # navigation.collapse: true
 ---

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

@@ -16,4 +16,4 @@ The directory usually contains the following types of files:
 
 If you want to serve assets from the server, we recommend taking a look at the [`public/`](/guide/directory-structure/public) directory.
 
-::ReadMore{link="/guide/features/assets"}
+::ReadMore{link="/getting-started/assets"}

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

@@ -53,9 +53,6 @@ Unlike navigation guards in [the vue-router docs](https://router.vuejs.org/guide
 ::ReadMore{link="/api/utils/abort-navigation"}
 ::
 
-::ReadMore{link="/guide/features/routing"}
-::
-
 ::alert{type=warning}
 We recommend using the helper functions above for performing redirects or stopping navigation. Other possible return values described in [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards) may work but there may be breaking changes in future.
 ::

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

@@ -1,4 +1,10 @@
-# Server Routes
+---
+icon: IconDirectory
+title: server
+head.title: Server Directory
+---
+
+# Server Directory
 
 Nuxt automatically scans files inside the `~/server/api`, `~/server/routes`, and `~/server/middleware` directories to register API and server handlers with HMR support.
 
@@ -290,3 +296,5 @@ Create a new file in `app.vue`:
   const { data: resData } = await useFetch('/api/test')
 </script>
 ```
+
+::ReadMore{link="/guide/directory-structure/server"}

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

@@ -1,7 +1,21 @@
-# App Config
+---
+icon: IconFile
+title: app.config.ts
+head.title: Nuxt App Config
+---
+
+# App Config File
 
 Nuxt 3 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).
 
+You can easily provide runtime app configuration using `app.config.ts` file. It can have either of `.ts`, `.js`, or `.mjs` extensions.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  foo: 'bar'
+})
+```
+
 ::alert{type=warning}
 Do not put any secret values inside `app.config` file. It is exposed to the user client bundle.
 ::

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

@@ -1,9 +1,9 @@
 ---
 icon: IconFile
 title: package.json
-head.title: Package File
+head.title: Package.json File
 ---
 
-# Package File
+# Package.json File
 
 The `package.json` file contains all the dependencies and scripts for your application ([learn more](https://docs.npmjs.com/cli/v7/configuring-npm/package-json)).

docs/content/2.guide/2.features/2.routing.md

@@ -1,10 +0,0 @@
-# Routing
-
-::NeedContribution
-::
-
-::ReadMore{link="/guide/directory-structure/pages"}
-::
-
-::ReadMore{link="/guide/directory-structure/middleware"}
-::

docs/content/2.guide/2.features/8.plugins.md

@@ -1,9 +0,0 @@
-# Plugins
-
-::NeedContribution
-::
-
-::ReadMore{link="/guide/directory-structure/plugins"}
-::
-
-:LinkExample{link="/examples/app/plugins"}

docs/content/2.guide/2.features/index.md

@@ -1,6 +0,0 @@
----
-title: Features
-layout.aside: true
-layout.asideClass: ''
-navigation.redirect: /guide/features/views
----

docs/content/2.guide/3.directory-structure/13.server.md

@@ -1,9 +0,0 @@
----
-icon: IconDirectory
-title: server
-head.title: Server Directory
----
-
-# Server Directory
-
-::ReadMore{link="/guide/features/server-routes"}

docs/content/2.guide/3.directory-structure/16.app.config.md

@@ -1,21 +0,0 @@
----
-icon: IconFile
-title: app.config.ts
-head.title: Nuxt App Config
----
-
-# Nuxt App Config
-
-You can easily provide runtime app configuration using `app.config.ts` file. It can have either of `.ts`, `.js`, or `.mjs` extensions.
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  foo: 'bar'
-})
-```
-
-::alert{type=warning}
-Do not put any secret values inside `app.config` file. It is exposed to the user client bundle.
-::
-
-::ReadMore{link="/guide/features/app-config"}

docs/content/2.guide/index.md

@@ -2,5 +2,5 @@
 title: Guide
 layout.aside: true
 navigation.exclusive: true
-navigation.redirect: /guide/concepts/introduction
+navigation.redirect: /guide/concepts/auto-imports
 ---

docs/content/3.api/1.composables/update-app-config.md

@@ -1,6 +1,6 @@
 # `updateAppConfig`
 
-Updates [app config](/guide/features/app-config) using deep assignment. Existing (nested) properties will be preserved.
+Updates [app config](/guide/directory-structure/app.config) using deep assignment. Existing (nested) properties will be preserved.
 
 **Usage:**
 
@@ -14,4 +14,4 @@ updateAppConfig(newAppConfig)
 console.log(appConfig) // { foo: 'baz' }
 ```
 
-::ReadMore{link="/guide/features/app-config"}
+::ReadMore{link="/guide/directory-structure/app.config"}

docs/content/3.api/1.composables/use-app-config.md

@@ -10,4 +10,4 @@ const appConfig = useAppConfig()
 console.log(appConfig)
 ```
 
-::ReadMore{link="/guide/features/app-config"}
+::ReadMore{link="/guide/directory-structure/app.config"}

docs/content/3.api/1.composables/use-async-data.md

@@ -79,5 +79,5 @@ const { data, pending, error, refresh } = await useAsyncData(
 )
 ```
 
-::ReadMore{link="/guide/features/data-fetching"}
+::ReadMore{link="/getting-started/data-fetching"}
 ::

docs/content/3.api/1.composables/use-error.md

@@ -10,5 +10,5 @@ const error = useError()
 
 `useError` sets an error in the state and creates a reactive and SSR-friendly global Nuxt error across components.
 
-::ReadMore{link="/guide/features/error-handling"}
+::ReadMore{link="/getting-started/error-handling"}
 ::

docs/content/3.api/1.composables/use-fetch.md

@@ -102,6 +102,6 @@ const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
 })
 ```
 
-:ReadMore{link="/guide/features/data-fetching"}
+:ReadMore{link="/getting-started/data-fetching"}
 
 :LinkExample{link="/examples/composables/use-fetch"}

docs/content/3.api/1.composables/use-hydration.md

@@ -1,6 +1,6 @@
 # `useHydration`
 
-::ReadMore{link="/guide/features/data-fetching"}
+::ReadMore{link="/getting-started/data-fetching"}
 ::
 
 ::NeedContribution

docs/content/3.api/1.composables/use-lazy-async-data.md

@@ -32,4 +32,4 @@ watch(count, (newCount) => {
 </script>
 ```
 
-:ReadMore{link="/guide/features/data-fetching#uselazyasyncdata"}
+:ReadMore{link="/getting-started/data-fetching#uselazyasyncdata"}

docs/content/3.api/1.composables/use-lazy-fetch.md

@@ -36,4 +36,4 @@ watch(posts, (newPosts) => {
 </script>
 ```
 
-:ReadMore{link="/guide/features/data-fetching#uselazyfetch"}
+:ReadMore{link="/getting-started/data-fetching#uselazyfetch"}

docs/content/3.api/1.composables/use-route.md

@@ -36,6 +36,3 @@ Apart from dynamic parameters and query parameters, `useRoute()` also provides t
 
 ::ReadMore{link="https://router.vuejs.org/api/interfaces/RouteLocationNormalizedLoaded.html"}
 ::
-
-::ReadMore{link="/guide/features/routing"}
-::

docs/content/3.api/1.composables/use-router.md

@@ -57,6 +57,3 @@ However, Nuxt has a concept of **route middleware** that simplifies the implemen
 ## Universal Router Instance
 
 If you do not have a `pages/` folder, then `useRouter` will return a universal router instance with similar helper methods, but be aware that not all features may be supported or behave in exactly the same way as with `vue-router`.
-
-::ReadMore{link="/guide/features/routing"}
-::

docs/content/3.api/1.composables/use-state.md

@@ -13,5 +13,5 @@ useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>
 Because the data inside `useState` will be serialized to JSON, it is important that it does not contain anything that cannot be serialized, such as classes, functions or symbols.
 ::
 
-::ReadMore{link="/guide/features/state-management"}
+::ReadMore{link="/getting-started/state-management"}
 ::

docs/content/3.api/2.components/4.nuxt-link.md

@@ -1,8 +1,5 @@
 # `<NuxtLink>`
 
-::ReadMore{link="/guide/features/routing"}
-::
-
 Nuxt provides `<NuxtLink>` component to handle any kind of links within your application.
 
 `<NuxtLink>` is a drop-in replacement for both Vue Router's `<RouterLink>` component and HTML's `<a>` tag. It intelligently determines whether the link is _internal_ or _external_ and renders it accordingly with available optimizations (prefetching, default attributes, etc.)

docs/content/3.api/2.components/4.nuxt-loading-indicator.md

@@ -1,8 +1,5 @@
 # `<NuxtLoadingIndicator>`
 
-::ReadMore{link="/guide/features/routing"}
-::
-
 Nuxt provides `<NuxtLoadingIndicator>` to display a progress bar on page navigation.
 
 ## Examples

docs/content/3.api/2.components/5.nuxt-error-boundary.md

@@ -29,5 +29,5 @@ Nuxt provides the `<NuxtErrorBoundary>` component to handle client-side errors h
     </template>
   ```
 
-::ReadMore{link="/guide/features/error-handling"}
+::ReadMore{link="/getting-started/error-handling"}
 ::

docs/content/3.api/2.components/7.teleports.md

@@ -1,4 +1,4 @@
-# Teleports
+# `<Teleport>`
 
 Vue 3 provides the [`<Teleport>` component](https://vuejs.org/guide/built-ins/teleport.html) which allows content to be rendered elsewhere in the DOM, outside of the Vue application.
 

docs/content/3.api/3.utils/$fetch.md

@@ -1,6 +1,6 @@
 # `$fetch`
 
-::ReadMore{link="/guide/features/data-fetching"}
+::ReadMore{link="/getting-started/data-fetching"}
 ::
 
 Nuxt uses [ohmyfetch](https://github.com/unjs/ohmyfetch) to expose globally the `$fetch` helper for making HTTP requests within your Vue app or API routes.

docs/content/3.api/3.utils/abort-navigation.md

@@ -63,6 +63,3 @@ export default defineNuxtRouteMiddleware((to, from) => {
   }
 })
 ```
-
-::ReadMore{link="/guide/features/routing"}
-::

docs/content/3.api/3.utils/add-route-middleware.md

@@ -71,6 +71,3 @@ export default defineNuxtPlugin(() => {
   )
 })
 ```
-
-::ReadMore{link="/guide/features/routing"}
-::

docs/content/3.api/3.utils/clear-error.md

@@ -20,5 +20,5 @@ clearError({ redirect: '/homepage' })
 
 Errors are set in state using [`useError()`](/api/composables/use-error). The `clearError` composable will reset this state and calls the `app:error:cleared` hook with the provided options.
 
-::ReadMore{link="/guide/features/error-handling"}
+::ReadMore{link="/getting-started/error-handling"}
 ::

docs/content/3.api/3.utils/create-error.md

@@ -40,5 +40,5 @@ export default eventHandler(() => {
 }
 ```
 
-::ReadMore{link="/guide/features/error-handling"}
+::ReadMore{link="/getting-started/error-handling"}
 ::

docs/content/3.api/3.utils/define-nuxt-route-middleware.md

@@ -57,6 +57,3 @@ export default defineNuxtRouteMiddleware((to, from) => {
 ```
 
 Both [navigateTo](/api/utils/navigate-to) and [abortNavigation](/api/utils/abort-navigation) are globally available helper functions that you can use inside `defineNuxtRouteMiddleware`.
-
-::ReadMore{link="/guide/features/routing"}
-::

docs/content/3.api/3.utils/define-page-meta.md

@@ -147,6 +147,3 @@ You can define the layout that matches the layout's file name located (by defaul
   })
 </script>
 ```
-
-::ReadMore{link="/guide/features/routing"}
-::

docs/content/3.api/3.utils/refresh-nuxt-data.md

@@ -1,6 +1,6 @@
 # `refreshNuxtData`
 
-::ReadMore{link="/guide/features/data-fetching"}
+::ReadMore{link="/getting-started/data-fetching"}
 ::
 
 ```ts

docs/content/3.api/3.utils/show-error.md

@@ -17,5 +17,5 @@ The error is set in the state using [`useError()`](/api/composables/use-error) t
 
 `showError` calls the `app:error` hook.
 
-::ReadMore{link="/guide/features/error-handling"}
+::ReadMore{link="/getting-started/error-handling"}
 ::

docs/content/4.examples/0.essentials/hello-world.md

@@ -6,7 +6,7 @@ template: Example
 
 A minimal Nuxt 3 application only requires the `app.vue` and `nuxt.config.js` files.
 
-::ReadMore{link="/getting-started/quick-start"}
+::ReadMore{link="/getting-started/introduction"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/essentials/hello-world" file="app.vue"}

docs/content/4.examples/1.app/error-handling.md

@@ -6,7 +6,7 @@ template: Example
 
 This example shows how to handle errors in different contexts: pages, plugins, components and middleware.
 
-::ReadMore{link="/guide/features/error-handling"}
+::ReadMore{link="/getting-started/error-handling"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/app/error-handling" file="app.vue"}

docs/content/4.examples/1.app/teleport.md

@@ -8,7 +8,7 @@ Vue 3 provides the [`<Teleport>` component](https://vuejs.org/guide/built-ins/te
 
 This example shows how to use the `<Teleport>` with client-side and server-side rendering.
 
-::ReadMore{link="/guide/features/teleports"}
+::ReadMore{link="/api/components/teleports"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/app/teleport" file="app.vue"}

docs/content/4.examples/3.composables/use-async-data.md

@@ -13,7 +13,7 @@ Nuxt will automatically read files in the `~/server/api` directory to create API
 ::ReadMore{link="/api/composables/use-async-data"}
 ::
 
-::ReadMore{link="/guide/features/data-fetching"}
+::ReadMore{link="/getting-started/data-fetching"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-async-data" file="app.vue"}

docs/content/4.examples/3.composables/use-fetch.md

@@ -13,7 +13,7 @@ Nuxt will automatically read files in the `~/server/api` directory to create API
 ::ReadMore{link="/api/composables/use-fetch"}
 ::
 
-::ReadMore{link="/guide/features/data-fetching"}
+::ReadMore{link="/getting-started/data-fetching"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-fetch" file="app.vue"}

docs/content/4.examples/3.composables/use-head.md

@@ -13,7 +13,7 @@ Learn more about [meta tags](/guide/features/head-management#meta-components).
 ::ReadMore{link="/api/composables/use-head"}
 ::
 
-::ReadMore{link="/guide/features/head-management"}
+::ReadMore{link="/getting-started/head-management"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-head" file="app.vue"}

docs/content/4.examples/3.composables/use-state.md

@@ -13,7 +13,7 @@ Learn more about [useState](/api/composables/use-state).
 ::ReadMore{link="/api/composables/use-state"}
 ::
 
-::ReadMore{link="/guide/features/state-management"}
+::ReadMore{link="/getting-started/state-management"}
 ::
 
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/composables/use-state" file="app.vue"}

docs/content/4.examples/4.routing/universal-router.md

@@ -6,7 +6,4 @@ template: Example
 
 This example demonstrates Nuxt universal routing utilities without depending on `pages/` and `vue-router`.
 
-::ReadMore{link="/guide/features/routing"}
-::
-
 ::sandbox{repo="nuxt/framework" branch="main" dir="examples/routing/universal-router" file="app.vue"}