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.

Created by
@tomgobich
Published

Join the Discussion 4 comments

Create a free account to join in on the discussion
  1. @redeemefy

    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
    1. Responding to redeemefy
      @tomgobich

      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
  2. @random123

    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
    1. Responding to random123
      @tomgobich

      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