├── src ├── vite-env.d.ts ├── components │ ├── HelloWorld.css │ └── HelloWorld.tsx ├── main.ts ├── App.css ├── App.tsx └── style.css ├── .vscode └── extensions.json ├── tsconfig.node.json ├── .gitignore ├── index.html ├── public ├── static │ └── img │ │ └── vue.svg └── vite.svg ├── package.json ├── tsconfig.json ├── vite.config.ts └── README.md /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/components/HelloWorld.css: -------------------------------------------------------------------------------- 1 | .read-the-docs { 2 | color: #888; 3 | } -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | height: 6em; 3 | padding: 1.5em; 4 | will-change: filter; 5 | transition: filter 300ms; 6 | } 7 | .logo:hover { 8 | filter: drop-shadow(0 0 2em #646cffaa); 9 | } 10 | .logo.vue:hover { 11 | filter: drop-shadow(0 0 2em #42b883aa); 12 | } 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + Vue + TS 8 | 9 | 10 |

11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /public/static/img/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-vue-typescript-starter", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vue-tsc && vite build", 9 | "preview": "vite preview" 10 | }, 11 | "dependencies": { 12 | "vue": "3.5.13" 13 | }, 14 | "devDependencies": { 15 | "@vitejs/plugin-vue": "5.2.1", 16 | "@vitejs/plugin-vue-jsx": "4.1.1", 17 | "typescript": "5.7.3", 18 | "vite": "6.1.0", 19 | "vue-tsc": "2.2.0" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import { defineComponent } from "vue"; 2 | import HelloWorld from "./components/HelloWorld"; 3 | import "./App.css"; 4 | 5 | export default defineComponent({ 6 | props: {}, 7 | 8 | setup() { 9 | return () => ( 10 | <> 11 |

12 | 13 |

14 | 15 | 16 |

17 | 18 |

19 | 20 | 21 | ); 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], 24 | "references": [{ "path": "./tsconfig.node.json" }] 25 | } 26 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | import vueJsx from "@vitejs/plugin-vue-jsx"; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | plugins: [vue(), vueJsx()], 8 | build: { 9 | rollupOptions: { 10 | output: { 11 | assetFileNames: (assetInfo) => { 12 | var info = assetInfo.name.split("."); 13 | var extType = info[info.length - 1]; 14 | if ( 15 | /\.(mp4|webm|ogg|mp3|wav|wma|flac|aac|3gp|avi|flv|mkv|mov|rmvb|ts|vob|webm|wmv)(\?.*)?$/i.test(assetInfo.name) 16 | ) { 17 | extType = "media"; 18 | } else if (/\.(png|jpe?g|gif|svg|bmp|tiff|webp)(\?.*)?$/i.test(assetInfo.name)) { 19 | extType = "img"; 20 | } else if (/\.(woff2?|eot|ttf|otf|ttc|fnt)(\?.*)?$/i.test(assetInfo.name)) { 21 | extType = "fonts"; 22 | } 23 | return `static/${extType}/[name]-[hash][extname]`; 24 | }, 25 | chunkFileNames: "static/js/[name]-[hash].js", 26 | entryFileNames: "static/js/[name]-[hash].js", 27 | }, 28 | }, 29 | }, 30 | }); 31 | -------------------------------------------------------------------------------- /src/components/HelloWorld.tsx: -------------------------------------------------------------------------------- 1 | import { ref, withModifiers, defineComponent } from "vue"; 2 | import "./HelloWorld.css"; 3 | 4 | export default defineComponent({ 5 | props: { 6 | msg: String, 7 | }, 8 | 9 | setup(props) { 10 | const count = ref(0); 11 | const { msg } = props; 12 | 13 | const inc = () => { 14 | count.value++; 15 | }; 16 | 17 | return () => ( 18 | <> 19 |

{ msg }

20 | 21 |

22 | 25 |

26 | Edit 27 | components/HelloWorld.vue to test HMR 28 |

29 |

30 |

31 | Check out 32 | 36 | create-vue 37 | 38 | , the official Vue + Vite starter 39 |

40 |

41 | Install 42 | 43 | Volar 44 | 45 | in your IDE for a better DX 46 |

47 |

48 | Click on the Vite and Vue logos to learn more 49 |

50 | 51 | ); 52 | }, 53 | }); 54 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + TypeScript + Vite 2 | 3 | This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `