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:

react 19.2 what is new and what to expect

React 19.2 is here: Activity API, useEffectEvent and more

Discover what’s new in React 19.2, which features long-awaited features like the Activity API and the useEffectEvent Hook.

David Omotayo
Oct 13, 2025 ⋅ 7 min read
ai dev tool power rankings

AI dev tool power rankings & comparison [Oct 2025]

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

Chizaram Ken
Oct 13, 2025 ⋅ 9 min read

Hooks vs. Signals: The great reactivity convergence explained

React Hooks and SolidJS Signals solve reactivity differently. Learn how each manages state and updates, and when to choose one approach over the other.

Isaac Okoro
Oct 10, 2025 ⋅ 4 min read

Exploring the new Chakra UI MCP Server

Discover how the Chakra UI MCP server integrates AI into your editor, reducing context switching and accelerating development by fetching real-time documentation, component data, and code insights directly in-app.

Emmanuel John
Oct 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