Lightweight Web Starter

Features

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

• 🦾 TypeScript, of course

• 📦 Components auto importing

• 🎨 Windi CSS - next generation utility-first CSS framework

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

• 🔥 Use the new setup script style

Pre-packed

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• vite-plugin-icons - icons as Vue components

Plugins

• VueUse - collection of useful composition APIs
• @vueuse/head - manipulate document head reactively
• Vue Router
• Pinia - A store library for Vue, it allows you to share a state across components/pages
• pinia-persist-plugin - plugin state persist for pinia
• unplugin-vue-components - components auto import
• unplugin-auto-import - vue api auto import made easy

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint with @nexhome/standard, single quotes, no semi.

Dev Tools

• TypeScript
• pnpm - fast, disk space efficient package manager
• VS Code Extensions
  • Volar - Vue 3 <script setup> IDE support
  • Windi CSS Intellisense - IDE support for Windi CSS
  • ESlint

FAQs

1. How to use icons from Iconify

   • go to this page
   • search for icon you want
   • click the icon made you flipped
   • click the copy besides the icon name
   • use it as a component like this <mdi:cards-heart />

2. Is setup script better?

   • No, but this just make your component looks more clear

Try it now!

pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
pnpm start