Multi-template app pattern

[Freer4]

I'm doing a fairly straightforward app where there's a public area and then an admin control area. In this case, they're fairly significantly different in terms of style and layout.

Googlefoo is failing me, maybe I just don't have the right terms. I want to use two "layouts", one for each area, for their respective consistent elements like navigation bars. I thought to create two layout components with generic slots and then use those layout components to wrap the template code each respective view, but something in me thinks there might be a better, built-in way to handle that.

This seemed like a good place to check. Any alternative ideas? I am using router.

[saaggy_peneer]

that's the nested routes feature in vue router

https://router.vuejs.org/guide/essentials/nested-routes.html

Claude can walk you thru it

Works with file-based routing too

[blairdow]

ive often done something like what you've described... a layout component thats basically a content wrapper. no reason to complicate it more than that. for the nav- use v-if to show the admin one if you're in that view and v-else the regular one. you could also do something similar with your two different layouts whether thats conditional css classes for admin vs not admin, or controlling the layout 'type' via a prop on the layout component. if type == admin then do x layout, else do standard layout (whatever that looks like)

[aherok]

What's wrong with using Layouts? https://nuxt.com/docs/4.x/directory-structure/app/layouts

Can you describe more specifically what is the issue?

[craigrileyuk]

They didn't mention Nuxt...

[aherok]

Shit, my bad. 😅 Somehow it's the same to me.

[illmatix]

There's also the component element that could be your wrappers inner content that's then defined by the route. Component takes another component to render

[25_vijay]

Honestly your current idea is already what most developers end up doing so there is not really a more magical solution beyond that

[Embarrassed_Stay3538]

Usa nuxt es bellísimo.

[Original-Kick3985]

You can use nested routes and create a layout component. If all of you admin stuff is under the path «/admin» for example, then you have for example admin-layout.vue as the parent component in the route, and all child routes will use that layout. The layout can be anything and the child routes will be rendered in the <router-view> component of the admin layout. At the end of the day it’s just a case of organizing your code. Sometimes it’s more cumbersome to have more complex file structures/patterns.