mohamadrezahedayati / vue3-boilerplate

Vue 3 and vite starter template

Alibaba Travels Vue 3 starter package with vite - Check Vitesse

Features

• ⚡️ Vue 3, Vite 2, pnpm, ESBuild

• 🗂 File based routing

• 📑 Layout system

• 📦 Components auto importing

• 📥 APIs auto importing - use Composition API and others directly

• 📐 JSX Support

• 🍍 State Management via Pinia

• ⚖️ Rollup Visualizer

• 🗜️ File compression - Use gzip or brotli to compress resources.

• 🌍 Vue i18n

• 📲 PWA

• 📩 Markdown Support

• 🖨 Static-site generation (SSG) via vite-ssg

• 🦔 Critical CSS via critters

• 💡 PostCSS

• ⚙️ Unit testing with Vitest

• ⚙️ E2E and component testing with Cypress

• 🦾 TypeScript

• 🔥 Use the new <script setup> syntax

• 🤙🏻 Reactivity Transform enabled

• 🔁 Vite SVG loader

• 💡 UnoCSS - The instant on-demand atomic CSS engine.

• 😃 Use icons from any icon sets with classes

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• Pure CSS Icons via UnoCSS

Plugins

• Vue Router
  • vite-plugin-pages - file system based routing
  • vite-plugin-vue-layouts - layouts for pages
• unplugin-vue-components - components auto import
• unplugin-auto-import - Directly use Vue Composition API and others without importing
• rollup-plugin-visualizer - visualize and analyze your bundle to see which modules are taking up space.
• vite-plugin-compression - use gzip or brotli to compress resources.
• plugin-vue-jsx - use JSX & TSX in your .vue files or separated .jsx|tsx file
• Vue I18n - Internationalization
  • vite-plugin-vue-i18n - Vite plugin for Vue I18n
• vite-plugin-pwa - PWA
• Markdown Support - vite-plugin-md
  • markdown-it-prism
  • Prism for syntax highlighting
  • prism-theme-vars - customizable Prism.js theme using CSS variables
• Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
• VueUse - collection of useful composition APIs
• @vueuse/head - manipulate document head reactively
• PostCSS
  • postcss-nested for using nested BEM syntax for styling
  • postcss-url
  • postcss-import
• vite-ssg - SSG Support
  • vite-ssg-sitemap - Sitemap generator
  • critters - Critical CSS
• vite-svg-loader - Vite plugin to load SVG files as Vue components
  • svgo optimizing SVG files - enabled
• vite-plugin-istanbul

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with airbnb, airbnb-typescript, @antfu/eslint-config, and other custom configs
• Stylelint with stylelint-config-recommended-vue and some custom rules

Dev tools

• TypeScript
• Vitest - Unit testing powered by Vite (with happy-dom)
• Cypress - E2E and component testing powered by Cypress
• pnpm - fast, disk space efficient package manager
• husky
• lint-staged
• standard-version
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • ESLint
  • Styleling
  • Iconify IntelliSense - Icon inline display and autocomplete
  • i18n Ally - All in one i18n support

Usage

Development

First you need to install the dependencies using pnpm

pnpm install

Just run and visit http://localhost:5173

pnpm dev

Build

To build the App, run

pnpm build

And you will see the generated file in dist that ready to be served.

Docker

At first, build the image:

docker build . -t alibaba:latest

Then run the image by:

docker run --rm -it -p 5173:80 alibaba:latest

TODO

• improve README.md and add Contribute, Folder Structure sections
• SSR Support
• Multi Device Plugin
• autoprefixer
• remove hover on mobile
• remove desktop @media on mobile build
• analyze web-vital and track them
• improve PWA features
• improve PostCSS plugins
• add and improve vite or rollup plugins
• add cli for creating boilerplate
• add demo link and config github action for production releases auto publish