💚 Vuetres Template

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

🧩 Features

• Core:

  • ⚡️ Vue 3: vue-3
  • 🦾 Typescript: typescript
  • ⚡️ Vite: vite
  • 🗺️ Vue Router: vue-router
  • 🌍 Vue-i18n: vue-i18n
  • 🔤 Webfont self-hosting: vite-plugin-webfont-dl

• State Management:

  • 🍍 Pinia: pinia

• UI Framework:

  • 🦄 Tailwind CSS: tailwindcss

• API Client:

  • 📡 Axios: axios

• Pre commit hooks and Linters and Formatters:

  • 💬 Husky: husky
  • 💬 Lint-staged: lint-staged
  • 💅 ESLint: eslint
  • 💅 Prettier: prettier

• Opinionated Testing:

  • 🎭 Playwright: playwright
  • 🧪 Vitest: vitest

🧰 Recommended Setup

• VS Code

  • Vue - Official (previously Volar) and disable Vetur.

  • Use vue-tsc for performing the same type checking from the command line, or for generating d.ts files for SFCs.

  • EditorConfig for VS Code

  • ESLint for VS Code

  • Prettier - Code formatter

📦 🧰 Additional Setup

• VSCode Extension Better Comments
• VSCode Extension Color Highlight
• VSCode Extension Code Spell Checker
• VSCode Extension GitLens
• VSCode Extension Git History
• VSCode Extension Git Graph
• VSCode Extension Git Blame

⚙️ Environment Setup

• Node: v20.11.0 (LTS/iron May 2024)
• NPM: v10.5.2
• NVM: v0.38.0

💅 Code Styling

• ESLint rules are defined in .eslintrc.json
• Prettier rules are defined in .prettierrc.
• Pre-commit hooks are defined in .husky/pre-commit.

💅 CSS Architecture

We use Tailwind CSS for styling. It is a utility-first CSS framework that provides a set of pre-built components and utilities that can be used to quickly build responsive and visually appealing web pages.

⚗️ Husky pre-commit hooks

Husky is a package that allows you to run a script before every commit. It can be used to check code formatting, run tests, or perform other tasks. We use 3 pre-commit hooks:

• pre-commit: Runs ESLint on the staged files.
• commit-msg: Runs commitlint on the commit message.
• pre-push: Runs unit tests on the staged files.

🛠 NPM scripts for Development

🪄 Init

# install nvm if you don't have it
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

nvm use # If you have nvm installed with node version 20.11.0
nvm install # Install node version 20.11.0 using nvm

📦 Installation

npm install # Install all dependencies

🔨 Compile and hot-reload for development

npm run dev # Compile and hot-reload for development

📝 Lint and fix files

npm run lint # run lint
npm run lint:fix # run lint --fix

🚀 Build

npm run build # Build the project for production

👁 Preview

npm run preview # Preview of the locally packaged project

🔬 Test Setup

npm run test-setup # Install playwright

🧪 Run unit tests

npx playwright test # Run playwright
npx playwright show-report # Show playwright report
npx playwright test --ui # Run playwright with UI

# or
npm run test:unit
npm run test:e2e
npm run test # Runs both unit and e2e tests

Commit Message Conventions

We use commitlint to enforce a conventional commit message format. This ensures that the commit message follows a standard format that is easy to read and understand.

The commitlint configuration file is located at .commitlintrc.json. It specifies the rules for validating commit messages.

<type>(<scope>): <subject>

<type>

• Descibes the category of your change.
• Commonly used: build, feat, fix, docs, style, refactor, perf, test, chore, etc.

<scope>

• Optional argument.
• Describes the module affected by your change.
• Highly project specific.
• Commonly used: core, ui, api, state, utils, types, config, tests, etc.

<subject>

• Terse description.
• Avoid repeating information from type and scope.
• Describe what the software does after your change.

Help

'init:     initial commit'
'feat:     add new feature'
'fix:      fix bug'
'ui:       update UI'
'refactor: refactor code'
'perf:     performance code or flows'
'release:  release application'
'deploy:   deploy on server'
'docs:     change docs'
'test:     add testing'
'chore:    change settings (ex. deps)'
'style:    update style without logic change'
'revert:   revert commit'

Examples

feat(core): add new feature

fix(core): fix bug in component

perf(cache): optimize cache retrieval speed

chore(deps): update dependency versions

refactor(user): simplify user creation logic

docs(ui): update documentation

docs(readme): update installation instructions

chore: update .gitignore

Browser support

The Chrome 80+ browser is recommended for local development

Support modern browsers, doesn't include IE

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions