Vue3 typescipt suggestions do not show up in template

202 Views Asked by At

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):

enter image description here

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?

0

There are 0 best solutions below