DEV Community

Cover image for How to Fix the TypeScript intellisense template error in Vue
Michael Thiessen
Michael Thiessen

Posted on • Originally published at michaelnthiessen.com

2 2

How to Fix the TypeScript intellisense template error in Vue

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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

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

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.

Billboard image

Use Playwright to test. Use Playwright to monitor.

Join Vercel, CrowdStrike, and thousands of other teams that run end-to-end monitors on Checkly's programmable monitoring platform.

Get started now!

Top comments (1)

Collapse
 
kissu profile image
Konstantin BIFERT

Haha, I simply disable TS in my projects. 😹
Maybe I need to get on the train some day. 🤔

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay