Vitailse

Opinionated Vite starter template with TailwindCSS for building admin dashboard

Inspired by Vitesse

Features

• ⚡️ Vue 3, Vite 2, pnpm, ESBuild – born with fastness

• ? File based routing

• ? Components auto importing

• ? State Management via Pinia

• ? Layout system

• ? Tailwind CSS – Rapidly build modern websites without ever leaving your HTML.

• ? Use icons from any icon sets, with no compromise

• ? Use the new <script setup> syntax

• ? APIs auto importing – use Composition API and others directly

• ? TypeScript, of course

Pre-packed

UI Frameworks

• TailwindCSS
  • TailwindCSS Typography
  • TailwindCSS Forms
  • TailwindCSS Aspect Ratio

Icons

• Iconify – use icons from any icon sets
• unplugin-icons – icons as Vue components

Plugins

• Vue Router
  • vite-plugin-pages – file system based routing
  • vite-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 import
• unplugin-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 <script setup> SFC syntax

Dev tools

• TypeScript
• pnpm – fast, disk space efficient package manager
• VS Code Extensions
  • Vite – Fire up Vite server automatically
  • Volar – Vue 3 <script setup> 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 in package.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 ?

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.

GitHub

https://github.com/zynth17/vitailse