Modern Vue
Modern Vue stack 2022 with Micro front end & Monorepo
Joyful development experience
The main
branch will keep clean for quickly creating Vue3 web app.
Monorepo architecture please visit branch monorepo.
Lang
Features
-
⚡️ Build Optimization with compress -
⚡️ CDN by Uploading static files to OSS -
🦾 Environmental distinction -
🦾 Monorepo by Rush -
🎨 Commitlint -
🎨 Formatting with prettier and pretty-quick -
🗂 File based routing -
📦 Components auto importing -
📑 Layout system -
📲 PWA -
🎨 TailwindCSS - A utility-first CSS framework for rapid UI development. -
🌍 I18n ready -
🔥 Use the new<script setup>
syntax -
🖨 Server-side generation (SSG) via vite-ssg -
🦔 Critical CSS via critters -
🦾 TypeScript, of course -
⚙️ Unit Testing with Vitest, E2E Testing with Cypress on GitHub Actions -
☁️ Deploy on Netlify, zero-config -
📦 Extend Script Setup Component Name to co-operate with Vue Devtools
example:
<template>
<div class="app">
<RouterView />
</div>
</template>
<script setup lang="ts" name="App"></script>
We have removed two features
APIs auto import
andWindiCSS
since 2022.02.24. For the reason:
TailwindCSS V3
is fast enough nowAPIs auto import
might be overwhelming in some scenarios when your projects got large
Pre-packed
UI Frameworks
- TailwindCSS - lighter and faster, with a bunch of additional features!
Icons
- Iconify - use icons from any icon sets
🔍 Icônes unplugin-icons
- icons as Vue components
Plugins
- Vue Router
vite-plugin-pages
- file system based routingvite-plugin-vue-layouts
- layouts for pages
- Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
unplugin-vue-components
- components auto importvite-plugin-pwa
- PWAvite-plugin-md
- Markdown as components / components in Markdownmarkdown-it-prism
- Prism for syntax highlightingprism-theme-vars
- customizable Prism.js theme using CSS variables
- Vue I18n - Internationalization
vite-plugin-vue-i18n
- Vite plugin for Vue I18n
- VueUse - collection of useful composition APIs
@vueuse/head
- manipulate document head reactively
Coding Style
- Use Composition API with
<script setup>
SFC syntax - ESLint with @antfu/eslint-config, single quotes, no semi.
Dev tools
- TypeScript
- Vitest - Unit testing powered by Vite
- Cypress - E2E testing
- pnpm - fast, disk space efficient package manager
vite-ssg
- Server-side generation- critters - Critical CSS
- Netlify - zero-config deployment
- VS Code Extensions
- Vite - Fire up Vite server automatically
- Volar - Vue 3
<script setup>
IDE support - Iconify IntelliSense - Icon inline display and autocomplete
- i18n Ally - All in one i18n support
- ESLint
Try it now!
Requires Node >=14
GitHub Template
Create a repo from this template on GitHub.
Clone to local
If you prefer to do it manually with the cleaner git history
Usage
Development
pnpm i
pnpm dev
Build
To build the App, run
pnpm build
With Env:
pnpm build:test
And you will see the generated file in dist
that ready to be served.
Thanks
Final
enjoy :)