Modern Vue stack 2022 with Micro front end & Monorepo ๐.
Joyful development experience ๐.
English | ็ฎไฝไธญๆ
-
โก๏ธ Build Optimization using compress
-
โก๏ธ CDN by Uploading static files to OSS
-
๐ฆพ Environmental distinction by dot-env and .env files
-
๐ฆพ Monorepo by Rush
-
๐จ Commitlint
-
๐จ [Formatting with prettier and pretty-quick]
-
๐ File based routing
-
๐ Layout system
-
๐ฒ PWA
-
๐จ Windi CSS - next generation utility-first CSS framework
-
๐ I18n ready
-
๐ Markdown Support
-
๐ฅ Use the new
<script setup>
syntax -
๐ฅ APIs auto importing - use Composition API and others directly
-
๐จ 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
- Windi CSS (On-demand TailwindCSS) - lighter and faster, with a bunch of additional features!
- Iconify - use icons from any icon sets ๐Icรดnes
unplugin-icons
- icons as Vue components
- 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 importunplugin-auto-import
- Directly use Vue Composition API and others without importingvite-plugin-pwa
- PWAvite-plugin-windicss
- Windi CSS Integrationvite-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
- Use Composition API with
<script setup>
SFC syntax - ESLint with @antfu/eslint-config, single quotes, no semi.
- 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
- Windi CSS Intellisense - IDE support for Windi CSS
- ESLint
Requires Node >=14
Create a repo from this template on GitHub.
If you prefer to do it manually with the cleaner git history
Install Rush tool kit:
npm i -g pnpm typescript eslint@7 @microsoft/rush prettier
Go project folder and using rushx
run and visit http://localhost:3333
:
cd apps/modern-vue
rushx dev
With micro sub app, start React17 app and visit http://localhost:3333/sub/react
:
cd apps/sub-react
rushx start
To build the App, run
cd apps/modern-vue
rushx build
With Env:
rushx build:test
And you will see the generated file in dist
that ready to be served.
enjoy :)