templateInterpolationService does not work in Nuxt projects

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Linux
• Vetur version: 0.22.3
• VS Code version: 1.38.1

Problem

I set “vetur.experimental.templateInterpolationService” to true in my settings. Interpolation does not work on vue template inside a Nuxt projet. It however works in a standart Vue project.

Reproducible Case

• npx create-nuxt-app test and choose all default with jsconfig enabled
• Replace pages/index.vue text by:

<template>
  <v-layout>
    <p>{{ helloWorld }}</p>
  </v-layout>
</template>

<script>
export default {
  name: 'Accueil',
  data() {
    return {
      helloWorld: 'test'
    }
  },
  head() {
    return {
      title: 'Accueil'
    }
  }
}
</script>

• Now the interpolation doesn’t work, it is probably due to custom methods used by nuxt such as head().

[ktsn]

Yes, your assumption is correct. Since template interpolation service uses TypeScript type of Vue component, it needs to be properly typed. You should install @nuxt/types and read it in jsconfig.json.

{
  "include": [
    "./src/**/*",
    "./node_modules/@nuxt/types/index.d.ts"
  ]
}

[rchl]

That’s the restriction of TypeScript and the current Vue’s typing.

Well, then I guess there is no bug here.

In any cases, the composition API in Vue v3 will get rid of this problem

Personally I do plan to switch to TS eventually but this is about JS + JSDoc annotations. 😃