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:

too many tools: How to manage frontend tool overload

Too many tools: How to manage frontend tool overload

Read about how the growth of frontend development created so many tools, and how to manage tool overload within your team.

Shalitha Suranga
Sep 11, 2025 â‹… 12 min read
shruti kapoor the modern ai stack

What you actually need to build and ship AI-powered apps in 2025

Discover what you actually need to build and ship AI-powered apps in 2025, with tips for which tools to choose and how to implement them.

Shruti Kapoor
Sep 10, 2025 â‹… 10 min read
ai dev tool power rankings

AI dev tool power rankings & comparison [Sept 2025]

Compare the top AI development tools and models of September 2025. View updated rankings, feature breakdowns, and find the best fit for you.

Chizaram Ken
Sep 10, 2025 â‹… 9 min read
file based routing in react router

File-based routing in React Router v7 – Why keep it optional?

Explore the new mode that introduced file-based routing in v7, why it remains optional, and when to use it or stick with a different approach.

Elijah Asaolu
Sep 9, 2025 â‹… 6 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