silveryiris/verbena-vue-template

Verbena vue template

This template have integrated some common purpose packages to help you start developing Vue 3 project with typescript.

⚙️ Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

🚀 Features

💠 Layout and CSS

• tailwindcss with container-queries and typography

• daisyui

• Simple but effective layout switch system, could define one layout per route.

🆒 Font

• fontsource inter font

💥 Icon

• heroicons

🍍 State management

• pinia

🌏 Locale

• vue-i18n

🧭 Utility

• vueuse

🦅 Testing

• E2e test - playwright

• Unit test - vitest + vue/test-utils

• Unit test coverage report - vitest/coverage-v8

🚎 Component loader

• svg - vite-svg-loader

• markdown - unplugin-vue-markdown

// Markdown files default load location `src/contents/**`

🤖 Github CI actions

• Unit test

• E2e test

• Coding format and lint check

⚡ Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build

Run Unit Tests with Vitest

npm run test:unit

Run Unit Tests with Vitest and view test coverage report

npm run test:unit:coverage

Run End-to-End Tests with Playwright

# Install browsers for the first run
npx playwright install

# When testing on CI, must build the project first
npm run build

# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug

Lint with ESLint

npm run lint

Format coding style with Prettier

npm run format

🖋️ Note

• Favicon and github icon is from Bootstrap

• Favicon svg file generate by realfavicongenerator.net compress by iloveimg.com

🗒️ License

MIT License © 2023-PRESENT Wen Wei , Chang