How to create pugjs components?

Admin 1
Viewed 948

Is there a possiblitiy of creating pugjs components where I can call the component like x-button Sign In

The component will look like this

button(class="py-3 px-8 rounded-lg inline-flex justify-center items-center font-semibold text-base leading-6 tracking-wide") #{text}

Similar to this concept Laravel component

pug tailwind-css javascript
2 Answers

This is what Pug mixins are for:

// declare the mixin
mixin x-button
  button.py-3.px-8.rounded-lg.inline-flex.justify-center.items-center.font-semibold.text-base.leading-6.tracking-wide
    if block
      block

// use the mixin
+x-button Sign In
user_53517210

The Pug equivalents of components are template inheritance and includes. Includes would work for your use case:

//- includes/button.pug
button(class="py-3 px-8 rounded-lg inline-flex justify-center items-center font-semibold text-base leading-6 tracking-wide") #{text}

//- some-page.pug
//- index.pug
doctype html
html
  head
  body
    - var text = 'some-button-text'
    include includes/button.pug
user_57749520
Related