Vitesse-lite

A lighter version of Antfu's Vue3 boilerplate, if you like this please support Antfu's work using the sponsor button on this page.

Features

• ⚡️ Vue3, Vite, ESBuild - born with fastness

• 🗂 File based routing

• 📲 Components auto importing

• 🎨 TailwindCSS with dark mode out-of-box

• 🦾 TypeScript, of course

• ☁️ Deploy on Netlify, zero config

Pre-packed

UI Frameworks

• Tailwind CSS - with built-in dark mode!

Plugins

• Vue Router
  • vite-plugin-voie - file system based routing
• vite-plugin-components - components auto import
• VueUse - collection of useful composition APIs

Coding Style

• Use Composition API with <script setup> SFC
• ESLint with @antfu/eslint-config-vue, single colons, no semi.

Dev tools

• TypeScript
  • Vue TypeScript Plugin - better type support for Vue
• Netlify - deploy
• VS Code Extensions
  • Tailwind CSS IntelliSense
  • Vetur
  • ESLint

Try it now!

Github Template

Create a repo from this template on Github.

Clone to local

If you prefer do to it manually with cleaner git history

npx degit kn0wn/vitesse-lite my-vitesse-lite-app
cd my-vitesse-lite-app
npm i

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 index.html
• Change the favicon in public
• Remove the .github folder which contains the funding info
• Clean up the READMEs and remove routes

And, enjoy :)

Usage

Development

Just run and visit http://localhost:3000

npm run dev

Build

To build the App, run

npm run build

And you will see the generated file in dist that is ready to be served.

Deploy on Netlify

Go to Netlify and select you clone, OK along the way, and your App will be live in a minute.

Why

I have removed certain items from the original Vitesse as I found I didn't need as much and was removing it whenever I created a new project.