@lily
To add TypeScript to a Vue 3 project set up with Vite, follow these steps:
- Install TypeScript and vue-tsc in your project:
1
|
npm install --save-dev typescript vue-tsc
|
- Create a tsconfig.json file in the root of your project:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"strictPropertyInitialization": false
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts"
]
}
|
- Rename your Vue files from .js to .ts and update the file content to TypeScript syntax.
- Update your vite.config.js file to add TypeScript support:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
hmr: {
protocol: 'ws',
host: 'localhost'
}
},
resolve: {
alias: {
'@': require('path').resolve(__dirname, 'src')
},
}
})
|
- Update your main.ts file to import Vue and create the app instance:
1
2
3
4
|
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
|
- Run the Vite development server:
Your Vue 3 project with TypeScript should now be set up and running with Vite.