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 Extensionsfrom VSCode's command palette - Find
TypeScript and JavaScript Language Features, right click and selectDisable (Workspace)
- Run
- Reload the VSCode window by running
Developer: Reload Windowfrom 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,computedetc.) - Vue Router (
useRoute,useRouteretc.) - 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:
debuggerconsole.logconsole.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
localevalue invue-i18n site_langvalue inLocalStoragelangattribute 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 installpnpm devpnpm buildLint with ESLint
pnpm lint