NuxtBoost

Inspired by Vue Boost

Live Demo

Table of Contents

• Features
• Pre-Packed
  • UI Frameworks
  • Icons
  • Reuseable Components
  • Composables
  • Nuxt Modules
  • Plugins
  • Coding Style
  • DevTools
• Try It Now!
• Checklist
• Usage
• Why
• Acknowledgments

Features

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

• 🍍 State Management via Pinia

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

• Prime Vue - The Most Complete UI Suite for Vue.js
• 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
  • Input - Form input component (Types: text, email, textarea etc.)
  • File - File upload component
  • Textarea - Textarea component
  • Phone - Phone number validation component
  • Dropdown - Dropdown component
  • MultiSelect - MultiSelect component
  • Number - Number Input component
  • Radiobutton - Radio Button component
  • Switch - Switch component
  • Checkbox - Checkbox component
  • DatePicker - Date Picker component
  • Table - Data table component
  • Modal - Reusable modal component
    • Side - Side modal component (left, right, top, bottom)
    • Center - Center modal component
• Samples Folder
  • You can find out how to use these components by clicking Dashboard Folder or visit NuxtBoost Dashboard for the visualization

Composables

• Utils - Main utility has encompasses basic day-to-day functions.
• Theme - Theme switch composable.
• PrimeVue Styles - PrimeVue styling composable.
• Shortcut Keys - Shortcut composable (save, esc etc...), an example of this can be seen on dashboard collapsible.
• Sidebar - Dashboard sidebar composable.
• Validation Schema - VeeValidate validation schemas composable.

Nuxt Modules

• Nuxt Devtools - Unleash Nuxt Developer Experience.
• VueUse - Collection of Vue Composition Utilities.
• ColorMode - dark and Light mode with auto detection made easy with Nuxt.
• TailwindCSS - Add Tailwind CSS to your Nuxt application in seconds with PurgeCSS included for minimal CSS.
• Pinia - The Vue Store that you will enjoy using.
• Nuxt Icon - Icon module for Nuxt with 100,000+ ready to use icons from Iconify.
• Nuxt Image - Optimised images for Nuxt, with progressive processing, lazy-loading, real-time resizes and providers support.
• Tailvue - Vue components built for Vue3 powered by Windi CSS or tailwindcss.
• Headless UI - Headless UI integration for Nuxt. Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
• i18n - i18n features for your Nuxt project so you can easily add internationalization.

Plugins

• PrimeVue - The Most Complete UI Suite for Vue.js.
• VeeValidate - Painless Vue forms.
• Vue Tel Input - International Telephone Input with Vue

Coding Style

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

Dev tools

• Nuxt 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/nuxtboost 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 title and configurations in nuxt.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.

Acknowledgments

I would like to express my gratitude to the following individuals:

• Jahid Anowar: In memory of my dear mentor, a friend, and a remarkable leader, whose guidance and support have been an unwavering pillar in my journey as a developer. Whenever I stumbled into coding challenges, Jahid was the guiding light, offering invaluable insights and solutions. His mentorship went beyond just coding; he generously shared his wisdom, helped me secure job opportunities, and imparted invaluable lessons that shaped my career. His commitment to excellence was tireless, evident in every project he touched. Much of the essence embedded within this project was inspired by the profound wisdom I gained while working alongside him on his codebase. His profound impact on my career cannot be overstated; he has forever shaped my trajectory. Rest in peace, my Nuxt Wizard. Your legacy will endure, and your teachings will continue to guide me forward 🖤

• Friends and Family: This wouldn't have been possible without support from friends and family, I really appreciate y'all.

• Myself: Lastly, I want to thank me.