Pug template data binding in Vue component

Hi all,

When using .pug templates with Vue single file component, how to use native Pug loops and conditions?

When I do this, for example:

ul
      li(v-for="item in data") {{item}}

Template renders correctly, but that is view template syntax mixed into pug.
However, when I’m trying to do something like:

ul
      each item in data
        li= item

I’m getting en error during build: “Cannot read property ‘length’ of undefined”

I’ve tried using “data”, “this.data”, component name and so on

Does anybody had such a problem?

1 Like

The data variable corresponds to component state and is defined at runtime.

Where as if you use each item in data then data should be available at compile time. Simply put, you cannot use JS variables as pug variables (if they call 'em so).

1 Like

Might be a bit weird to revive this, however 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:

As an example, instead of this:

<template lang="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}}
</template>

<script> 
  // ...Vue component JS

The pug-vue-loader lets you do this:

<template lang="pug">
ul
  for item in items
    if item.type == 'link'
      a(:href="item.url") some link title: #{item.title}
    else
      p= item.content
</template>

<script>
  // ...Vue component JS

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