gil-wiki/reference/4.api/3.utils/define-route-rules.md

title, description, links

title	description	links
defineRouteRules	Define route rules for hybrid rendering at the page level.	label icon to size Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/pages/runtime/composables.ts xs

::read-more{to="/docs/4.x/guide/going-further/experimental-features#inlinerouterules" icon="i-lucide-star"} This feature is experimental and in order to use it you must enable the experimental.inlineRouteRules option in your nuxt.config. ::

Usage

<script setup lang="ts">
defineRouteRules({
  prerender: true,
})
</script>

<template>
  <h1>Hello world!</h1>
</template>

Will be translated to:

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
  },
})

::note When running nuxt build, the home page will be pre-rendered in .output/public/index.html and statically served. ::

Notes

• A rule defined in ~/pages/foo/bar.vue will be applied to /foo/bar requests.
• A rule in ~/pages/foo/[id].vue will be applied to /foo/** requests.

For more control, such as if you are using a custom path or alias set in the page's definePageMeta, you should set routeRules directly within your nuxt.config.

::read-more{to="/docs/4.x/guide/concepts/rendering#hybrid-rendering" icon="i-lucide-medal"} Read more about the routeRules. ::