Variables only used within Pug mixins shows Typescript error

[joselcvarela]

Hello team,
Thank you very much for this amazing tool. It is really helpful.

I am using Typescript and Pug, and when I am using variables that are only used inside Pug Mixins the following error appears:

'xxx' is declared but its value is never read. ts(6133)

Here's an example:

<script setup lang="ts">
const xxx = "HEY"; // <- 'xxx' is declared but its value is never read. ts(6133)
</script>

<template lang="pug">
mixin test
  p(v-text="xxx")

+test
</template>

Do you have any suggestion?

[Shinigami92]

Could you try const xxx = ref("HEY");

---

Otherwise it could be due to using pug mixin
Maybe you should use Vue build-in stuff instead and do not mix it with pug template engine stuff

If both does not help, could you setup a minimal reproduction? Maybe via StackBlitz or GitHub Repo

[joselcvarela]

Could you try const xxx = ref("HEY");

Otherwise it could be due to using pug mixin Maybe you should use Vue build-in stuff instead and do not mix it with pug template engine stuff

If both does not help, could you setup a minimal reproduction? Maybe via StackBlitz or GitHub Repo

Still have the same issue:

Yes, I know I can create different Vue Components instead of Pug Mixins, but since this component will be the only one using those blocks I tried to simple use the mixins approach (this is basically I need the same content in one place for smaller screens and in another place for large screens).

But if Vue supports it and it is working as expected I think this can be considered a bug 🤔

---

Edit: Tried to use vue-tsc but got same issue

[woden0415]

I find some way to resolve this problem，this is my repo
https://github.com/woden0415/vue3-ts-setup-pug