@daotl/vue-components
v0.0.0-alpha.0
Published
Based on [daotl/vitesse](https://github.com/daotl/vitesse) and [Storybook](https://storybook.js.org/) with [storybook-builder-vite](https://github.com/eirslett/storybook-builder-vite/).
Downloads
7
Readme
Vue Component Library Starter
Based on daotl/vitesse and Storybook with storybook-builder-vite.
Usage
Development
Just run and visit http://localhost:3333
npm dev
To run Storybook:
npm run storybook
To build storybook site:
npm run build-storybook
Build / Publish the component library
npm run build
npm run pub
Build the demo app
pnpm build-demo
And you will see the generated file in dist
that ready to be served.
Features
📲 PWA
🎨 Windi CSS - next generation utility-first CSS framework
🔥 Use the new
<script setup>
syntax📥 APIs auto importing - use Composition API and others directly
🖨 Server-side generation (SSG) via vite-ssg
🦔 Critical CSS via critters
🦾 TypeScript, of course
⚙️ Unit Testing with Vitest, E2E Testing with Cypress on GitHub Actions
☁️ Deploy on Netlify, zero-config
Pre-packed
UI Frameworks
- Windi CSS (On-demand TailwindCSS) - lighter and faster, with a bunch of additional features!
Icons
- Iconify - use icons from any icon sets 🔍Icônes
unplugin-icons
- icons as Vue components
Plugins
- Vue Router
vite-plugin-pages
- file system based routingvite-plugin-vue-layouts
- layouts for pages
- Pinia - Intuitive, type safe, light and flexible Store for Vue using the composition api
unplugin-vue-components
- components auto importunplugin-auto-import
- Directly use Vue Composition API and others without importingvite-plugin-pwa
- PWAvite-plugin-windicss
- Windi CSS Integrationvite-plugin-md
- Markdown as components / components in Markdownmarkdown-it-prism
- Prism for syntax highlightingprism-theme-vars
- customizable Prism.js theme using CSS variables
- Vue I18n - Internationalization
vite-plugin-vue-i18n
- Vite plugin for Vue I18n
- VueUse - collection of useful composition APIs
@vueuse/head
- manipulate document head reactively
Coding Style
- Use Composition API with
<script setup>
SFC syntax - ESLint with @antfu/eslint-config, single quotes, no semi.
Dev tools
- TypeScript
- Vitest - Unit testing powered by Vite
- Cypress - E2E testing
- pnpm - fast, disk space efficient package manager
vite-ssg
- Server-side generation- critters - Critical CSS
- Netlify - zero-config deployment
- VS Code Extensions
- Vite - Fire up Vite server automatically
- Volar - Vue 3
<script setup>
IDE support - Iconify IntelliSense - Icon inline display and autocomplete
- i18n Ally - All in one i18n support
- Windi CSS Intellisense - IDE support for Windi CSS
- ESLint
Variations
As this template is strongly opinionated, the following provides a curated list for community-maintained variations with different preferences and feature sets. Check them out as well. PR to add yours is also welcome!
Official
- vitesse-lite - Lightweight version of Vitesse
- vitesse-nuxt3 - Vitesse for Nuxt 3
- vitesse-nuxt-bridge - Vitesse for Nuxt 2 with Bridge
- vitesse-webext - WebExtension Vite starter template
Community
- vitesse-addons by @johncampionjr - additional options for integrations, including Prettier and Storybook
- vitesse-ssr-template by @frandiox - Vitesse with SSR
- vitespa by @ctholho - Like Vitesse but without SSG/SSR
- vitailse by @zynth17 - Like Vitesse but with TailwindCSS
- vitesse-modernized-chrome-ext by @xiaoluoboding - ⚡️ Modernized Chrome Extension Manifest V3 Vite Starter Template
- vitesse-stackter-clean-architect by @shamscorner - A modular clean architecture pattern in vitesse template
- vitesse-enterprise by @FranciscoKloganB - Consistent coding styles regardless of team-size.
Try it now!
Vitesse requires Node >=14
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
npx degit antfu/vitesse my-vitesse-app
cd my-vitesse-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
Checklist
When you use this template, try follow the checklist to update your info properly
- [ ] Change the author name in
LICENSE
- [ ] Change the title in
App.vue
- [ ] Change the favicon in
public
- [ ] Remove the
.github
folder which contains the funding info - [ ] Clean up the READMEs and remove routes
And, enjoy :)
Why
I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time.
So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. It's strongly opinionated, but feel free to tweak it or even maintains your own forks. (see community maintained variation forks)