2021-02-04
1496
#vue
Wisdom Ekpot
33935
Feb 4, 2021 â‹… 5 min read

Pug.js tutorial: A beginner’s guide with examples

Wisdom Ekpot A student of Ibom Metropolitan Polytechnic studying computer engineering, Wisdom has been writing JavaScript for two years, focusing on Vue.js, Angular, and Express.js.

Recent posts:

A crash course in Next.js middleware

A crash course in Next.js middleware

Learn the ins and outs of Next.js middleware, which allows you to perform actions before a request is completed and modify the response accordingly.

Temitope Oyedele
May 23, 2025 â‹… 9 min read
How AI Is Changing Debugging With Google Gemini

How AI is changing debugging with Google Gemini

The Google Gemini AI model has integrated AI-powered features to improve the debugging experience in web development.

Emmanuel John
May 23, 2025 â‹… 5 min read
10 Node.js 24 features you're probably not using

10 Node.js 24 features you’re probably not using

The Node.js 24 release included significant updates. Explore 10 features you might not be using yet — but absolutely should be.

Emmanuel John
May 22, 2025 â‹… 8 min read
six CSS animation libraries to bring your project to life in 2025

6 CSS animation libraries to bring your project to life in 2025

Explore six of the best, easiest, most configurable, and convenient CSS animation libraries available in 2025.

Murat YĂĽksel
May 22, 2025 â‹… 8 min read
View all posts

5 Replies to "Pug.js tutorial: A beginner’s guide with examples"

  1. Who still implement express when it’s natively supported with vue cli or nuxt ? And vite / snowpack.

  2. I have just made `pug-vue-loader`, a replacement for `pug-plain-loader` that allows you to use _proper_ pug syntax in your Vue pug templates, to access Vue state in native pug `each`/`for` blocks, as well as `if`/`else` etc… and also use proper pug variable interpolation eg `li= someVarFromVue` or `li normal text #{someVarFromVue}`

    If you like real pug syntax and want to use its first-class loops/conditionals etc in your Vue templates, check it out:

    https://www.npmjs.com/package/pug-vue-loader

    As an example, instead of this:

    “`pug

    ul
    li(v-for=”item in items”)
    a(v-if=”item.type == ‘link'” :href=”item.url”) some link title: {{item.title}}
    p(v-else) {{item.content}}

    // …Vue component JS
    “`

    The `pug-vue-loader` lets you do this:

    “`pug

    ul
    for item in items
    if item.type == ‘link’
    a(:href=”item.url”) some link title: #{item.title}
    else
    p= item.content

    // …Vue component JS
    “`

    Since it’s new, would like to get people using it, reporting any issues etc. Cheers

  3. this tutorial doesnt run. First you get errors that babel core was installing the wrong version, then you get vue not found in node_modules so the import would fail when you try to build. After I fix those I get a 404 error when the home.pug tries to load the script.

  4. Thank you for this tutorial.
    As of today, still the same. The first part is working. But then installing Vue and trying to use webpack, no file public/js/home.bundle.js gets compiled when running

    npm run dev

    So either fix this tutorial or mark it as outdated?

Leave a Reply