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:

Typescript or Zod for Validation?

TypeScript vs Zod: Clearing up validation confusion

Learn when to use TypeScript, Zod, or both for data validation. Avoid redundant checks and build safer, type-sound applications.

Alexander Godwin
Oct 6, 2025 ⋅ 3 min read
Wasm 3 Before GTA 6 LogRocket Article

We got Wasm 3.0 before GTA 6: Meet the web’s new engine

Discover how WebAssembly 3.0’s garbage collector, exception handling, and Memory64 transform Wasm into a true mainstream web platform.

Ikeh Akinyemi
Oct 3, 2025 ⋅ 2 min read

How to use AI to build accurate ShadCN components

AI agents often break shadcn/ui components with outdated docs or made-up props. The MCP server fixes this by giving live access to registries. In this tutorial, we’ll set it up and build a Kanban board to show it in action.

Chizaram Ken
Oct 3, 2025 ⋅ 5 min read
Rust Project for Web Services LogRocket Article

The best way to structure Rust web services

Learn how to structure Rust web services with clean architecture, Cargo workspaces, and modular crates for scalable, maintainable backends.

Jude Miracle
Oct 2, 2025 ⋅ 2 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