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:
    
         strategy:
           matrix:
    -        node-version: [12.x, 14.x, 16.x]
    +        node-version: [14.x, 16.x]
             # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
    
         steps:
    @@ -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="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
         |
    -    <a href="https://www.typescriptlang.org/docs/" target="_blank">TypeScript Docs</a>
    +    <a href="https://www.typescriptlang.org/docs/" target="_blank"
    +      >TypeScript Docs</a
    +    >
         |
    -    <a href="https://jestjs.io/docs/getting-started" target="_blank">Jest Docs</a>
    +    <a href="https://jestjs.io/docs/getting-started" 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'

Links

Project

GitHub logo imomaliev / vue-ts

Template vite vue typescript

Discussion (2)

Collapse
algil 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)

Thanks!

Collapse
imomaliev profile image
Sardorbek Imomaliev Author

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 eslint.vuejs.org/user-guide/#compi...

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