W
Wasp•2w ago
Julius_Java#00

Layout in Wasp Client

How are layouts handled on the client side in wasp, do you have the root layout system like next Js or do you subscribe individual pages to layouts. I honestly prefer the latter.
2 Replies
kapa.ai
kapa.ai•2w ago
Hi @Julius_Java#00. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Wasp, layouts are handled differently than in Next.js. Wasp provides two main approaches for implementing layouts: 1. Root Component - This is a top-level wrapper for your entire application, similar to a global layout. 2. Individual Layout Components - You can create custom layout components and apply them to individual pages. Root Component Approach Wasp allows you to define a "wrapper" component for your entire React app using the rootComponent field in the client configuration: 
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",
  }
}
This Root component receives children props and must render them: 
export default function Root({ children }) {
  return (
    <div>
      <header>
        <h1>My App</h1>
      </header>
      {children}
      <footer>
        <p>My App footer</p>
      </footer>
    </div>
  )
}
export default function Root({ children }) {
  return (
    <div>
      <header>
        <h1>My App</h1>
      </header>
      {children}
      <footer>
        <p>My App footer</p>
      </footer>
    </div>
  )
}
This approach is documented in the Client Config documentation. Individual Layout Components For more granular control, you can create custom layout components and use them in your individual pages. For example, in authentication pages: 
export function Login() {
  return (
    <Layout>
      <LoginForm />
      <br />
      <span className="text-sm font-medium text-gray-900">
        Don't have an account yet? <Link to="/signup">go to signup</Link>.
      </span>
    </Layout>
  );
}

// A layout component to center the content
export function Layout({ children }) {
  return (
    <div className="w-full h-full bg-white">
      <div className="min-w-full min-h-[75vh] flex items-center justify-center">
        <div className="w-full h-full max-w-sm p-5 bg-white">
          <div>{children}</div>
        </div>
      </div>
    </div>
  );
}
export function Login() {
  return (
    <Layout>
      <LoginForm />
      <br />
      <span className="text-sm font-medium text-gray-900">
        Don't have an account yet? <Link to="/signup">go to signup</Link>.
      </span>
    </Layout>
  );
}

// A layout component to center the content
export function Layout({ children }) {
  return (
    <div className="w-full h-full bg-white">
      <div className="min-w-full min-h-[75vh] flex items-center justify-center">
        <div className="w-full h-full max-w-sm p-5 bg-white">
          <div>{children}</div>
        </div>
      </div>
    </div>
  );
}
This approach is shown in the Auth documentation. Future Improvements It's worth noting that there are open GitHub issues discussing improvements to Wasp's layout system, including support for nested routes and more sophisticated layout management. These features are being considered but are not yet implemented. Based on your preference for subscribing individual pages to layouts, the second approach would be more aligned with your preference, as it gives you more control over which layout is applied to each page. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Julius_Java#00, 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?
Fecony
Fecony•2w ago
There is just root layout that you can declare, but then you wrap your code where you need with another Layout components

Did you find this page helpful?