defineRouteRules

::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. ::