{"id":180,"hash":"63fd2699415e428740ddbf978e767c400c04c0a2fc484f3470427c4aa674c8f9","pattern":"Vue 3 + Vite + Typescript - dev &amp; build not picking up TS Errors","full_message":"I'm using Vue 3, Vite and TypeScript. I wanted to give a try of building Vue project with TypeScript. The configuration has been really difficult so far. I've been looking at various documentations but I'm struggling to achieve my goal.\nThe project shouldn't build and throw errors if there's something wrong with the code.\n\nI'm attaching the code below and I'd like to ask for help, please.\n\nApp.vue\n\n<template>\n  <header>\n    <h1>The Learning Resources App</h1>\n  </header>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\n// import StoredResource from '//StoredResource';\n\ninterface VueData {\n  storedResources: StoredResource[];\n}\n\nexport default defineComponent({\n  name: 'App',\n  data(): VueData {\n    return {\n      storedResources: [\n        {\n          id: 'official-guide' as number,\n          title: 'Official Guide',\n          description: 'The official Vue.js documentation.',\n          link: 'https://vuejs.org/',\n        },\n        {\n          id: 'google',\n          title: 'Google',\n          description: 'Learn to google...',\n          link: 'https://www.google.co.uk/',\n        },\n      ],\n    };\n  },\n});\n</script>\n\npackage.json\n\n{\n  \"name\": \"the-learning-resources-app---vue-js-ts\",\n  \"version\": \"0.0.0\",\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"run-p type-check build-only\",\n    \"preview\": \"vite preview --port 5001\",\n    \"test\": \"jest src\",\n    \"test:e2e\": \"start-server-and-test preview http://127.0.0.1:5001/ 'npx cypress open'\",\n    \"test:e2e:ci\": \"start-server-and-test 'npm run build && npm run preview' http://127.0.0.1:5001/ 'npx cypress run'\",\n    \"cypress\": \"cypress run\",\n    \"build-only\": \"vite build\",\n    \"type-check\": \"vue-tsc --noEmit -p tsconfig.vitest.json --composite false\",\n    \"lint\": \"eslint .\",\n    \"lint:fix\": \"npm run lint -- --fix\",\n    \"format\": \"prettier -w .\",\n    \"prepare\": \"husky install\"\n  },\n  \"dependencies\": {\n    \"vue\": \"^3.2.36\"\n  },\n  \"devDependencies\": {\n    \"@rushstack/eslint-patch\": \"^1.1.0\",\n    \"@types/jest\": \"^28.1.1\",\n    \"@types/jsdom\": \"^16.2.14\",\n    \"@types/node\": \"^16.11.36\",\n    \"@vitejs/plugin-vue\": \"^2.3.3\",\n    \"@vue/eslint-config-prettier\": \"^7.0.0\",\n    \"@vue/eslint-config-typescript\": \"^10.0.0\",\n    \"@vue/test-utils\": \"^2.0.0-rc.18\",\n    \"@vue/tsconfig\": \"^0.1.3\",\n    \"cypress\": \"^9.7.0\",\n    \"eslint\": \"^8.5.0\",\n    \"eslint-plugin-cypress\": \"^2.12.1\",\n    \"eslint-plugin-import\": \"^2.26.0\",\n    \"eslint-plugin-simple-import-sort\": \"^7.0.0\",\n    \"eslint-plugin-vue\": \"^8.2.0\",\n    \"husky\": \"^8.0.1\",\n    \"jest\": \"^26.6.3\",\n    \"jsdom\": \"^19.0.0\",\n    \"npm-run-all\": \"^4.1.5\",\n    \"prettier\": \"^2.5.1\",\n    \"start-server-and-test\": \"^1.14.0\",\n    \"ts-jest\": \"^26.5.6\",\n    \"typescript\": \"~4.7.2\",\n    \"vite\": \"^2.9.9\",\n    \"vitest\": \"^0.13.0\",\n    \"vue-jest\": \"^5.0.0-alpha.10\",\n    \"vue-tsc\": \"^0.35.2\"\n  }\n}\n\ntsconfig.json\n\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"module\": \"esnext\",\n    \"strict\": true,\n    \"jsx\": \"preserve\",\n    \"importHelpers\": true,\n    \"moduleResolution\": \"node\",\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"sourceMap\": true,\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"/@/*\": [\n        // / to begin with.\n        \"src/*\"\n      ]\n    },\n    \"lib\": [\"esnext\", \"dom\", \"dom.iterable\", \"scripthost\"],\n    \"types\": [\"vite/client\", \"jest\", \"@types/jest\", \"node\", \"cypress\"]\n  },\n  \"include\": [\"src/**/*\"],\n  \"exclude\": [\"node_modules\"]\n}","ecosystem":"npm","package_name":"typescript","package_version":null,"solution":"For any other developers with this question.\nYou can use vite-plugin-checker for this case.\n\nInstall plugin\n\nnpm install --save-dev vite-plugin-checker\n# or\nyarn add -D vite-plugin-checker\n\nIn your vite.config.ts\n\nimport checker from 'vite-plugin-checker';\n\nexport default defineConfig({\n  plugins: [\n    // your plugins\n    checker({\n      typescript: true,\n    }),\n  ],\n  // your config\n})","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/72545700/vue-3-vite-typescript-dev-build-not-picking-up-ts-errors","votes":29,"created_at":"2026-04-19T04:41:28.223109+00:00","updated_at":"2026-04-19T04:51:09.963616+00:00"}