Vue3 + TypeScript + Vite + Vuetify3 + Vuex4 + Axios + i18n + Vitest + ESLint + Prettier

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Test on Netlify

https://jedlik-vite-ts-template.netlify.app

Links

Recommended Node.js and npm versions

  • node -v -> v14.18.2
  • npm -v -> 8.3.1

Some useful npm (Node Package Manager) commands:

  • Update npm: npm i npm@latest -g
  • Clean npm chache: npm cache clean --force
  • Check npm chache status: npm cache verify
  • List globally installed node packages: npm list -g --depth=0
  • List locally installed node packages: npm list --depth=0
  • List all versions of an npm package: npm view package_name versions
  • View information about the package: npm view package_name
  • Show outdated npm packages: npm outdated
  • Update package: npm update package_name
  • Uninstall package: npm remove package_name or npm uninstall package_name

vue3-table-lite

https://linmasahiro.github.io/vue3-table-lite/

Vite.js

Vite.js is a new modern dev server for javascript which is blazing fast and includes many sensible defaults.

Vue 3

Vue.js is an incremental frontend framework which is an absolute joy to work with. It has seen very impressive improvements in version 3 including Composition Api, script setup, dynamic css binding and ... .

Vuetify 3

Vuetif 3 Alpha is arguably the best component library for Vue 3 and is currently in alpha stage but will soon be ready for production. Lots of premade components will make your job as application developer easier and more fun.

Add translations to locales files

Translations are ready to go with vue-i18 Add your files to /locales and are you are set.

Vitest

Vitest A blazing fast unit-test framework for Vue3 powered by Vite.

ESLint

Eslint Find and fix problems in your JavaScript code
Change your config at .eslintrc.js

Prettier

Prettier is an opinionated code formatter
Change config at .prettierrc.js

Recommended IDE Setup

VS-Code settings.json:

"editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript", "vue"],
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },