Meta tags:
description=The NuxtPage component is required to display pages located in the pages/ directory.;

Headings (most frequently used words):

props, nuxtpage, example, page, ref, custom, community, explore, enterprise,

Text of the page (most frequently used words):
the (39), nuxt (37), page (27), component (22), #nuxtpage (21), pages (17), vue (14), app (12), script (10), route (10), and (9), you (9), with (8), props (8), template (8), components (8), can (7), ref (6), example (6), foobar (6), that (6), key (6), transition (6), this (5), directory (5), lang (5), setup (5), suspense (5), type (5), keepalive (5), routerview (5), community (4), const (4), from (4), for (4), value (4), foo (4), definepagemeta (4), rendered (4), when (4), name (4), github (3), new (3), templates (3), custom (3), nuxtlayout (3), nuxtannouncer (3), changes (3), docs (3), 123 (3), attrs (3), log (3), console (3), passed (3), examples (3), mounted (3), all (3), has (3), enable (3), config (3), discord (2), bluesky (2), subscribe (2), updates (2), enterprise (2), kit (2), element (2), dynamic (2), edit (2), read (2), structure (2), outputs (2), not (2), prop (2), down (2), defineprops (2), access (2), will (2), also (2), may (2), pass (2), pageref (2), function (2), get (2), fullpath (2), your (2), pagekey (2), use (2), how (2), only (2), control (2), boolean (2), define (2), transitions (2), string (2), typical (2), application (2), previous (2), one (2), unmounted (2), lifecycle (2), optional (2), using (2), useroute (2), display (2), located (2), api (2), modules (2), module (2), build (2), copyright, 2016, 2026, mit, license, linkedin, stay, updated, releases, features, guides, our, newsletter, sponsors, agencies, evals, showcase, explore, design, team, nuxters, menu, explain, agent, certification, master, become, sponsor, provides, show, layouts, error, adds, hidden, announce, content, assistive, technologies, report, issue, was, helpful, more, useattrs, have, defined, any, still, accessed, directly, number, below, then, accepts, need, further, hierarchy, defineexpose, method, called, logfoo, through, live, routing, alternatively, via, section, don, object, here, cause, problems, renders, based, current, static, never, once, first, automatically, resolves, scanning, rendering, files, found, state, preservation, keepaliveprops, global, transitionprops, location, its, resolved, routelocationnormalized, tells, render, corresponding, matched, record, option, see, filename, convention, view, named, views, been, fully, however, due, implemented, before, after, since, uses, under, hood, behavior, during, differs, ensure, single, root, default, does, them, file, setting, properties, want, specific, set, keep, alive, slot, includes, following, wrapper, around, router, should, used, instead, because, former, takes, additional, care, internal, states, otherwise, return, incorrect, paths, built, comes, lets, top, level, nested, required, copy, source, configuration, import, meta, hooks, advanced, plugins, head, layout, context, auto, imports, compatibility, programmatic, usage, layers, builder, logging, resolving, nitro, runtime, upgrade, typecheck, test, preview, prepare, create, info, generate, devtools, dev, cleanup, analyze, add, commands, updateappconfig, showerror, setresponsestatus, setpagelayout, reloadnuxtapp, refreshnuxtdata, refreshcookie, prerenderroutes, preloadroutecomponents, preloadcomponents, prefetchcomponents, onnuxtready, onbeforerouteupdate, onbeforerouteleave, navigateto, definerouterules, definenuxtroutemiddleware, definenuxtplugin, definenuxtcomponent, definelazyhydrationcomponent, createerror, clearnuxtstate, clearnuxtdata, clearerror, callonce, addroutemiddleware, abortnavigation, fetch, utils, usestate, useserverseometa, useseometa, useruntimehook, useruntimeconfig, userouter, userouteannouncer, useresponseheader, userequesturl, userequestheaders, userequestheader, userequestfetch, userequestevent, usepreviewmode, usenuxtdata, usenuxtapp, useloadingindicator, uselazyfetch, uselazyasyncdata, uselayout, usehydration, useheadsafe, usehead, usefetch, useerror, usecookie, useasyncdata, useappconfig, useannouncer, onprehydrate, createusefetch, createuseasyncdata, composables, nuxtimg, nuxtisland, nuxtwelcome, nuxterrorboundary, nuxtloadingindicator, nuxtlink, nuxttime, nuxtrouteannouncer, teleport, nuxtpicture, nuxtclientfallback, devonly, clientonly, deploy, guide, started, search, ask, nuxi, resources,

