Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/logustra/vivu

💎 Opinionated scalable vue boilerplate using vite
https://github.com/logustra/vivu

atomic-design atomic-design-example boilerplate ddd ddd-example spa typescript vite vue vue-boilerplate

Last synced: 2 months ago
JSON representation

💎 Opinionated scalable vue boilerplate using vite

Host: GitHub
URL: https://github.com/logustra/vivu
Owner: logustra
License: mit
Created: 2020-12-11T18:53:47.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2022-12-25T07:47:53.000Z (about 2 years ago)
Last Synced: 2024-07-31T22:37:24.005Z (6 months ago)
Topics: atomic-design, atomic-design-example, boilerplate, ddd, ddd-example, spa, typescript, vite, vue, vue-boilerplate
Language: TypeScript
Homepage: https://vivuu.netlify.app
Size: 1.31 MB
Stars: 73
Watchers: 5
Forks: 9
Open Issues: 0
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: license.md

Awesome Lists containing this project

README

        ## Vivu

[![Licence](https://img.shields.io/github/license/logustra/vivu)](https://github.com/logustra/vivu/blob/master/license.md)

[![Code Style](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[![Commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli)

> Opinionated scalable vue boilerplate using vite

## Design Pattern

Learn the design pattern [here](https://github.com/logustra/dave)

## Features

- Faster by default: [vite](https://github.com/vitejs/vite), [vue](https://github.com/vuejs/vue-next), [pnpm](https://github.com/pnpm/pnpm), [esbuild](https://github.com/evanw/esbuild)

- Vue 3 ecosystem: [vue](https://github.com/vuejs/vue-next), [pinia](https://pinia.vuejs.org/), [vue-router](https://github.com/vuejs/vue-router-next)

- Typescript, of course

- Using new `` style

- Support legacy browsers

- Auto injecting fonts: [vite-plugin-fonts](https://github.com/stafyniaksacha/vite-plugin-fonts)

- Auto importing APIs: [unimport](https://github.com/unjs/unimport)

- Auto importing components: [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components), [iconify](https://github.com/antfu/vite-plugin-icons), [element-plus](https://github.com/element-plus/element-plus)

- Just in time css utilities: [unocss](https://github.com/unocss/unocss)

- Composition utilities: [vueuse](https://github.com/vueuse/vueuse)

- Form validation: [vuelidate](https://vuelidate-next.netlify.app)

- Localization: [unplugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n), [vue-i18n](https://github.com/intlify/vue-i18n-next)

- UI Documentation: [histoire](https://github.com/histoire-dev/histoire)

- Testing: [vitest](https://vitest.dev/)

- HTTP request: [umi-request](https://github.com/umijs/umi-request)

- Git custom hooks: [husky](https://github.com/typicode/husky)

- Commit conventions: [commitizen](https://github.com/commitizen/cz-cli)

- Linters: [commitlint](https://github.com/conventional-changelog/commitlint), [eslint](https://github.com/eslint/eslint), [@antfu/eslint-config](https://github.com/antfu/eslint-config)

- Visualize bundle: [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer)

- CI/CD: [github actions](https://github.com/features/actions)

- Optimized nginx config

- Dockerize

## Dev Tools

- [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar): Vue 3 IDE support

- [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify): Icon inline display and autocomplete

- [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally): All in one i18n support

- [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss): IDE support for UnoCSS

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

## Requirement

  - [node.js](http://nodejs.org/)

  - [volta](https://docs.volta.sh/guide/getting-started)

  - [pnpm](https://pnpm.js.org/en/installation)

## Getting Started

### GitHub Template

[Create a repo from this template on GitHub](https://github.com/logustra/vivu/generate).

### Clone to local

If you prefer to do it manually with the cleaner git history

```bash

# 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

```bash

# 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

```bash

# create new atom component with name loading

$ node create component atoms loading

```

### Module

```bash

# create new module with name home and with all types

$ node create module home all

```

## Variations

- [vivu-npm](https://github.com/logustra/vivu-npm): Starter template to build component library

## Cheers me on

Love my works? give me 🌟 or cheers me on here 😆 <br>

Your support means a lot to me. It will help me sustain my projects actively and make more of my ideas come true. <br>

Much appreciated! ❤️ 🙏

&nbsp; &nbsp; 🐙 [Github](https://github.com/sponsors/logustra)<br>

&nbsp; &nbsp; 🌍 [Ko-Fi](https://ko-fi.com/logustra)<br>

&nbsp; &nbsp; 🇮🇩 [Trakteer](https://trakteer.id/logustra/tip)<br>

## License

MIT License © 2021 Faizal Andyka