Invalid syntax in Vue templates after build

[dulnan]

I am using version 1.0.1 of @nuxt/module-builder.

Given this Vue component located in ./src/runtime/components/Foobar.vue:

<template>
  <div>
    <div>{{ $test('foobar', "Foobar 'test'") }}</div>
    <div>{{ $test('foobar', 'Foobar test') }}</div>
    <div>{{ $test('foobar', `Foobar ' " ''" test`) }}</div>
  </div>
</template>

<script lang="ts" setup>
const $test = (key: string, text: string): string => key
</script>

After running nuxt-module-build build, the output in ./dist/runtime/components/Foobar.vue looks like this:

<template>
  <div>
    <div>{{ $test(\"foobar\", \"Foobar "test"\") }}</div>
    <div>{{ $test('foobar', 'Foobar test') }}</div>
    <div>{{ $test(\"foobar\", `Foobar " \" ""\" test`) }}</div>
  </div>
</template>

<script setup>
const $test = (key, text) => key;
</script>

Here the first and the third call to $test produced invalid syntax. It looks like it tries to escape the quotes when it wouldn't be needed, especially in the third example using backticks.

[danielroe]

you can refresh your lockfile to pull in vue-sfc-transformer@0.1.11

[dulnan]

Thank you, the fix works!

I'd also like to say a big thanks for the new module builder version, especially with vue-sfc-transformer. It has had an insanse positive impact on performance. One of my modules contains around 200 components which previously were all fully type-checked in every project and they were subject to custom compilerOptions per project. But now that these components are shipped already transpiled, the typecheck is significantly faster. Like 3-5 times faster!