Nuxt•2w ago

Set layout in routes

Hello Kapa told me about a legendary appLayout in the nuxt.config.ts but it doesn't seem to exist

    routeRules: {
        '/admin/**': { ssr: false, appLayout: 'admin' },
    }

    routeRules: {
        '/admin/**': { ssr: false, appLayout: 'admin' },
    }

Is there a way without using a middleware to set up a layout for a specific routes ? Thanks 🙂

3 Replies

kapa.ai•2w 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: ---------------------- Hello! You're asking about setting layouts for specific routes in Nuxt without using middleware. The appLayout property in route rules that you mentioned is not currently available in the stable version of Nuxt. However, I can see from the knowledge sources that there is a pull request (#31092) that aims to add this feature, which would allow setting layouts via route rules using the appLayout property exactly as you've shown in your example:

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

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

But since this feature isn't available yet, here are your current options for setting layouts for specific routes: 1. Using definePageMeta in your page components: This is the standard way to define layouts for specific pages:

   <script setup lang="ts">
   definePageMeta({
     layout: 'admin'
   })
   </script>

   <script setup lang="ts">
   definePageMeta({
     layout: 'admin'
   })
   </script>

2. Using setPageLayout utility: You can dynamically change the layout of a page using the setPageLayout utility. While this is often used in middleware, you can also use it in plugins:

   // In a plugin
   export default defineNuxtPlugin(() => {
     const route = useRoute()
     if (route.path.startsWith('/admin')) {
       setPageLayout('admin')
     }
   })

   // In a plugin
   export default defineNuxtPlugin(() => {
     const route = useRoute()
     if (route.path.startsWith('/admin')) {
       setPageLayout('admin')
     }
   })

Note that if you set the layout dynamically on the server side, you must do so before the layout is rendered to avoid hydration mismatches as mentioned in the documentation. 3. Using nested routes: For sections of your site that share common elements (like a sidebar in an admin area), you can use nested routes instead of layouts:

   pages/
     profile.vue (parent with shared elements)
     profile/
       index.vue
       favorite.vue

   pages/
     profile.vue (parent with shared elements)
     profile/
       index.vue
       favorite.vue

In this approach, the parent component (profile.vue) contains the shared elements and a <NuxtPage/> component to render the child routes as suggested in a Stack Overflow answer. The appLayout feature you mentioned would be a more elegant solution, but until it's officially released, these are your best options for setting layouts based on routes without middleware. I hope this helps! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

OmnislashOP•2w ago

ok thanks, can't wait for it to be avai

Gaming

Programming

Set layout in routes

Did you find this page helpful?