byoungd/modern-vue-template

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

• ⚡️ Vue 3, Vite 3, pnpm, ESBuild - born with fastness

• ⚡️ Build Optimization with compress

• ⚡️ CDN by Uploading static files to OSS

• 🦾 Environmental distinction

• 🦾 Monorepo by Rush

• 🎨 Commitlint

• 🎨 Formatting with prettier

• 🗂 File based routing

• 📦 Components auto importing

• 🍍 State Management via Pinia

• 📑 Layout system

• 📲 PWA

• 🎨 TailwindCSS - A utility-first CSS framework for rapid UI development.

• 😃 Use icons from any icon sets, with no compromise

• 🌍 I18n ready

• 🗒 Markdown Support

• 🔥 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 and WindiCSS since 2022.02.24. For the reason:

• TailwindCSS V3 is fast enough now
• APIs auto import might be overwhelming in some scenarios when your projects got large

Type Imports

// types.ts

export interface User {
  username: string
  password: string
  avatar?: string
}

<script setup lang="ts">
  import type { User } from '~/types'

  defineProps<User>()
</script>

<template>...</template>

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 routing
  • vite-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 import
• vite-plugin-pwa - PWA
• vite-plugin-md - Markdown as components / components in Markdown
  • markdown-it-prism - Prism for syntax highlighting
  • prism-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

• Vitesse

Final

enjoy :)