Pug template not working with nuxt variables

Question

I am trying to run a simple pug for loop inside of my nuxt app.

I installed https://www.npmjs.com/package/vue-pug-loader by running the commands, and the syntax seems to work:

<template lang="pug">
  if (10 / 2) == 5
    p Hello world!
</template>

This shows hello world correctly, so does a for loop like

<template lang="pug">
  for item in ["1", "2", "3"]
    p #{item}
</template>

But whenever I try and use a variable from my script It throws an error:
Cannot read properties of undefined (reading 'length')

<template lang="pug">
  for item in pages // error triggers here
    p #{item}
</template>

<script>
let pages = ["1", "2", "3"]
</script>

<style>
</style>

What am I doing wrong?

typed-sigterm · Accepted Answer · 2024-10-19 13:54:45Z

1

It doesn't relates to Pug.

<script>
let pages = ["1", "2", "3"]
</script>

<script> and <script setup> are different, see API Styles. The top-level variables in <script> won't be exposed to <template>.

You can simply change <script> to <script setup>, or:

<script>
export default defineComponent({
  setup() {
    let pages = ["1", "2", "3"]
    return { pages }
  }
})
</script>

Or using Options API:

<script>
export default defineComponent({
  data() {
    return { pages: ["1", "2", "3"] }
  }
})
</script>

answered Oct 19, 2024 at 13:54

typed-sigterm

1,2691 gold badge13 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

m rolland Over a year ago

That doesn't seem to work strangely, I tried all of your methods but its still the same error

typed-sigterm Over a year ago

@mrolland Please provide a minimal reproducible example using StackBlitz or CodeSandbox

Collectives™ on Stack Overflow

Pug template not working with nuxt variables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related