ViteTail is a Vue + Vite + TailwindCSS + DaisyUI template, heavily based on Vitesse.
Almost all the great features of Vitesse, but with your favorite CSS framework!
ViteTail comes with DaisyUI out of the box. Feel free to switch to any component library you want.
-
📲 PWA
-
🔥 Use the new
<script setup>
syntax -
🤙🏻 Reactivity Transform enabled
-
📥 APIs auto importing - use Composition API and others directly
-
🖨 Static-site generation (SSG) via vite-ssg
-
🦔 Critical CSS via critters
-
🦾 TypeScript, of course
-
⚙️ Unit Testing with Vitest, E2E Testing with Cypress on GitHub Actions
- I18n
- Markdown Support
- UnoCSS
- TailwindCSS
- TailwindCSS-Scrollbar
- DaisyUI - Easily change to whatever component library you want
- Theme-Change - Fast CSS Theme changing
- Iconify - use icons from any icon sets
- 🔍Icônes - Find Icons here
- Auto Importing Icons
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 apiunplugin-vue-components
- components auto importunplugin-auto-import
- Directly use Vue Composition API and others without importingunplugin-icons
- Auto import Icons from any setvite-plugin-pwa
- PWAvite-plugin-vue-component-preview
- Preview single component in VSCodeVueUse
- collection of useful composition APIsvite-ssg-sitemap
- Sitemap generator@vueuse/head
- manipulate document head reactively
- Use Composition API with
<script setup>
SFC syntax - ESLint with @antfu/eslint-config, single quotes, no semi.
TypeScript
Vitest
- Unit testing powered by ViteCypress
- E2E testingpnpm
- fast, disk space efficient package managervite-ssg
- Static-site generationcritters
- Critical CSS
- VS Code Extensions
- Vite - Fire up Vite server automatically
- Volar - Vue 3
<script setup>
IDE support - Iconify IntelliSense - Icon inline display and autocomplete
- ESLint
- TailwindCSS IntelliSense
Create a repo from this template on GitHub.
If you prefer to do it manually with the cleaner git history
npx degit compilekaiten/vitetail my-vitetail-app
cd my-vitetail-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
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 hostname in
vite.config.ts
- Change the favicon in
public
- Remove the
.github
folder which contains the funding info - Clean up the READMEs and remove routes
And, enjoy :)
Visit http://localhost:3333 to view the project
pnpm open # To open automatically
pnpm dev # To run the dev server
Update Dependencies
pnpm dep # Runs Taze to update Major and Minor dependencies
To build your App, run
pnpm build # Build for Production
pnpm tbuild # Lint and Typecheck before building
And you will see the generated file in dist
that are ready to be served.
Go to Netlify and select your clone, OK
along the way, and your App will be live in a minute.