Working with pugjs

About using other template formats

FerrugemJS support working with any template format since it transpile to raw html. In these section we will help you to do it, but you can meybe prefer using our official branch with pugjs already installed.

Install

npm install pug pug-html-loader ferrugemjs-loader --save-dev
npm i ferrugemjs --save

Initialization

in "index.html"

 <div app="hello-world" template-extension=".pug"></div>

in "webpack.config.js"

module: {
    loaders: [
        {
            test: /\.pug$/,
            loaders: [
                { loader: "ferrugemjs-loader", options: { templateExtension: ".pug" }},
                "pug-html-loader"
            ]
        }
        //... others loaders
    ]
},
resolve: {
    extensions: [".ts", ".pug", ".js"],
    alias: {
        //... alias
    }
}

in "hello-world.pug"

template
    .hello-world
        h1(alt="hello world") Hello world!

Tips with pug

Using ferrugemjs if and for tags.

eg.

template
    .hello-world
        #{"if"}(condition="1 < 4")
            do any thing here ....
        #{"for"}(each="item in this.itens")
            do any thing with item here ...

Dinamic class

Using ferrugem dinamic class.

eg.

template
    .hello-world
        div(class="${'main-class '+( 1 < 4 ? 'class1' : 'class2')}")