Modern Vue Stack 2022. Joyful development experience 🎉

Overview

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

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

Pre-packed

UI Frameworks

  • TailwindCSS - lighter and faster, with a bunch of additional features!

Icons

Plugins

Coding Style

Dev tools

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 :)

You might also like...

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

Jan 4, 2023

:bento: Full-Stack solution to quickly build PWA applications with Vue.js and Firebase

:bento: Full-Stack solution to quickly build PWA applications with Vue.js and Firebase

Welcome to bento-starter 👋 🍱 bento-starter is an Open-Source Full-Stack solution that helps you to build fast and maintainable web applications usin

Dec 24, 2022

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

@egjs/flicking Demo / Documentation / Other components Everyday 30 million people experience. It's reliable, flexible and extendable carousel. 📱 💻 ?

Jan 9, 2023

📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Jan 9, 2023

A Vue.js 2.0 UI Toolkit for Web

A Vue.js 2.0 UI Toolkit for Web

A Vue.js 2.0 UI Toolkit for Web. Element will stay with Vue 2.x For Vue 3.0, we recommend using Element Plus from the same team Links Homepage and doc

Jan 3, 2023

The Intuitive Vue Framework

The Intuitive Vue Framework

Build your next Vue.js application with confidence using Nuxt: a framework making web development simple and powerful. Links 📘 Documentation: https:/

Jan 5, 2023

🐉 Material Component Framework for Vue

🐉 Material Component Framework for Vue

Supporting Vuetify Vuetify is a MIT licensed project that is developed and maintained full-time by John Leider and Heather Leider; with support from t

Jan 3, 2023

🗃️ Centralized State Management for Vue.js.

Vuex 🔥 HEADS UP! You're currently looking at Vuex 3 branch. If you're looking for Vuex 4, please check out 4.0 branch. Vuex is a state management pat

Dec 30, 2022
Comments
  • pnpm dev 命令执行失败

    pnpm dev 命令执行失败

    无法运行,使用master分支,node版本 v16.13.2,具体执行错误信息见下面:

    gitpod /workspace/modern-vue-template (main) $ pnpm dev
    
    > [email protected] dev /workspace/modern-vue-template
    > vite --port 3333 --open --mode development
    
    Pre-bundling dependencies:
      vite-ssg
      @micro-zoe/micro-app
      nprogress
      pinia
      vue-i18n
      (...and 4 more)
    (this will be run only when your dependencies or config have changed)
    
      vite v2.7.13 dev server running at:
    
      > Local: http://localhost:3333/
      > Network: use `--host` to expose
    
      ready in 2395ms.
    
    node:events:368
          throw er; // Unhandled 'error' event
          ^
    
    Error: spawn xdg-open ENOENT
        at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
        at onErrorNT (node:internal/child_process:477:16)
        at processTicksAndRejections (node:internal/process/task_queues:83:21)
    Emitted 'error' event on ChildProcess instance at:
        at Process.ChildProcess._handle.onexit (node:internal/child_process:288:12)
        at onErrorNT (node:internal/child_process:477:16)
        at processTicksAndRejections (node:internal/process/task_queues:83:21) {
      errno: -2,
      code: 'ENOENT',
      syscall: 'spawn xdg-open',
      path: 'xdg-open',
      spawnargs: [ 'http://localhost:3333/' ]
    }
     ELIFECYCLE  Command failed with exit code 1.
    
    gitpod /workspace/modern-vue-template (main) $ node -v
    v16.13.2
    
    opened by aircjm 5
Owner
han
Know nothing but LOVE to share everything 精通玄学 好为人师
han
Catamyst Frontend Stack - Discussion and demo for Frontend Web Development with Modern Tech Stack

Catamyst Frontend Stack Discussion and demo for Frontend Web Development with Modern Tech Stack. Made by M Haidar Hanif from Catamyst. Haidar is the F

Catamyst Community 48 Dec 24, 2022
:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | 简体中文 | 日本語 | Spanish SPONSORED BY 活动服务销售平台 客户消息直达工作群 Introduction vue-element-admin is a production-ready front-end solution for admin inter

花裤衩 80.1k Dec 31, 2022
:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:

vuera NOTE: This project is looking for a maintainer! Use Vue components in your React app: import React from 'react' import MyVueComponent from './My

Aleksandr Komarov 4k Dec 30, 2022
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

雪月欧巴 84 Nov 28, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in yo

Архипцев Евгений 63 Dec 30, 2022
A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Marc Duiker 6 Jun 25, 2022
Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Mosha Vue Toastify A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library. English | 简体中文 Talk is cheap,

Baidi Liu 187 Jan 2, 2023
A plugin that can help you create project friendly with Vue for @vue/cli 4.5

vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally

null 2 Jan 6, 2022
Veloce: Starter template that uses Vue 3, Vite, TypeScript, SSR, Pinia, Vue Router, Express and Docker

Veloce Lightning-fast cold server start Instant hot module replacement (HMR) and dev SSR True on-demand compilation Tech Stack Vue 3: UI Rendering lib

Alan Morel 10 Oct 7, 2022
🛠️ Standard Tooling for Vue.js Development

Vue CLI Vue CLI is the Standard Tooling for Vue.js Development. Documentation Docs are available at https://cli.vuejs.org/ - we are still working on r

vuejs 29.6k Jan 4, 2023