Text of the page (random words):
nuxtpage nuxt components v4 v4 5 0 docs modules templates resources enterprise updates ask nuxi search k 60 7k get started structure guide api deploy examples community components clientonly devonly nuxtclientfallback nuxtpicture teleport nuxtrouteannouncer nuxttime nuxtannouncer nuxtpage nuxtlayout nuxtlink nuxtloadingindicator nuxterrorboundary nuxtwelcome nuxtisland nuxtimg composables createuseasyncdata createusefetch onprehydrate useannouncer useappconfig useasyncdata usecookie useerror usefetch usehead useheadsafe usehydration uselayout uselazyasyncdata uselazyfetch useloadingindicator usenuxtapp usenuxtdata usepreviewmode userequestevent userequestfetch userequestheader userequestheaders userequesturl useresponseheader useroute userouteannouncer userouter useruntimeconfig useruntimehook useseometa useserverseometa usestate utils fetch abortnavigation addroutemiddleware callonce clearerror clearnuxtdata clearnuxtstate createerror definelazyhydrationcomponent definenuxtcomponent definenuxtplugin definenuxtroutemiddleware definepagemeta definerouterules navigateto onbeforerouteleave onbeforerouteupdate onnuxtready prefetchcomponents preloadcomponents preloadroutecomponents prerenderroutes refreshcookie refreshnuxtdata reloadnuxtapp setpagelayout setresponsestatus showerror updateappconfig commands nuxt add nuxt analyze nuxt build nuxt build module nuxt cleanup nuxt dev nuxt devtools nuxt generate nuxt info create nuxt nuxt module nuxt prepare nuxt preview nuxt test nuxt typecheck nuxt upgrade nuxt kit modules runtime config templates app config nitro resolving logging builder examples layers programmatic usage compatibility auto imports components context pages layout head plugins advanced lifecycle hooks import meta nuxt configuration api components nuxtpage source copy page the nuxtpage component is required to display pages located in the pages directory nuxtpage is a built in component that comes with nuxt it lets you display top level or nested pages located in the app pages directory nuxtpage is a wrapper around routerview from vue router it should be used instead of routerview because the former takes additional care of internal states otherwise useroute may return incorrect paths nuxtpage includes the following components template routerview v slot component optional when using transitions transition optional when using keep alive keepalive suspense component is component suspense keepalive transition routerview template by default nuxt does not enable transition and keepalive you can enable them in the nuxt config file or by setting the transition and keepalive properties on nuxtpage if you want to define a specific page you can set it in definepagemeta in the page component if you enable transition in your page component ensure that the page has a single root element since nuxtpage uses suspense under the hood the component lifecycle behavior during page changes differs from that of a typical vue application in a typical vue application a new page component is mounted only after the previous one has been fully unmounted however in nuxt due to how vue suspense is implemented the new page component is mounted before the previous one is unmounted props name tells routerview to render the component with the corresponding name in the matched route record s components option see named views for the name view vue filename convention type string route route location that has all of its components resolved type routelocationnormalized pagekey control when the nuxtpage component is re rendered type string or function transition define global transitions for all pages rendered with the nuxtpage component type boolean or transitionprops keepalive control state preservation of pages rendered with the nuxtpage component type boolean or keepaliveprops nuxt automatically resolves the name and route by scanning and rendering all vue component files found in the pages directory example for example if you pass a key that never changes the nuxtpage component will be rendered only once when it is first mounted app app vue template nuxtpage page key static template you can also use a dynamic key based on the current route nuxtpage page key route route fullpath don t use route object here as it can cause problems with how nuxtpage renders pages with suspense alternatively pagekey can be passed as a key value via definepagemeta from the script section of your vue component in the pages directory app pages my page vue script setup lang ts definepagemeta key route route fullpath script read and edit a live example in docs 4 x examples routing pages page s ref to get the ref of a page component access it through ref value pageref app app vue script setup lang ts const page ref function logfoo page value pageref foo script template nuxtpage ref page template my page vue script setup lang ts const foo console log foo method called defineexpose foo script custom props nuxtpage also accepts custom props that you may need to pass further down the hierarchy for example in the below example the value of foobar will be passed to the nuxtpage component and then to the page components app app vue template nuxtpage foobar 123 template we can access the foobar prop in the page component app pages page vue script setup lang ts const props defineprops foobar number console log props foobar outputs 123 if you have not defined the prop with defineprops any props passed down to nuxtpage can still be accessed directly from the page attrs app pages page vue script setup lang ts const attrs useattrs console log attrs foobar outputs 123 script read more in docs 4 x directory structure app pages was this helpful ️ report an issue or edit this page on github nuxtannouncer the nuxtannouncer component adds a hidden element to announce dynamic content changes to assistive technologies nuxtlayout nuxt provides the nuxtlayout component to show layouts on pages and error pages on this page on this page props example page s ref custom props community become a sponsor master nuxt nuxt certification explain with agent nuxt on discord nuxt on bluesky nuxt on x nuxt on github menu on this page community nuxters team design kit explore templates showcase ai evals enterprise agencies sponsors subscribe to our newsletter stay updated on new releases and features guides and community updates subscribe nuxt on x nuxt on bluesky nuxt on linkedin nuxt on discord nuxt on github copyright 2016 2026 nuxt mit license