Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/richardevcom/vue3-boilerplate
Quick boilerplate for your next project, containing - Vite, Vuex, Vue Router & Tailwind CSS. This was created as part of my tutorial series.
https://github.com/richardevcom/vue3-boilerplate
boilerplate pinia svg tailwind tailwind-css tailwindcss template vue vue-router vue3 vuejs vuejs3 vuerouter
Last synced: 4 days ago
JSON representation
Quick boilerplate for your next project, containing - Vite, Vuex, Vue Router & Tailwind CSS. This was created as part of my tutorial series.
- Host: GitHub
- URL: https://github.com/richardevcom/vue3-boilerplate
- Owner: richardevcom
- Created: 2022-08-02T15:52:47.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-26T11:26:08.000Z (4 months ago)
- Last Synced: 2024-07-27T11:58:55.772Z (4 months ago)
- Topics: boilerplate, pinia, svg, tailwind, tailwind-css, tailwindcss, template, vue, vue-router, vue3, vuejs, vuejs3, vuerouter
- Language: Vue
- Homepage: https://medium.com/@richardevcom/custom-vue3-boilerplate-9635806acde3
- Size: 216 KB
- Stars: 80
- Watchers: 2
- Forks: 41
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# [![](https://img.shields.io/static/v1?label=Sponsor+%F0%9F%91%89&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/richardevcom) Vue 3 boilerplate - Vite, Pinia, Vue Router & Tailwind CSS
This boilerplate was created as part of my [custom Vue 3 boilerpalte tutorial](https://medium.com/@richardevcom/custom-vue3-boilerplate-9635806acde3). It will help get you started developing with Vue 3 in Vite. The template uses Vue 3 `` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
## Support & collaboration
[![discord-server](https://img.shields.io/discord/852916497314742362?color=%238A48FF&label=DISCORD%20SERVER&logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAANUAAADwCAMAAACg%2F9E0AAAAdVBMVEUAAAD%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2Fli2ZAAAAAJnRSTlMAAAEQESAhMDFAQU9QUV9gYW9wf4CPkJ6foK6vsL6%2Fzs%2Fe3%2B7v%2FrenROgAAAZMSURBVHja7MGBAAAAAICg%2FakXqQIAAAAAAObejFejx2EgbjAmiIY1u5sLDgETjJj3f8Tj446Wxe3XMHbaKL%2F%2FDSuPNJES7e8Txnt6Op7nOklwJ8KP86r4gzgWwR80T%2BLPIFFMBe9kx1LwzpbG8JsavUTUJFbEKyWNv6KZPDNqMi9VRZ7khwspKT5HGqWqJPuxvMuKL8mNUlXoevOHhyR1SO1iCf6KHquYzIqadrEyvqMkOUimZ0HNLrF8%2BMC7ioA9lFvoL1PGTvL%2FgYxxmlPeSi1vKTmneYoy%2FBfigp0k6SuTYj9xTptiH7qtU0TN8YINs%2BI8aAo9Yso4G%2B1xhYLzUbxrY8EZ%2Bcc1EXFOxHj%2BETlI5J%2F9HBxxXqR9QL1SDj5xZiZHEXBqNBi2is4DasTZkYtZBW0YT5yfie8qrmQYCyyQDLg6gVxMKsLdBbigWAVW2IgHsAFuF5QKKFeUCnhcUCpA%2FQWlAib7UrFiRVjjYV8qzgZH2OPGf%2Fez3A0OsIgQzbp5sQJsIheUCpiN2zrxJI6osd82bbBKIWzdAGLYKwhz9wrDeLteQfhFhmWy2b6C8IsZtpmJvuL8qNG30EQKLrBO4hPQVosrsI9YTEAiBQvsowbbdSIFZ1yB2dy8SMyOAdcg9BpCdL1L8C4M41LAoykOwbkg96X0%2BpCwgiTfvftAFnDklzofc59xREFRxmqcWciYXpHSob0QUCze1UTtMsVO7d7%2BAMPUZbFLxX3KqK3entmg2sPSwX3BoI2FpWxQ7WENnfeO%2FM7jxBKbtN8NWxiy9zSxHTr1WfDLLSm09v8UW7osYwblC4soq5XZxSMWQCZ%2BGhn47G1LnhLcN3ilW8HxiBXKR3tVcRNSrE%2FyVcXc8nDEVulMO03osrpbDtmq2lizyPTqWnWr%2FVNQWbOY%2ByyPvx2z1xdIs3hze9D2sqLuPJLPBOmzZ%2Bj24MnuYmU03kHuswdMdqgb0xfvYG2PijLBwl0G%2BvwrYzsoKpAvzfxPZiDXMwkuVld444ar4dQeiAdl7IjsJROSC6gmYWWO7WDoczlEKiVuit7Yn0Nczsr9vIJ%2F2bkD5VZRKADDBw2xZE3duJi4ZiUF5Lz%2FI26dydxrbxomHCAzdfI9QKf%2FHLEMarPcBJnKu2f3%2F1yW6W1%2FnmbnJZCA%2BIxHsSR77WOmDyw5iDyfEzKT5LsVjhSVt4o%2BLNbgI2SWUeFf0CDJ3p9VJjoPRJIGJJKYDXiwLs1ZgUISSa3CM%2FNE7fFR%2F%2BT4DwdH%2Bjsx8m4W25okh3A1EvVwRnoWIYrw%2FIpSpZBMFt91sTeT5E%2F6%2B4RUKqYKz9ubLFa0Ey6Q11aHdCrupRjTFIx9adoqyo%2B5fYYf92uBQYzr2hRsLmOMFcWO%2FL5F7fl3mfQquunc7rZFsXn7%2B2iQzvTvggPwquknjGRgwvWZANfoVfWqelW9ql5VP8Krap17C4PrY15VP8YHfOD6KFCrrDrj%2BvwH%2F%2BL69HDE9TmCxPWRpHfGrcNncRbDNYQnPa4rq%2F45XbaryoHy%2FEoER7XwiffaZR%2BTLOGTdBhIQIVhTAVXzZizy42C%2FHUPh1JjELVhMAsdGGFMV2xjMIgGgLJ3wWfr8IvorUue1Inl0b2cQpc9zBqLEV1Qp5yYsydRLpv2gYOyNVzxC4ZRu7lrOTHt4suc0%2FOUlk07FboaOfwmXWQX8GawEWXO2fHAIa4JbQtfcI2BVHPzqLE6DNo5StFwEPAFY8VeIX1Q5HHN6%2BsmDHgtR%2BsebHPziLqG3z6x3MgJyYNa4mN4V7%2Bdu26U4tCNF%2Bvu1bmZHrpDvQxaXHrHCamDutFoDKbe4a6yEo2Up2EcL%2FpqHIdTJ5u64nAPaxUGs55fgxP2dwYSK5GyNQWfSod2SUitJ2yufAiXoeGQGp%2FIdwnCZZh%2FVIRvNJc7xmRdGjIoLT7IDRweV42O%2FnJVvJa%2BoPwa7eJHRabTNRG6OOQh4pvoXT3kMuZqmgnv%2BtIccuE2W9NM9C7nrYJww3Cn2Cbv6cQIOV38Jxrxyu8XGIecqm8vvQOpyXMhOvqugkR6T2kS4X8MTENmpSaMiaBarDDLIbfKLVaTgGwW538t5NdSrzyCeg7r4RlGehJB3XF4Bv68pP%2Fbg2MBAAAAgEH%2B1sPYUwEAAAAAAAAAAAAMAizJOkF8xEwmAAAAAElFTkSuQmCC&style=for-the-badge)](http://discord.gg/ZptSdXMPrM)
## Dependencies
- [nodejs ^14.18.0](https://nodejs.org/)
## Stack
- [Vue](https://vuejs.org/)
- [Pinia](https://pinia.vuejs.org/)
- [Vue Router](https://router.vuejs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- eslint
- prettier
- cssnano## Install
```
npm i @richardev/vue3-boilerplate
```or
```
git clone https://github.com/richardevcom/vue3-boilerplate.git
```then
```
cd vue3-boilerplate
npm install
```## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [Tailwind CSS Intellisense](https://github.com/tailwindlabs/tailwindcss-intellisense).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```### Compile and Hot-Reload for Development
```sh
npm run dev
```### Compile and Minify for Production
```sh
npm run build
```### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```