Nuxt•3mo ago

layout in nuxt.config

Hello Kapa Is it now possible to choose the layout directly in nuxt.config depending on the route ? I know it was a thing that was discussed in a issue but I can't find it

5 Replies

kapa.ai•3mo ago

Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it is now possible to choose the layout directly in your nuxt.config depending on the route. This feature was introduced via support for the appLayout property in routeRules. You can define layouts for specific routes or route patterns in your Nuxt config like this:

export default defineNuxtConfig({
  routeRules: {
    '/admin': { appLayout: 'admin' },
    '/dashboard/**': { appLayout: 'dashboard' }
  }
})

export default defineNuxtConfig({
  routeRules: {
    '/admin': { appLayout: 'admin' },
    '/dashboard/**': { appLayout: 'dashboard' }
  }
})

This allows you to centrally and declaratively manage which layout is used for different routes, without needing to set the layout individually in each page or use middleware workarounds. This feature was added to provide a more structured approach to layout assignment across your application feat(nuxt): support appLayout in route rules. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

OmnislashOP•3mo ago

@kapa.ai I think you found a way to get your hand on robot drug again :X Tried it but it says this :

Object literal may only specify known properties, and 'appLayout' does not exist in type '{ cache?: false | { base?: string | undefined; swr?: boolean | undefined; integrity?: any; name?: string | undefined; group?: string | undefined; maxAge?: number | undefined; staleMaxAge?: number | undefined; headersOnly?: boolean | undefined; varies?: (string | undefined)[] | ... 1 more ... | undefined; } | undefin...'.ts(2353)

Object literal may only specify known properties, and 'appLayout' does not exist in type '{ cache?: false | { base?: string | undefined; swr?: boolean | undefined; integrity?: any; name?: string | undefined; group?: string | undefined; maxAge?: number | undefined; staleMaxAge?: number | undefined; headersOnly?: boolean | undefined; varies?: (string | undefined)[] | ... 1 more ... | undefined; } | undefin...'.ts(2353)

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry for the confusion. According to the most recent official Nuxt documentation in the knowledge sources, the appLayout property in routeRules is not yet documented as a stable, officially released feature. The PR you referenced (feat(nuxt): support appLayout in route rules) shows that this feature was proposed and implemented, but if you are seeing a TypeScript error like:

Object literal may only specify known properties, and 'appLayout' does not exist in type ...

Object literal may only specify known properties, and 'appLayout' does not exist in type ...

it means that your current Nuxt version does not recognize appLayout as a valid property in routeRules. This suggests that the feature is either not yet released in a stable Nuxt version, or your project is using a version prior to its introduction. Current alternatives:
- You can still dynamically set layouts using the setPageLayout helper in middleware or page scripts, as described in the documentation. This is the officially supported way to change layouts based on route conditions for now setPageLayout. - If you want to use the appLayout property, you would need to ensure you are on a Nuxt version that includes this PR, which may require using a canary or edge release, or waiting for the next stable release that includes it. Summary:
The knowledge sources do not confirm that appLayout in routeRules is available in the latest stable Nuxt release. If you need this feature, please check your Nuxt version and the release notes, or continue using the dynamic layout assignment methods described in the official docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@305772639438503936> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

layout in nuxt.config

Did you find this page helpful?