DEV Community

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

Posted on • Edited on

1

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

Vite + Vue + TypeScript template

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (2)

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

Thanks!

Collapse
 
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 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...

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay