Extracting A Layout Component

In this lesson, we'll learn how we can create EdgeJS layouts using components so that we don't have to redefine or HTML structure for every page in our application.

Published
Feb 13
Duration
5m 13s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Join The Discussion! (4 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. Commented 5 months ago

    Hi Tom,

    Just wonder… the Edge docs encourages the use of components instead of layout. I can see the repo in the final version of the application and you are still using the layout() in the index.edge file.

    Is there anything I'm missing here?

    1

    Please sign in or sign up for free to reply

    1. Commented 5 months ago

      Hi Redeemefy!!

      Although we're calling it as layout(), it is created and defined as a component! When you place your components within resources/views/components AdonisJS will automatically register those components as EdgeJS tags, which is what allows us to refer to our layout as layout() rather than component('components/layout').

      Hope this helps!

      1

      Please sign in or sign up for free to reply

  2. Commented 5 months ago

    Hi Tom,
    I am new to adonisjs and template engines. I wonder how to write CSS without tailwind with my custom classes.I want to write my style and component in the same file. For example:

    /resources/components/button/index.edge

    <button class="my_class">…</button>
    <style>
    .my_class {
    background: red
    }
    </style>

    And style names won't be conflict with the same name in another edge file. Just like in Astro framework or React Native. I think they call it component base CSS.

    1

    Please sign in or sign up for free to reply

    1. Commented 5 months ago

      Hi Random123!

      This isn't typically something Template Engines provide. Template Engines are really only concerned about generating markup and don't concern themselves with how that markup is used after it's generated.

      You can look at potential third-party solutions to add this, though. I've never used it, but one that may solve what you're after is css-scope-inline.

      1

      Please sign in or sign up for free to reply

Playing Next Lesson In
seconds