homebox/frontend

Opinionated Vite starter template with TailwindCSS

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

• 📲 PWA

• 🌍 I18n ready

• 🎨 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

• 🖨 Server-side generation (SSG) via vite-ssg

• 🦔 Critical CSS via critters

• 🦾 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
• Vue I18n - Internationalization
  • vite-plugin-vue-i18n - Vite plugin for Vue I18n
• vite-plugin-pwa - PWA

Coding Style

• Use Composition API with <script setup> SFC syntax

Dev tools

• TypeScript
• pnpm - fast, disk space efficient package manager
• vite-ssg - Server-side generation
  • critters - 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
  • TailwindCSS Intellisense - IDE support for Tailwind CSS
  • i18n Ally - All in one i18n support

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

And, enjoy :)

Usage

Development

Just run and visit http://localhost:3000

pnpm dev

Preview in Https

Just run and visit https://localhost

pnpm build && pnpm run https-preview

Build

To build the App, run

pnpm build

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