Nuxt/docs/3.api/2.components/2.nuxt-page.md

78 lines
2.4 KiB
Markdown
Raw Normal View History

---
title: "<NuxtPage>"
description: The NuxtPage component is required to display pages located in the pages/ directory.
---
# `<NuxtPage>`
2023-07-07 16:24:09 +00:00
`<NuxtPage>` is a built-in component that comes with Nuxt. `NuxtPage` is required to display top-level or nested pages located in the [`pages/` directory](/docs/guide/directory-structure/pages).
`NuxtPage` is a wrapper around [`<RouterView>`](https://router.vuejs.org/api/interfaces/RouterViewProps.html#interface-routerviewprops) component from Vue Router. `NuxtPage` component accepts same `name` and `route` props.
- **name:** type: `string`
2023-06-05 15:03:06 +00:00
`name` helps `RouterView` render the component with the corresponding name in the matched route record's components option.
- **route:** type: `RouteLocationNormalized`
`route` is a route location that has all of its components resolved.
> **Nuxt automatically resolves the `name` and `route` by scanning and rendering all Vue component files found in the `/pages` directory.**
Apart from the `name` and `route`, `NuxtPage` component also accepts `pageKey` props.
- **pageKey:** type: `string` or `function`
`pageKey` helps control when the `NuxtPage` component is re-rendered.
2022-06-27 13:30:13 +00:00
## Example
For example, passing `static` key, `NuxtPage` component is rendered only once when it is mounted.
```html
<!-- static key -->
2022-11-07 09:16:34 +00:00
<NuxtPage page-key="static" />
```
Alternatively, `pageKey` can be passed as a `key` value via `definePageMeta` from the `<script>` section of your Vue component in the `/pages` directory.
```js
<script setup>
definePageMeta({
key: route => route.fullPath
})
</script>
```
:button-link[Open on StackBlitz]{href="https://stackblitz.com/github/nuxt/examples/tree/main/routing/pages?file=app.vue" blank}
## Accessing a page's component ref
To get the ref of a page component, access it through `ref.value.pageRef`
````html
<template>
<NuxtPage ref="page" />
</template>
<script setup lang="ts">
const page = ref()
function logFoo () {
page.value.pageRef.foo()
}
</script>
````
## Custom Props
In addition, `NuxtPage` also accepts custom props that you may need to pass further down the hierarchy. These custom props are accessible via `attrs` in the Nuxt app.
```html
2022-11-07 09:16:34 +00:00
<NuxtPage :foobar="123" />
```
For example, in the above example, the value of `foobar` will be available using `$attrs.foobar` in the template or `useAttrs().foobar` in `<script setup>`.
::ReadMore{link="/docs/guide/directory-structure/app"}
::