composables/define-route-rules

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

defineRouteRules composable signature

defineRouteRules is a composable that accepts a single argument containing route rule configuration options. It is used at the page level to define hybrid rendering rules that are converted to equivalent routeRules in nuxt.config during build.

defineRouteRules example with prerender option

The following example shows how to use defineRouteRules in a page component with the prerender option set to true: ```vue <script setup lang="ts"> defineRouteRules({ prerender: true, }) </script> <template> <h1>Hello world!</h1> </template> ``` This translates to `routeRules: { '/': { prerender: true } }` in nuxt.config.

defineRouteRules experimental feature requirement

defineRouteRules is an experimental feature that requires enabling the experimental.inlineRouteRules option in nuxt.config to function.

defineRouteRules page path to route mapping

A route rule defined in a page file applies to requests matching that page's route: a rule in ~/pages/foo/bar.vue applies to /foo/bar requests; a rule in ~/pages/foo/[id].vue applies to /foo/* requests; a rule in a page with finite alternatives like /:locale(en|fr)/about will generate one rule per alternative (/en/about and /fr/about).

defineRouteRules limitations and fallback

If a page path cannot be converted to an equivalent route rule pattern (such as a param with regex like /:id(\d+), a partial segment like /prefix-:id, or repeatable param like /:slug+), the rules for that page are not applied and Nuxt warns during build. In such cases, define the rules explicitly in nitro.routeRules in nuxt.config instead.

defineRouteRules with custom path or alias

When using custom path or alias settings defined in a page's definePageMeta, set routeRules directly within nuxt.config for more control rather than relying on defineRouteRules.

addLayout utility function signature

The addLayout function registers a template as a layout and adds it to the layouts collection. It has the signature: function addLayout(layout: NuxtTemplate | string, name: string): void. It takes a layout parameter which can be either a template object or a string path, and a name parameter which is the name to register the layout under.

addLayout layout parameter accepts NuxtTemplate or string

The layout parameter of addLayout can be either a NuxtTemplate object or a string. If a string is provided, it will be converted to a template object with src set to the string value. If a template object is provided, it must include src and other template properties.

NuxtTemplate object properties for addLayout

The NuxtTemplate object passed to addLayout has these properties: src (string, not required) - Path to the template, or getContents must be provided instead; filename (string, not required) - Filename of the template, generated from src path if not provided; dst (string, not required) - Path to destination file, generated from filename and nuxt buildDir if not provided; options (Record<string, any>, not required) - Options to pass to the template; getContents (function (data) => string | Promise<string>, not required) - Function called with options object that returns template string or promise, ignored if src is provided; write (boolean, not required) - If true, template is written to destination file, otherwise used only in virtual filesystem.

addLayout example with custom layout

This example shows how to register a layout named 'custom' using addLayout. The layout is defined inline with getContents returning a template with header, slot for page content, and footer: import { addLayout, defineNuxtModule } from '@nuxt/kit' export default defineNuxtModule({ setup () { addLayout({ write: true, filename: 'my-layout.vue', getContents: () => `<template> <div> <header>My Header</header> <slot /> <footer>My Footer</footer> </div> </template>`, }, 'custom') }, }) The layout can then be used in pages with definePageMeta({ layout: 'custom' }).

addLayout with src and filename example

This example shows registering a layout named 'custom' from a template file: import { addLayout, createResolver, defineNuxtModule } from '@nuxt/kit' export default defineNuxtModule({ setup () { const { resolve } = createResolver(import.meta.url) addLayout({ src: resolve('templates/custom-layout.ts'), filename: 'custom-layout.ts', }, 'custom') }, })

addLayout virtual filesystem warning with Vue files

Due to lack of support for virtual .vue files by @vitejs/plugin-vue, if working with .vue layouts, pass write: true to the first argument of addLayout to work around this limitation.

addLayout Nuxt 2 vs Nuxt 3 error layout handling

In Nuxt 2, the error layout could be registered using addLayout. In Nuxt 3+, the error layout has been replaced with an error.vue page in the project root.

Give your agent this brain