A Vue 3 base with common useful libraries setup for cloning to start a new website development. Vite + Vue 3 composition API + TypeScript are used.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
TypeScript cannot handle type information for .vue
imports by default, so we replace the tsc
CLI with vue-tsc
for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue
types.
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:
- Disable the built-in TypeScript Extension
- Run
Extensions: Show Built-in Extensions
from VSCode's command palette - Find
TypeScript and JavaScript Language Features
, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Window
from the command palette.
- Vue router
- Pinia (Global State Management)
- Iconify (Open Source Icon Library, Available for Commerical Use)
- VueUse (Useful utility library)
- vue-i18n (Multi-languages support)
- vue-gtag [Optional
--no-optional
] (Connect Google Analytics)
- unplugin-auto-import, allow to use below keywords without importing:
- Vue (
ref
,reactive
,computed
etc.) - Vue Router (
useRoute
,useRouter
etc.) - Vue i18n (Check the below for details)
usei18n()
$t
,$d
,$n
,$local
_changeLang
- VueUse (Functions in
@vueuse/core
)
- Vue (
- unplugin-vue-components, Allow to use components without importing
- All components under
/src/components
- VueUse (Both components and directives)
- Types:
vue-router
@iconify/vue
- All components under
- normalize.css (CSS Reset)
- SCSS
- ESLint with kind of strict rules, check out
.eslintrc.cjs
- eslint-plugin-vuejs-accessibility (Provide hints on a11y things on the HTML code)
Eslint is set to be run before git commit with use of below:
The below will be dropped upon production build:
debugger
console.log
console.debug
vue-i18n
is used for handling multi-language. The below functions are auto imported with the help of unplugin-auto-import
, so that you can directly use them:
When you want to switch language, please use _changeLang(targetLocale)
function _changeLang(targetLocale:string) {
i18n.global.locale.value = targetLocale;
localStorage.site_lang = targetLocale;
document.documentElement.setAttribute("lang", targetLocale);
}
This function helps change:
- The
locale
value invue-i18n
site_lang
value inLocalStorage
lang
attribute of<html>
tag
With the help of vite's import.meta.glob
, you just need to create new <locale>.json
under /src/i18n
and the file will be loaded automatically.
PNPM with node 20.10.0 is used.
pnpm install
pnpm dev
pnpm build
Lint with ESLint
pnpm lint