Vitailse
Opinionated Vite starter template with TailwindCSS for building admin dashboard
Inspired by Vitesse
Features
-
🎨 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. -
🔥 Use the newsyntax
-
📥 APIs auto importing - use Composition API and others directly -
🦾 TypeScript, of course
Pre-packed
UI Frameworks
Icons
- Iconify - use icons from any icon sets
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 importing- VueUse - collection of useful composition APIs
@vueuse/head
- manipulate document head reactively
Coding Style
- Use Composition API with
SFC syntax
Dev tools
- TypeScript
- pnpm - fast, disk space efficient package manager
- VS Code Extensions
- Vite - Fire up Vite server automatically
- Volar - Vue 3
IDE support
- Iconify IntelliSense - Icon inline display and autocomplete
- TailwindCSS Intellisense - IDE support for Tailwind CSS
Try it now!
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 zynth17/vitailse my-vitailse-app
cd my-vitailse-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
- Rename
name
field inpackage.json
- 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
- Edit your dashboard with your own style :D
And, enjoy :)
Usage
Development
Just run and visit http://localhost:3000
pnpm dev
Build
To build the App, run
pnpm build
And you will see the generated file in dist
that ready to be served.