DEV Community

Cover image for Creating vite vue ts template: Project configs improvements
Sardorbek Imomaliev
Sardorbek Imomaliev

Posted on • Updated on


Creating vite vue ts template: Project configs improvements

Improve configs

  1. Update tsconfig.json.

         "esModuleInterop": true,
    -    "lib": ["esnext", "dom"]
    +    "lib": ["esnext", "dom"],
    +    "baseUrl": ".",
    +    "paths": {
    +      "@/*": ["src/*"]
    +    }
    -  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
    +  "include": [
    +    "src/**/*.ts",
    +    "src/**/*.d.ts",
    +    "src/**/*.tsx",
    +    "src/**/*.vue",
    +    "tests/**/*.ts",
    +    "tests/**/*.tsx"
    +  ]
  2. Now we can update our code to use @ as root of a local import path.

    In src/App.vue

    -import HelloWorld from './components/HelloWorld.vue'
    +import HelloWorld from '@/components/HelloWorld.vue'

    In src/main.ts

    -import App from './App.vue'
    +import App from '@/App.vue'
    -  <img alt="Vue logo" src="./assets/logo.png" />
    +  <img alt="Vue logo" src="@/assets/logo.png" />
  3. git add -u

  4. git cim 'update tsconfig: add tests to include and use @ as root'

  5. But if we run our dev server, we will get this error.

    $ npm run dev
    > vite-vue-typescript-starter@0.0.0 dev
    > vite
     > html:/path/to/project/vue-ts/src/App.vue:3:23: error: Could not resolve "@/components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)
        3 β”‚ import HelloWorld from '@/components/HelloWorld.vue'
          β•΅                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    error when starting dev server:
    Error: Build failed with 1 error:
    html:/path/to/project/vue-ts/src/App.vue:3:23: error: Could not resolve "@/components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)
        at failureErrorWithLog (/path/to/project/vue-ts/node_modules/esbuild/lib/main.js:1449:15)
        at /path/to/project/vue-ts/node_modules/esbuild/lib/main.js:1131:28
        at runOnEndCallbacks (/path/to/project/vue-ts/node_modules/esbuild/lib/main.js:921:63)
        at buildResponseToResult (/path/to/project/vue-ts/node_modules/esbuild/lib/main.js:1129:7)
        at /path/to/project/vue-ts/node_modules/esbuild/lib/main.js:1236:14
        at /path/to/project/vue-ts/node_modules/esbuild/lib/main.js:609:9
        at handleIncomingPacket (/path/to/project/vue-ts/node_modules/esbuild/lib/main.js:706:9)
        at Socket.readFromStdout (/path/to/project/vue-ts/node_modules/esbuild/lib/main.js:576:7)
        at Socket.emit (node:events:394:28)
        at Socket.emit (node:domain:475:12)

Fix error: Could not resolve "@/components/HelloWorld.vue" (the plugin "vite:dep-scan" didn't set a resolve directory)

  1. Add resolve config to vite.config.js

    +  resolve: {
    +    alias: [{ find: '@', replacement: '/src' }],
    +  },
  2. git add -u

  3. git commit -m 'fix: vite not able to resolve @/'

Use base: '/vue-ts/' only for deployment

  1. Delete base from vite.config.js

       plugins: [vue()],
    -  base: '/vue-ts/',
       resolve: {
         alias: [{ find: '@', replacement: '/src' }],
  2. Add deploy script to package.json

         "build": "vue-tsc --noEmit && vite build",
    +    "deploy": "vue-tsc --noEmit && vite build --base '/vue-ts/'",
         "serve": "vite preview",
  3. Update github workflow.

    @@ -15,7 +15,7 @@ jobs:
    -        node-version: [12.x, 14.x, 16.x]
    +        node-version: [14.x, 16.x]
             # See supported Node.js release schedule at
    @@ -30,6 +30,8 @@ jobs:
           - run: npm run build
           - run: npm run test
    +      - run: npm run deploy
    +        if: matrix.node-version == '16.x'
           - name: Deploy
             # deploy only for version 16.x
             if: matrix.node-version == '16.x'
  4. git add -u

  5. git commit -m 'use vite base option only for deployment'

Add links to TypeScript and Jest docs

  1. Update src/componments/HelloWorld.vue

         <a href="" target="_blank">Vue 3 Docs</a>
    -    <a href="" target="_blank">TypeScript Docs</a>
    +    <a href="" target="_blank"
    +      >TypeScript Docs</a
    +    >
    -    <a href="" target="_blank">Jest Docs</a>
    +    <a href="" target="_blank"
    +      >Jest Docs</a
    +    >
  2. git add -u

  3. git commit -m 'add links to typescript and jest docs'

Delete unused styles

  1. After code review, I've found that vue-ts template for Vite contains unused styles for label tag.
  2. Remove unused styles in src/component/HelloWorld.vue

    diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
    index b09f889..0504d43 100644
    --- a/src/components/HelloWorld.vue
    +++ b/src/components/HelloWorld.vue
    @@ -64,11 +64,6 @@ a {
       color: #42b983;
    -label {
    -  margin: 0 0.5em;
    -  font-weight: bold;
     code {
       background-color: #eee;
       padding: 2px 4px;
  3. git add -u

  4. git commit -m 'delete unused styles for label'



GitHub logo imomaliev / vue-ts

Vite + Vue + TypeScript template

Top comments (2)

antoniogiroz profile image
Antonio Gil

Ey! Great serie!

How have you resolve this console warning (on npm run dev)?

[@vue/compiler-sfc]definePropsis a compiler macro and no longer needs to be imported.

But if I don't import defineProps in HelloWorld.vue file, the next line is underline in red:

defineProps<{ msg: string }>()

With this message:

'defineProps' is not defined.eslint(no-undef)


imomaliev profile image
Sardorbek Imomaliev

Hi, thanks!

In this case you should follow compiler instructions and do not import defineProps. But to make eslint happy you would need to add defineProps in globals. Use this link for more information

Also probably you will encounter
'props' is assigned a value but never used @typescript-eslint/no-unused-vars. This could be fixed with

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!