@nuxt/docs 0.0.0 → 3.17.0

package/3.api/1.components/4.nuxt-link.md

@@ -0,0 +1,322 @@
+---
+title: "<NuxtLink>"
+description: "Nuxt provides <NuxtLink> component to handle any kind of links within your application."
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-link.ts
+    size: xs
+---
+
+::note
+`<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.)
+::
+
+## Internal Routing
+
+In this example, we use `<NuxtLink>` component to link to another page of the application.
+
+::code-group
+```vue [pages/index.vue]
+<template>
+  <NuxtLink to="/about">About page</NuxtLink>
+</template>
+```
+
+```html [(Renders as) index.html]
+<!-- (Vue Router & Smart Prefetching) -->
+<a href="/about">About page</a>
+```
+::
+
+### Passing Params to Dynamic Routes
+
+In this example, we pass the `id` param to link to the route `~/pages/posts/[id].vue`.
+
+::code-group
+```vue [pages/index.vue]
+<template>
+  <NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">
+    Post 123
+  </NuxtLink>
+</template>
+```
+
+```html [(Renders as) index.html]
+<a href="/posts/123">Post 123</a>
+```
+::
+
+::tip
+Check out the Pages panel in Nuxt DevTools to see the route name and the params it might take.
+::
+
+### Handling Static File and Cross-App Links
+
+By default, `<NuxtLink>` uses Vue Router's client side navigation for relative route. When linking to static files in the `/public` directory or to another application hosted on the same domain, it might result in unexpected 404 errors because they are not part of the client routes. In such cases, you can use the `external` prop with `<NuxtLink>` to bypass Vue Router's internal routing mechanism.
+
+The `external` prop explicitly indicates that the link is external. `<NuxtLink>` will render the link as a standard HTML `<a>` tag. This ensures the link behaves correctly, bypassing Vue Router’s logic and directly pointing to the resource.
+
+#### Linking to Static Files
+
+For static files in the `/public` directory, such as PDFs or images, use the `external` prop to ensure the link resolves correctly.
+
+```vue [pages/index.vue]
+<template>
+  <NuxtLink to="/example-report.pdf" external>
+    Download Report
+  </NuxtLink>
+</template>
+```
+
+#### Linking to a Cross-App URL
+
+When pointing to a different application on the same domain, using the `external` prop ensures the correct behavior.
+
+```vue [pages/index.vue]
+<template>
+  <NuxtLink to="/another-app" external>
+    Go to Another App
+  </NuxtLink>
+</template>
+```
+
+Using the `external` prop or relying on automatic handling ensures proper navigation, avoids unexpected routing issues, and improves compatibility with static resources or cross-application scenarios.
+
+## External Routing
+
+In this example, we use `<NuxtLink>` component to link to a website.
+
+```vue [app.vue]
+<template>
+  <NuxtLink to="https://nuxtjs.org">
+    Nuxt website
+  </NuxtLink>
+  <!-- <a href="https://nuxtjs.org" rel="noopener noreferrer">...</a> -->
+</template>
+```
+
+## `rel` and `noRel` Attributes
+
+A `rel` attribute of `noopener noreferrer` is applied by default to links with a `target` attribute or to absolute links (e.g., links starting with `http://`, `https://`, or `//`).
+- `noopener` solves a [security bug](https://mathiasbynens.github.io/rel-noopener/) in older browsers.
+- `noreferrer` improves privacy for your users by not sending the `Referer` header to the linked site.
+
+These defaults have no negative impact on SEO and are considered [best practice](https://developer.chrome.com/docs/lighthouse/best-practices/external-anchors-use-rel-noopener).
+
+When you need to overwrite this behavior you can use the `rel` or `noRel` props.
+
+```vue [app.vue]
+<template>
+  <NuxtLink to="https://twitter.com/nuxt_js">
+    Nuxt Twitter
+  </NuxtLink>
+  <!-- <a href="https://twitter.com/nuxt_js" rel="noopener noreferrer">...</a> -->
+
+  <NuxtLink to="https://discord.nuxtjs.org" rel="noopener">
+    Nuxt Discord
+  </NuxtLink>
+  <!-- <a href="https://discord.nuxtjs.org" rel="noopener">...</a> -->
+
+  <NuxtLink to="/about" target="_blank">About page</NuxtLink>
+  <!-- <a href="/about" target="_blank" rel="noopener noreferrer">...</a> -->
+</template>
+```
+
+A `noRel` prop can be used to prevent the default `rel` attribute from being added to the absolute links.
+
+```vue [app.vue]
+<template>
+  <NuxtLink to="https://github.com/nuxt" no-rel>
+    Nuxt GitHub
+  </NuxtLink>
+  <!-- <a href="https://github.com/nuxt">...</a> -->
+</template>
+```
+
+::note
+`noRel` and `rel` cannot be used together. `rel` will be ignored.
+::
+
+## Prefetch Links
+
+Nuxt automatically includes smart prefetching. That means it detects when a link is visible (by default), either in the viewport or when scrolling and prefetches the JavaScript for those pages so that they are ready when the user clicks the link. Nuxt only loads the resources when the browser isn't busy and skips prefetching if your connection is offline or if you only have 2g connection.
+
+```vue [pages/index.vue]
+<NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>
+<NuxtLink to="/about" :prefetch="false">About page not pre-fetched</NuxtLink>
+```
+
+### Custom Prefetch Triggers
+
+We now support custom prefetch triggers for `<NuxtLink>` after `v3.13.0`. You can use the `prefetchOn` prop to control when to prefetch links.
+
+```vue
+<template>
+  <NuxtLink prefetch-on="visibility">
+    This will prefetch when it becomes visible (default)
+  </NuxtLink>
+
+  <NuxtLink prefetch-on="interaction">
+    This will prefetch when hovered or when it gains focus
+  </NuxtLink>
+</template>
+```
+
+- `visibility`: Prefetches when the link becomes visible in the viewport. Monitors the element's intersection with the viewport using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Prefetching is triggered when the element is scrolled into view.
+- `interaction`: Prefetches when the link is hovered or focused. This approach listens for `pointerenter` and `focus` events, proactively prefetching resources when the user indicates intent to interact.
+
+You can also use an object to configure `prefetchOn`:
+
+```vue
+<template>
+  <NuxtLink :prefetch-on="{ interaction: true }">
+    This will prefetch when hovered or when it gains focus
+  </NuxtLink>
+</template>
+```
+
+That you probably don't want both enabled!
+
+```vue
+<template>
+  <NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
+    This will prefetch when hovered/focus - or when it becomes visible
+  </NuxtLink>
+</template>
+```
+
+This configuration will observe when the element enters the viewport and also listen for `pointerenter` and `focus` events. This may result in unnecessary resource usage or redundant prefetching, as both triggers can prefetch the same resource under different conditions.
+
+### Enable Cross-origin Prefetch
+
+To enable cross-origin prefetching, you can set the `crossOriginPrefetch` option in your `nuxt.config`. This will enable cross-origin prefetching using the [Speculation Rules API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API).
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    crossOriginPrefetch: true,
+  },
+})
+```
+
+### Disable prefetch globally
+
+It's also possible to enable/disable prefetching all links globally for your app.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    defaults: {
+      nuxtLink: {
+        prefetch: false,
+      },
+    },
+  },
+})
+```
+
+## Props
+
+### RouterLink
+
+When not using `external`, `<NuxtLink>` supports all Vue Router's [`RouterLink` props](https://router.vuejs.org/api/interfaces/RouterLinkProps.html)
+
+- `to`: Any URL or a [route location object](https://router.vuejs.org/api/#RouteLocation) from Vue Router
+- `custom`: Whether `<NuxtLink>` should wrap its content in an `<a>` element. It allows taking full control of how a link is rendered and how navigation works when it is clicked. Works the same as [Vue Router's `custom` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-custom)
+- `exactActiveClass`: A class to apply on exact active links. Works the same as [Vue Router's `exactActiveClass` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-exactActiveClass) on internal links. Defaults to Vue Router's default (`"router-link-exact-active"`)
+- `activeClass`: A class to apply on active links. Works the same as [Vue Router's `activeClass` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-activeClass) on internal links. Defaults to Vue Router's default (`"router-link-active"`)
+- `replace`: Works the same as [Vue Router's `replace` prop](https://router.vuejs.org/api/interfaces/RouteLocationOptions.html#Properties-replace) on internal links
+- `ariaCurrentValue`: An `aria-current` attribute value to apply on exact active links. Works the same as [Vue Router's `ariaCurrentValue` prop](https://router.vuejs.org/api/interfaces/RouterLinkProps.html#Properties-ariaCurrentValue) on internal links
+
+### NuxtLink
+
+- `href`: An alias for `to`. If used with `to`, `href` will be ignored
+- `noRel`: If set to `true`, no `rel` attribute will be added to the external link
+- `external`: Forces the link to be rendered as an `<a>` tag instead of a Vue Router `RouterLink`.
+- `prefetch`: When enabled will prefetch middleware, layouts and payloads (when using [payloadExtraction](/docs/api/nuxt-config#crossoriginprefetch)) of links in the viewport. Used by the experimental [crossOriginPrefetch](/docs/api/nuxt-config#crossoriginprefetch) config.
+- `prefetchOn`: Allows custom control of when to prefetch links. Possible options are `interaction` and `visibility` (default). You can also pass an object for full control, for example: `{ interaction: true, visibility: true }`. This prop is only used when `prefetch` is enabled (default) and `noPrefetch` is not set.
+- `noPrefetch`: Disables prefetching.
+- `prefetchedClass`: A class to apply to links that have been prefetched.
+
+### Anchor
+
+- `target`: A `target` attribute value to apply on the link
+- `rel`: A `rel` attribute value to apply on the link. Defaults to `"noopener noreferrer"` for external links.
+
+::tip
+Defaults can be overwritten, see [overwriting defaults](#overwriting-defaults) if you want to change them.
+::
+
+## Overwriting Defaults
+
+### In Nuxt Config
+
+You can overwrite some `<NuxtLink>` defaults in your [`nuxt.config`](/docs/api/nuxt-config#defaults)
+
+::important
+These options will likely be moved elsewhere in the future, such as into `app.config` or into the `app/` directory.
+::
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  experimental: {
+    defaults: {
+      nuxtLink: {
+        // default values
+        componentName: 'NuxtLink',
+        externalRelAttribute: 'noopener noreferrer',
+        activeClass: 'router-link-active',
+        exactActiveClass: 'router-link-exact-active',
+        prefetchedClass: undefined, // can be any valid string class name
+        trailingSlash: undefined // can be 'append' or 'remove'
+        prefetch: true,
+        prefetchOn: { visibility: true } 
+      }
+    }
+  }
+})
+```
+
+### Custom Link Component
+
+You can overwrite `<NuxtLink>` defaults by creating your own link component using `defineNuxtLink`.
+
+```js [components/MyNuxtLink.ts]
+export default defineNuxtLink({
+  componentName: 'MyNuxtLink',
+  /* see signature below for more */
+})
+```
+
+You can then use `<MyNuxtLink />` component as usual with your new defaults.
+
+### `defineNuxtLink` Signature
+
+```ts
+interface NuxtLinkOptions {
+  componentName?: string;
+  externalRelAttribute?: string;
+  activeClass?: string;
+  exactActiveClass?: string;
+  trailingSlash?: 'append' | 'remove'
+  prefetch?: boolean
+  prefetchedClass?: string
+  prefetchOn?: Partial<{
+    visibility: boolean
+    interaction: boolean
+  }>
+}
+function defineNuxtLink(options: NuxtLinkOptions): Component {}
+```
+
+- `componentName`: A name for the component. Default is `NuxtLink`.
+- `externalRelAttribute`: A default `rel` attribute value applied on external links. Defaults to `"noopener noreferrer"`. Set it to `""` to disable
+- `activeClass`: A default class to apply on active links. Works the same as [Vue Router's `linkActiveClass` option](https://router.vuejs.org/api/interfaces/RouterOptions.html#Properties-linkActiveClass). Defaults to Vue Router's default (`"router-link-active"`)
+- `exactActiveClass`: A default class to apply on exact active links. Works the same as [Vue Router's `linkExactActiveClass` option](https://router.vuejs.org/api/interfaces/RouterOptions.html#Properties-linkExactActiveClass). Defaults to Vue Router's default (`"router-link-exact-active"`)
+- `trailingSlash`: An option to either add or remove trailing slashes in the `href`. If unset or not matching the valid values `append` or `remove`, it will be ignored.
+- `prefetch`: Whether or not to prefetch links by default.
+- `prefetchOn`: Granular control of which prefetch strategies to apply by default.
+- `prefetchedClass`: A default class to apply to links that have been prefetched.
+
+:link-example{to="/docs/examples/routing/pages"}

package/3.api/1.components/5.nuxt-loading-indicator.md

@@ -0,0 +1,50 @@
+---
+title: '<NuxtLoadingIndicator>'
+description: 'Display a progress bar between page navigations.'
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-loading-indicator.ts
+    size: xs
+---
+
+## Usage
+
+Add `<NuxtLoadingIndicator/>` in your [`app.vue`](/docs/guide/directory-structure/app) or [`layouts/`](/docs/guide/directory-structure/layouts).
+
+```vue [app.vue]
+<template>
+  <NuxtLoadingIndicator />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+```
+
+:link-example{to="/docs/examples/routing/pages"}
+
+## Slots
+
+You can pass custom HTML or components through the loading indicator's default slot.
+
+## Props
+
+- `color`: The color of the loading bar. It can be set to `false` to turn off explicit color styling.
+- `errorColor`: The color of the loading bar when `error` is set to `true`.
+- `height`: Height of the loading bar, in pixels (default `3`).
+- `duration`: Duration of the loading bar, in milliseconds (default `2000`).
+- `throttle`: Throttle the appearing and hiding, in milliseconds (default `200`).
+- `estimatedProgress`: By default Nuxt will back off as it approaches 100%. You can provide a custom function to customize the progress estimation, which is a function that receives the duration of the loading bar (above) and the elapsed time. It should return a value between 0 and 100.
+
+::note
+This component is optional. :br
+To achieve full customization, you can implement your own one based on [its source code](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-loading-indicator.ts).
+::
+
+::note
+You can hook into the underlying indicator instance using [the `useLoadingIndicator` composable](/docs/api/composables/use-loading-indicator), which will allow you to trigger start/finish events yourself.
+::
+
+::tip
+The loading indicator's speed gradually decreases after reaching a specific point controlled by `estimatedProgress`. This adjustment provides a more accurate reflection of longer page loading times and prevents the indicator from prematurely showing 100% completion.
+::

package/3.api/1.components/6.nuxt-error-boundary.md

@@ -0,0 +1,65 @@
+---
+title: "<NuxtErrorBoundary>"
+description: The <NuxtErrorBoundary> component handles client-side errors happening in its default slot.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-error-boundary.vue
+    size: xs
+---
+
+::tip
+The `<NuxtErrorBoundary>` uses Vue's [`onErrorCaptured`](https://vuejs.org/api/composition-api-lifecycle.html#onerrorcaptured) hook under the hood.
+::
+
+## Events
+
+- `@error`: Event emitted when the default slot of the component throws an error.
+
+  ```vue
+  <template>
+    <NuxtErrorBoundary @error="logSomeError">
+      <!-- ... -->
+    </NuxtErrorBoundary>
+  </template>
+  ```
+
+## Slots
+
+- `#error`: Specify a fallback content to display in case of error.
+
+  ```vue
+    <template>
+      <NuxtErrorBoundary>
+        <!-- ... -->
+        <template #error="{ error, clearError }">
+          <p>An error occurred: {{ error }}</p>
+
+          <button @click="clearError">Clear error</button>
+        </template>
+      </NuxtErrorBoundary>
+    </template>
+  ```
+
+:read-more{to="/docs/getting-started/error-handling"}
+
+## Examples
+
+### Accessing `error` and `clearError` in script
+
+You can access `error` and `clearError` properties within the component's script as below:
+
+```vue
+<template>
+  <NuxtErrorBoundary ref="errorBoundary">
+    <!-- ... -->
+  </NuxtErrorBoundary>
+</template>
+
+<script setup lang="ts">
+const errorBoundary = useTemplateRef('errorBoundary')
+
+// errorBoundary.value?.error
+// errorBoundary.value?.clearError()
+</script>
+```

package/3.api/1.components/7.nuxt-welcome.md

@@ -0,0 +1,25 @@
+---
+title: '<NuxtWelcome>'
+description: The <NuxtWelcome> component greets users in new projects made from the starter template.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/assets/blob/main/packages/templates/templates/welcome/index.html
+    size: xs
+---
+
+It includes links to the Nuxt documentation, source code, and social media accounts.
+
+```vue [app.vue]
+<template>
+  <NuxtWelcome />
+</template>
+```
+
+::read-more{to="https://templates.ui.nuxtjs.org/templates/welcome" target="_blank"}
+Preview the `<NuxtWelcome />` component.
+::
+
+::tip
+This component is part of [nuxt/assets](https://github.com/nuxt/assets).
+::

package/3.api/1.components/8.nuxt-island.md

@@ -0,0 +1,70 @@
+---
+title: "<NuxtIsland>"
+description: "Nuxt provides the <NuxtIsland> component to render a non-interactive component without any client JS."
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-island.ts
+    size: xs
+---
+
+When rendering an island component, the content of the island component is static, thus no JS is downloaded client-side.
+
+Changing the island component props triggers a refetch of the island component to re-render it again.
+
+::note
+Global styles of your application are sent with the response.
+::
+
+::tip
+Server only components use `<NuxtIsland>` under the hood
+::
+
+## Props
+
+- `name` : Name of the component to render.
+  - **type**: `string`
+  - **required**
+- `lazy`: Make the component non-blocking.
+  - **type**: `boolean`
+  - **default**: `false`
+- `props`: Props to send to the component to render.
+  - **type**: `Record<string, any>`
+- `source`: Remote source to call the island to render.
+  - **type**: `string`
+- **dangerouslyLoadClientComponents**: Required to load components from a remote source.
+  - **type**: `boolean`
+  - **default**: `false`
+
+::note
+Remote islands need `experimental.componentIslands` to be `'local+remote'` in your `nuxt.config`.
+It is strongly discouraged to enable `dangerouslyLoadClientComponents` as you can't trust a remote server's javascript.
+::
+
+::note
+By default, component islands are scanned from the `~/components/islands/` directory. So the `~/components/islands/MyIsland.vue` component could be rendered with `<NuxtIsland name="MyIsland" />`.
+::
+
+## Slots
+
+Slots can be passed to an island component if declared.
+
+Every slot is interactive since the parent component is the one providing it.
+
+Some slots are reserved to `NuxtIsland` for special cases.
+
+- `#fallback`: Specify the content to be rendered before the island loads (if the component is lazy) or if `NuxtIsland` fails to fetch the component.
+
+## Ref
+
+- `refresh()`
+  - **type**: `() => Promise<void>`
+  - **description**: force refetch the server component by refetching it.
+
+## Events
+
+- `error`
+  - **parameters**:
+    - **error**:
+      - **type**: `unknown`
+  - **description**: emitted when when `NuxtIsland` fails to fetch the new island.

package/3.api/1.components/9.nuxt-img.md

@@ -0,0 +1,43 @@
+---
+title: "<NuxtImg>"
+description: "Nuxt provides a <NuxtImg> component to handle automatic image optimization."
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/image/blob/main/src/runtime/components/NuxtImg.vue
+    size: xs
+---
+
+`<NuxtImg>` is a drop-in replacement for the native `<img>` tag.
+
+- Uses built-in provider to optimize local and remote images
+- Converts `src` to provider-optimized URLs
+- Automatically resizes images based on `width` and `height`
+- Generates responsive sizes when providing `sizes` option
+- Supports native lazy loading as well as other `<img>` attributes
+
+## Setup
+
+In order to use `<NuxtImg>` you should install and enable the Nuxt Image module:
+
+```bash [Terminal]
+npx nuxi@latest module add image
+```
+
+## Usage
+
+`<NuxtImg>` outputs a native `img` tag directly (without any wrapper around it). Use it like you would use the `<img>` tag:
+
+```html
+<NuxtImg src="/nuxt-icon.png" />
+```
+
+Will result in:
+
+```html
+<img src="/nuxt-icon.png" />
+```
+
+::read-more{to="https://image.nuxt.com/usage/nuxt-img" target="_blank"}
+Read more about the `<NuxtImg>` component.
+::

package/3.api/2.composables/.navigation.yml

@@ -0,0 +1,3 @@
+title: 'Composables'
+titleTemplate: '%s · Nuxt Composables'
+icon: i-lucide-arrow-left-right

package/3.api/2.composables/on-prehydrate.md

@@ -0,0 +1,60 @@
+---
+title: "onPrehydrate"
+description: "Use onPrehydrate to run a callback on the client immediately before Nuxt hydrates the page."
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/ssr.ts
+    size: xs
+---
+
+::important
+This composable is available in Nuxt v3.12+.
+::
+
+`onPrehydrate` is a composable lifecycle hook that allows you to run a callback on the client immediately before
+Nuxt hydrates the page.
+
+::note
+This is an advanced utility and should be used with care. For example, [`nuxt-time`](https://github.com/danielroe/nuxt-time/pull/251) and [`@nuxtjs/color-mode`](https://github.com/nuxt-modules/color-mode/blob/main/src/script.js) manipulate the DOM to avoid hydration mismatches.
+::
+
+## Usage
+
+`onPrehydrate` can be called directly in the setup function of a Vue component (for example, in `<script setup>`), or in a plugin.
+It will only have an effect when it is called on the server, and it will not be included in your client build.
+
+## Parameters
+
+- `callback`: A function that will be stringified and inlined in the HTML. It should not have any external
+dependencies (such as auto-imports) or refer to variables defined outside the callback. The callback will run
+before Nuxt runtime initializes so it should not rely on the Nuxt or Vue context.
+
+## Example
+
+```vue twoslash [app.vue]
+<script setup lang="ts">
+declare const window: Window
+// ---cut---
+// onPrehydrate is guaranteed to run before Nuxt hydrates
+onPrehydrate(() => {
+  console.log(window)
+})
+
+// As long as it only has one root node, you can access the element
+onPrehydrate((el) => {
+  console.log(el.outerHTML)
+  // <div data-v-inspector="app.vue:15:3" data-prehydrate-id=":b3qlvSiBeH:"> Hi there </div>
+})
+
+// For _very_ advanced use cases (such as not having a single root node) you
+// can access/set `data-prehydrate-id` yourself
+const prehydrateId = onPrehydrate((el) => {})
+</script>
+
+<template>
+  <div>
+    Hi there
+  </div>
+</template>
+```

package/3.api/2.composables/use-app-config.md

@@ -0,0 +1,19 @@
+---
+title: 'useAppConfig'
+description: 'Access the reactive app config defined in the project.'
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/config.ts
+    size: xs
+---
+
+## Usage
+
+```ts
+const appConfig = useAppConfig()
+
+console.log(appConfig)
+```
+
+:read-more{to="/docs/guide/directory-structure/app-config"}