vue 3 + Typescript + Vite 3.0 Boilerplate

Lightweight and quick starter Pack

💡 Requirement

• Over node 16

📰 Feature

• Vue 3
• Typescript
• Vite 3.0
• PNPM Package manager
• Vite Pwa plugin for pwa
• Test modules are installed
  • Cypress: E2E test
  • vitest: Unit test
• Collaborative Develop Environment
  • Husky 8
  • eslint
• Many icons
  • carbon icons: Icons
  • material icon: Icons
• Design libraries
  • sass/scss
  • Tailwind
• Mange statement wth pinia
• Route system vue-router-v4
• vue-i18n for Internationalization
• Vue hooks vue-use provides useful utilities to vue project
• Handle SEO meta in head vueuse/head
• Icon packages iconify
• Assist to develop conveniently
  • unplugin-auto-import: Auto-importing

Recommended

Following packages is not installed. Consider packages based on your project before install.

• vite-plugin-md: Markdown support
• vite-plugin-pages: File based pages
• unplugin-vue-components: make components to global component automatically
• Vite SSG: Static-site generator
• animate.css: class based animation collection

🚀 Getting Started

Dev

pnpm run dev

Build

pnpm run build

Eslint

pnpm run eslint:fix

Unit Test

pnpm run test

Unit test with ui

pnpm run test:ui

E2E test

pnpm run test:e2e

🔨 Default settings

Vite

key	value	Description
reactivityTransform	false	Because of errors in typescript, Do change it true link

Vite PWA

key	value	Description
name	Vue3-boilerplate	Name of app

Tailwind

key	value	Description
darkmode	class	Add class "tw-dark" to HTML for dark mode
prefix	tw-	Add "tw-" as prefix (tw-bg-red-500)
important	True	Make all tailwind with !important

Color config

key	Description
main	main color for target
100 ~ 900	color stream
text	text color for target

Brand Colors

key	Description
primary	primary
secondary	secondary
accent	accent
positive	use it for positive or success
negative	use it for negative, danger or error
info	use if for information
warning	use if for warning

📁 Directory Structure

├─ node_modules/
├─ .husky                       # Contains husky config
├─ config/                      # Contains config files for project
├─ cypress/                     # Contains cypress test files
├─ public/
├─ scripts/                     # Contains script files
├─ src/
│  ├─ assets/                   # Assets for renderer.
│  ├─ components/               # Contain global components.
│  ├─ locales/                  # i18n, locales.
│  │   ├─ langs/                # supported language collection.
│  │   ├─ index.ts/             # i18n config.
│  ├─ router/                   # Router.
│  │   ├─ routes/               # Modularized routes.
│  │   ├─ index.ts/             # router config.
│  ├─ store/                    # Pinina or vue-store.
│  │   ├─ modules/              # Modularized store.
│  │   ├─ index.ts/             # store config.
│  ├─ styles/                   # Global Styles.
│  │   ├─ libs/                 # Contains styles for libraries 
│  ├─ types/                    # Contains types.
│  ├─ utils/                    # Contain utilities.
│  ├─ views/                    # Contain View pages.
│  ├─ main.ts                   # vue3 main file.
│  ├─ App.vue                   # App.vue.
├─ tests/                       # Contains test files
├─ index.html                   # Index html.
├─ .gitignore                   # gitignore.
├─ vite.config.ts               # Vite config.
├─ vitest.config.ts             # Vitest config.
├─ tsconfig.json                # Specific TypeScript config.
├─ .eslintrc.js                 # Eslint.
├─ .eslintignore                # eslint ignore config.
├─ package.json 
├─ tsconfig.node.json           # Root file TypeScript config generated by Vite CLI.
├─ README.md    

Views and Routes

├─ Layout/                      # Layout collection.
├─ Home/                        # index page.
├─ WhatEverName/                # WhatEverName link page

🎉 Before start

Remove

• views/examples
• router/routes
• "exampleRoutes" in index.ts router folder

📮 Refs

• vitesse
• vueye
• vue2-admin-template

TODO

• Home page
  • Feature
  • About
• Simple Example pages
• i18n for footer
• Documentation