I'm using Typescript with Vue3 (vite). It's working fine in the <script lang="ts" setup>
tag. But in my template I do not get any auto-suggestions and the types do not work.
For example (see red lines):
In my script tag the types are working (no errors!).
I'm using the vue volar plugin.
tsconfig.vite-config.json:
{
"extends": "@vue/tsconfig/tsconfig.node.json",
"include": ["vite.config.*", "src/plugins/**/*.ts"],
"compilerOptions": {
"composite": true,
"types": ["node"]
}
}
Package.json:
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@inertiajs/inertia": "^0.11.0",
"@inertiajs/inertia-vue3": "^0.6.0",
"@inertiajs/progress": "^0.2.7",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/typography": "^0.5.8",
"@vitejs/plugin-vue": "^3.0.0",
"autoprefixer": "^10.4.12",
"axios": "^1.1.2",
"laravel-vite-plugin": "^0.7.0",
"lodash": "^4.17.19",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1",
"vite": "^3.0.0",
"vue": "^3.2.41"
},
"dependencies": {
"@heroicons/vue": "^2.0.13",
"@typescript-eslint/eslint-plugin": "^5.46.0",
"@typescript-eslint/parser": "^5.46.0",
"@vue/tsconfig": "^0.1.3",
"eslint": "^8.29.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-vue": "^9.8.0",
"lint-staged": "^13.1.0",
"prettier": "^2.8.1",
"prettier-plugin-tailwindcss": "^0.2.1",
"typescript": "^4.9.4",
"uuid": "^9.0.0",
"vue-toastification": "^2.0.0-rc.5"
}
}
What can be wrong here?