Boost your productivity with Vue Boost - work smarter, not harder.

Inspired by Vue Boost

Live Demo

Features

• ⚡️ Vue 3, Vite, esbuild - born with fastness

• 🗂 File based routing

• 📦 Components auto importing

• 🍍 State Management via Pinia

• 🎨 TailwindCSS

• 😃 Use icons from Iconify

• 🔥 Use the new <script setup> syntax

• 📥 APIs auto importing - use Composition API and others directly

• 🧩 Reuseable Components - a little something to improve productivity

• 🦾 TypeScript, of course

Pre-packed

UI Frameworks

• TailwindCSS - Rapidly build modern websites without ever leaving your HTML.

Icons

• Iconify - use icons from any icon sets 🔍Icônes

Reuseable Components

• Parent Folder
  • Button - Reusable button component
  • Editor - Rich Text Editor Component
  • Input - Form input component (Types: text, email, and password)
  • File - File upload component
  • Textarea - Textarea component
  • Modal - Reusable modal component
  • Phone - Phone number validation component
  • Select - Select dropdown component
  • Submit Button - Submit Button with loader upon request
  • Table - Data table component
  • Table Action - Table Action component (view, edit and delete)
• Samples Folder
  • You can find out how to use these components in the Samples folder or visit Vue Boost Dashboard for the visualization

Plugins

• Vue Router
  • vite-plugin-pages - file system based routing
• 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
• vite-plugin-pwa - PWA
• Vue I18n - Internationalization
  • unplugin-vue-i18n - unplugin for Vue I18n
• VueUse - collection of useful composition APIs
• @vueuse/head - manipulate document head reactively
• vite-plugin-vue-inspector - jump to local IDE source code while click the element of browser automatically
• Axios - make requests on the go
• Vuelidate - form input field validation libray for Vue
• Vue Toastification - toast notifications for Vue
• Tailwind Elements - reusable vue components for Tailwind
• Vue Select - flexible dropdown list for Vue
• Vue-tel-input - mobile number validation library for Vue
• Vue3 Lazy - image lazy/skeleton loader for Vue
• Vue3 Quill Editor - text rich editor for vue
• Vue3 Apexcharts - Vue 3 component for ApexCharts to build interactive visualizations in vue.

Coding Style

• Use Composition API with <script setup> SFC syntax
• ESLint.

Dev tools

• TypeScript
• VS Code Extensions
  • Vite - Fire up Vite server automatically
  • Volar - Vue 3 <script setup> IDE support
  • Iconify IntelliSense - Icon inline display and autocomplete
  • Tailwind IntelliSense - Icon inline display and autocomplete
  • i18n Ally - All in one i18n support
  • ESLint

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 blade-01/vueboost-lite my-template
cd my-template
pnpm i or yarn 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

• Change the author name in LICENSE
• Change the title in App.vue
• Change the hostname in vite.config.ts
• Change the favicon in public
• Clean up the READMEs and remove routes

And, enjoy :)

Usage

Development

Just run and visit http://localhost:3333

pnpm dev

OR

yarn dev

Build

To build the App, run

pnpm build

OR

yarn build

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

Deploy

Deploy anywhere.

Why

To boost our collective productivity as developers.