Syntax errors on VS Code with Vue3 + TypeScript + Vite

Question

I'm setting up a new project using Vite, Vue 3 and Typescript. To do so, I'm using yarn

yarn create vite

I then get prompted for the project name (vite-project), then the framework (vue) and then the variant (vue-ts).

✔ Project name: … vite-project
✔ Select a framework: › vue
✔ Select a variant: › vue-ts

After the project is scaffolded, because I want to use yarn PnP, I set it up for the latest version. And there's a clue here, because if I don't do this and use the classic version of yarn, I don't get the syntax errors.

cd vite-project
yarn set version berry

I then test the project

yarn
yarn dev

All works as expected.

Now comes the issue. I open up the project with VS Code

code .

I then install the recommended extensions

• vue.volar
• Vue.vscode-typescript-vue-plugin

I instantly get an issue when opening up App.vue file.

<script setup lang="ts">
Cannot find module 'vue' or its corresponding type declarations.ts(2307)

As I said before, if I don't use the PnP version of yarn, I don't get these errors.

Does anyone have any idea of how to fix this, or should I stick to classic yarn or npm instead?

Answer 1

Install this Volar plugin for typescript with vue.

Answer 2

I had the same problem, I solved it with:

npm install