How to Fix the TypeScript intellisense template error in Vue

#vue #typescript #nuxt

I recently got this error while working on a Vue 3 project:

TypeScript intellisense is disabled on template. To enable, configure `"jsx": "preserve"` in the `"compilerOptions"` property of tsconfig or jsconfig. To disable this prompt instead, configure `"experimentalDisableTemplateSupport": true` in `"vueCompilerOptions"` property.volar

No need to panic, just disable this Volar message exactly how it says.

In your .tsconfig file you need to add "jsx": "preserve" in the compilerOptions section:

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

I’m using Nuxt 3, so my TypeScript config file looks a little different:

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "jsx": "preserve"
  }
}

If you’re using a jsconfig file instead, it may look closer to this:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "jsx": "preserve"
  },
  "include": ["src/**/*"]
}

The jsx option on the .tsconfig controls how ts transforms and outputs .tsx files, but this error happens on .vue files with no tsx extension.

So changing this option to silence the warning has no real effect on our projects. In Vue we are only using TypeScript for type checking so this option doesn’t affect anything that we’re doing.

This issue is likely happening because of the TypeScript Language Server that VS Code uses to provide the Intellisense feature. Volar hooks into this server, but unfortunately, has no control over it.