Tailwind Resources Logo Tailwind Resources
Modern Vue Template screenshot

Modern Vue Template

Author Avatar Theme by Byoungd
Updated: 18 Aug 2022
287 Stars

Modern Vue Stack 2022. Joyful development experience

Github

Categories

Vite Vue

Overview:

The Modern Vue stack 2022 with Micro frontend & Monorepo is designed to provide a joyful development experience while quickly creating Vue3 web apps. It is built on the Monorepo architecture and incorporates various features such as Vue 3, Vite 3, pnpm, ESBuild for fast development, build optimization with compress, CDN for uploading static files to OSS, environmental distinction, commitlint, formatting with prettier, file-based routing, components auto importing, state management via Pinia, layout system, PWA support, TailwindCSS for rapid UI development, and much more.

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
  • 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

Please note that certain features like APIs auto import and WindiCSS have been removed since 2022.02.24 due to the availability of better alternatives.

Installation:

To start using the Modern Vue stack, follow the steps below:

  1. Install Node.js version 14 or higher.
  2. Use the GitHub template or clone the repository to your local machine.
  3. If you prefer to do it manually with a cleaner git history, follow the manual cloning process.
  4. Start using the stack by running the development build.

Summary:

The Modern Vue stack 2022 is a comprehensive and efficient solution for Vue3 web app development. It offers a wide range of features and tools to enhance the development process and provide a joyful experience. With its Monorepo architecture, fast build optimization, CDN support, state management via Pinia, and compatibility with various frameworks and plugins, it emerges as a powerful choice for Vue developers. Additionally, its integration with popular tools like Vite, Cypress, Netlify, and VS Code extensions further strengthens its capabilities and ease of use.