Vue Boost for Nuxt 3

Inspired by Vue Boost

Live Demo

Features

• 💚 Nuxt 3 - SSR, ESR, File-based routing, components auto importing, modules, etc.

• ⚡️ Vite - Instant HMR

• 🍍 State Management via Pinia

• 📲 PWA

• 🎨 TailwindCSS

• 😃 Use icons from Iconify

• 🌍 I18n ready

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

Nuxt Modules

• VueUse - collection of useful composition APIs.
• ColorMode - dark and Light mode with auto detection made easy with Nuxt.
• Tailwind - the instant on-demand TailwindCSS engine.
• Pinia - intuitive, type safe, light and flexible Store for Vue.

Plugins

• Vuelidate - form input field validation libray for Vue
• Vue Select - flexible dropdown list 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
  • 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-nuxt3 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:3000

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.