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, vuex, vue-router
• Typescript, of course
• Using new <script setup> style
• Support legacy browsers: @vitejs/plugin-legacy
• Composition utilities: vueuse
• Fonts auto injecting: vite-plugin-fonts
• Just in time css utilities: tailwindcss
• On-demand components auto importing: iconify, element-plus
• Form validation: vuelidate
• Localization: vue-i18n, vite-plugins-i18n
• UI Documentation: vitebook
• Testing: vitest
• HTTP request: axios
• 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
• Tailwind CSS Intellisense: IDE support for Tailwind CSS
• 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 site in .vitebook/config.ts
• 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

Cheer me on

If you like my works, you can cheer me on here 😆

    🇮🇩 Trakteer
    🌍 Ko-Fi

License

MIT License © 2021 Faizal Andyka