/modern-vue-template

Modern Vue Stack 2022. Joyful development experience 🎉

Primary LanguageTypeScriptMIT LicenseMIT

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

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

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