vivu: A TypeScript repository from logustra

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

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

logustra/vivu