logustra / vivu

💎 Opinionated scalable vue boilerplate using vite

Vivu

Opinionated scalable vue boilerplate using vite

Design Pattern

Learn the design pattern here

Features

• Faster by default: vite, vue, pnpm, esbuild
• Vue 3 ecosystem: vue, pinia, vue-router
• Typescript, of course
• Using new <script setup> style
• Support legacy browsers
• Auto injecting fonts: vite-plugin-fonts
• Auto importing APIs: unimport
• Auto importing components: unplugin-vue-components, iconify, element-plus
• Just in time css utilities: unocss
• Composition utilities: vueuse
• Form validation: vuelidate
• Localization: unplugin-vue-i18n, vue-i18n
• UI Documentation: histoire
• Testing: vitest
• HTTP request: umi-request
• Git custom hooks: husky
• Commit conventions: commitizen
• Linters: commitlint, eslint, @antfu/eslint-config
• Visualize bundle: rollup-plugin-visualizer
• CI/CD: github actions
• Optimized nginx config
• Dockerize

Dev Tools

• Volar: Vue 3 IDE support
• Iconify IntelliSense: Icon inline display and autocomplete
• i18n Ally: All in one i18n support
• UnoCSS: IDE support for UnoCSS
• ESLint

Requirement

• node.js
• volta
• pnpm

Getting Started

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

# clone repository
$ git clone https://github.com/logustra/vivu.git

# open folder vivu
$ cd vivu

# install packages
$ pnpm install

# build and serve with vite dev server
$ pnpm dev

Run with Docker

# build docker image and tag it with name nginx
$ docker build . -t nginx

# run docker image nginx with name vivu in port 9900
$ docker run -it -p 9900:80 --rm --name vivu nginx

Checklist

When you use this template, try follow the checklist to update your info properly

• Change name, description, repository, bugs field in package.json
• Change the author name in LICENSE
• Change the favicon in public
• Remove the .github folder which contains the funding info
• Clean up the README(s) and remove modules

And, enjoy :)

How to Create Folder

A guide how to create a folder using create-cli

Component

# create new atom component with name loading
$ node create component atoms loading

Module

# create new module with name home and with all types
$ node create module home all

Variations

• vivu-npm: Starter template to build component library

Cheers me on

Love my works? give me 🌟 or cheers me on here 😆
Your support means a lot to me. It will help me sustain my projects actively and make more of my ideas come true.
Much appreciated! ❤️ 🙏

    🐙 Github
    🌍 Ko-Fi
    🇮🇩 Trakteer

License

MIT License © 2021 Faizal Andyka