Wasp-lang•4w ago

Different Root Components for Pages

Is there a possibility to define multiple root components and assign them in the wasp config file per page? So instead of one global root component i would want something like:

route HomeRoute { path: "/", to: Home }
page Home {
  authRequired: true,
  component: import Main from "@src/client/pages/home"
  rootComponent: import RootForLoggedInUsers from "@src/client/root/root-for-logged-in-users"
}

route HomeRoute { path: "/", to: Home }
page Home {
  authRequired: true,
  component: import Main from "@src/client/pages/home"
  rootComponent: import RootForLoggedInUsers from "@src/client/root/root-for-logged-in-users"
}

This would allow for different setups for different roles / subpages? Some usecases: - Different Layouts for auhenticated pages vs public pages - Some pages need a Cookie Banner and some might not - I only need tracking / Analytics on some flows I know i could just inject these on demand in each PageComponent but was wondering what you guys think about a more modular approach to define this root component additionally per page instead of globally only.

6 Replies

kapa.ai•4w ago

Hi @Gwaggli. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Currently, Wasp allows you to define a single root component that wraps your entire application. This is defined in the client field inside the app declaration in your main.wasp file. This root component can be used to define a common layout for your application or to set up various providers that your application needs. Here is an example:

app MyApp {  
 title: "My app",  
 // ...  
 client: {  
 rootComponent: import Root from "@src/Root.jsx",  
 }  
}

app MyApp {  
 title: "My app",  
 // ...  
 client: {  
 rootComponent: import Root from "@src/Root.jsx",  
 }  
}

Source: Wasp Docs - Project - Client Config (https://wasp-lang.dev/docs/project/client-config) However, there is currently no built-in way to define multiple root components and assign them per page in Wasp. Your use case is interesting and it seems like it would be a valuable feature to have. There is an open issue on the Wasp GitHub repository discussing the addition of support for Layouts, which seems related to your question. The idea is to allow users to define "Layouts" that can be used to wrap pages, potentially allowing for different setups for different pages. You can follow or contribute to the discussion here: Github Issue (open): Add support for Layouts (UI) (https://github.com/wasp-lang/wasp/issues/985) In the meantime, you might have to manually wrap each page in the specific layout or root component as needed. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Gwaggli, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Filip•4w ago

Hey @Gwaggli Hmm, I don't think you can. But I think you can do stuff conditionally inside the one root component you do define (i.e., render different pages based on children, but I've never done it). Although I think this option is maybe going away in the next release. @miho, can you jump in here, you're more familiar with the recent developments.

Gwaggli•4w ago

Yeah i think the linked github issue is pretty much what i was describing! So kinda curious what the state of this discussion is. Thanks for the idea and interested in hearing what the most recent state of development is 🙂

Filip•4w ago

I added your comment to the issue. We'll probably be discussing it in two days during our planning session. I recommend subscribing to the issue to follow the progress 🙂

miho•4w ago

What @sodic recommended is what I'd do with the current available APIs: in the root component switch the layout component based on the route. Usually you don't need more then a few layouts so this should be fine. In the future ... we should come up with a way to specify layout per page / group of pages etc.

Gwaggli•4w ago

Thank you for the update and the ideas! much apreciated 🙂

Gaming

Programming

Different Root Components for Pages