Eu24 Web
Route Rules
Overview
Nuxt 3 introduces Route Rules, a powerful feature that lets you control how individual routes behave. You can configure things like SSR, caching, headers, redirects, middleware, and more—without modifying your app logic directly.
📁 Where to Define Route Rules
Route rules are defined in your nuxt.config.ts file either at the top level or inside the nitro config.
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
// Define route behaviors here
},
nitro: {
routeRules: {
// Alternatively, define inside Nitro
}
}
});
⚙️ Common Options
| Option | Description |
|---|---|
ssr | Enable or disable Server-Side Rendering |
static | Enable static generation (SSG) for a route |
prerender | Force pre-rendering of a route |
cors | Enable CORS for a route |
headers | Add custom HTTP headers |
redirect | Redirect a route to another |
proxy | Proxy a route to a different endpoint |
appMiddleware | Apply middleware on a specific route |
🧩 Example Configuration
export default defineNuxtConfig({
nitro: {
compressPublicAssets: {
brotli: true,
},
devProxy: {
host: "localhost",
},
routeRules: {
"/logout": { proxy: "/api/logout" },
},
},
routeRules: {
"/**": { appMiddleware: ["protected"] },
"/favicon.ico": {
headers: {
"cache-control": "public, max-age=31536000, immutable"
}
},
"/static/fonts/**": {
headers: {
"cache-control": "public, max-age=31536000, immutable"
}
},
"/:locale/account/**": { appMiddleware: ["is-logged-in"] },
"/account/**": { appMiddleware: ["is-logged-in"] },
"/protected": { appMiddleware: { protected: false } },
"/auth": { redirect: "/login" },
"/account": { redirect: "/account/home" },
"/account/orders": { redirect: "/account/order-history" },
"/content/dewalt": {
redirect: {
to: "/merk/dewalt",
statusCode: 301
}
},
"/content/bosch": {
redirect: {
to: "/merk/bosch",
statusCode: 301
}
},
"/content/einhell": {
redirect: {
to: "/merk/dewalt",
statusCode: 301
}
},
"/content/toughbuilt": {
redirect: {
to: "/merk/toughbuilt",
statusCode: 301
}
}
}
});
🧠 Matching Patterns
/blog/**— Matches all nested routes like/blog/post-1,/blog/category/news/api/*— Matches only one level (e.g./api/user, not/api/user/profile)/**— Matches all routes in the app/:locale/account/**— Locale-aware scoped route (e.g./en/account,/id/account)
✅ Real-World Use Cases
| Pattern | Behavior |
|---|---|
/logout | Proxies logout requests to backend |
/favicon.ico | Applies long-term caching |
/account/** | Requires login via is-logged-in middleware |
/:locale/account/** | Locale-aware login check |
/auth | Redirects to /login |
/content/dewalt | SEO 301 redirect to /merk/dewalt |
/** | Global protected middleware |
📝 Notes
- Route rules are powered by Nitro, Nuxt’s server engine.
- Use glob-style patterns (
*,**) for flexible route targeting. - You can define rules at the top level or under
nitro.routeRules—they're merged internally. - Instead of
:id, use*or**for dynamic path segments.