Shoelace Pug Loader

A Pug Mixin for easily loading Shoelace Web Components.

Getting Started

First, install with npm i shoelace-pug-loader.

Then, import the mixin into your Pug file:

include node_modules/shoelace-pug-loader/loader.pug

//- or from views/
include ../node_modules/shoelace-pug-loader/loader.pug

Usage

Selecting a theme

Shoelace has two themes: light and dark. You can load one or both of them by passing the theme name to the slTheme mixin:

+slTheme('dark')

Multiple themes

You may specify this twice to use both themes. See Shoelace docs for more info.

html
    head
        +slTheme('dark')
        +slTheme('light')
    body
        nav.sl-theme-dark
            h1 Dark-themed content
            p This is dark-themed content, enjoy it at night!
        h1 Light-themed content
        p The rest of the document is light-themed.

Loading components

There are four ways to load components:

//- One at a time
+slComponent('button')
+slComponent('icon')

//- Multiple at once (note the plural form)
+slComponents('button', 'icon')

//- Automatically
+slAuto

//- ALL components at once (this is NOT recommended)
+slAllComponents

Using components

This mixin only imports the components. You still have to use them in your HTML.

html
    head
        +slTheme('dark')
        +slComponents('icon-button', 'tooltip')
    body
        sl-tooltip(content='Open settings')
            sl-icon-button(name='gear' label='Settings')

License

ISC