A Nuxt 3 starter project that can be developed immediately after installation
nuxt3-starter-template — Nuxt Starter Template
By HassanKadhim
A Nuxt 3 starter template preconfigured with UnoCSS, Maz-UI, Supabase, Pinia, vue-chartjs, and @nuxtjs/color-mode, intended for developers to quickly scaffold a project skeleton.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
What stands out
A quick read of the recorded project description.
Preconfigured UnoCSS with support for shortcuts, attributify, pure CSS icons, and the @apply directive
Integrated Maz-UI component library, ready to use its Vue/Nuxt components
Supabase integration covering database, authentication, auto-generated APIs, functions, and file storage
Built-in Pinia state management and vue-chartjs chart wrapper
Dark/light mode and system theme detection via @nuxtjs/color-mode
Template Details
This is a Nuxt 3 starter template. The repository uses the MIT license. Its main purpose is to provide an initial project with several common dependencies already integrated, saving time on configuration from scratch.
According to the README, the template is installed and used with yarn: first run yarn install, then run yarn dev to start the development server.
The preinstalled dependencies include: UnoCSS (an atomic CSS engine supporting shortcuts, attributify, pure CSS icons, the @apply directive, and more), Maz-UI (a standalone component library for Vue and Nuxt), Supabase (an open-source Firebase alternative providing a Postgres database, authentication, auto-generated APIs, functions, and file storage), vue-chartjs (a Vue wrapper for Chart.js for creating reusable chart components), Pinia (a Vue state management library), and @nuxtjs/color-mode (dark/light mode switching with automatic system theme detection).
Limitations to note: the README does not describe page structure, routing, or business examples, and the template itself does not include finished site content; external services such as Supabase require separate registration and configuration, and their quotas and pricing should be checked; third-party assets in the template (images, fonts, icons, etc.) require separate license verification. The repository was last updated in 2022; dependency versions should be based on the actual package.json.
Is it right for your project?
Use Cases
- Developers who need to quickly scaffold a Nuxt 3 project skeleton and have decided to use the above dependency combination
- Frontend projects that want to start with UnoCSS as the styling solution and Maz-UI as the component library
- Prototype development planning to use Supabase as the backend (database, authentication, storage)
- Projects that need to integrate Pinia state management or vue-chartjs charts in Nuxt 3
- Sites that need dark/light mode switching and automatic system theme detection
Suitable For
- Developers familiar with Nuxt 3 and Vue 3
- Teams that accept UnoCSS and Maz-UI as the styling and component solution
- Projects preparing to use Supabase as a backend service
- Frontend projects that need chart display or dark/light theme switching
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Install dependencies: yarn install
- 2
Start the development server: yarn dev
- 3
External services such as Supabase require creating a project and configuring keys yourself, and checking quotas and pricing
- 4
Third-party assets in the template such as images, fonts, and icons require separate license verification
- 5
The repository was last updated in 2022; dependency versions should be based on the actual package.json, and compatibility should be verified before upgrading
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version from a public repository under the MIT license; the free scope applies to that version's code and does not mean external services or third-party assets are free.
Must comply with when using
- Free use, modification, commercial use, and distribution of this version's code are permitted.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and liability limitations are governed by the original license and applicable law.
Additional costs & items to verify
- The template integrates Supabase as a backend; using its database, authentication, API, functions, and file storage requires registering a Supabase account and creating a project, and may involve external service quotas and charges that you must verify yourself.
- Installing dependencies requires the yarn package manager to run yarn install, followed by yarn dev to start the development server.
- The README mentions Firebase integration; enabling related dynamic features requires configuring it yourself and checking Firebase quotas and pricing.
- Demo images, fonts, icons, and other third-party assets require license verification under their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur separate charges.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Supabase](https://supabase.com) is an open source Firebase alternative
Original README
https://github.com/HassanKadhim/nuxt3-starter-template/blob/main/LICENSEhttps://github.com/HassanKadhim/nuxt3-starter-template/blob/main/README.mdyarn install
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-03. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- Partly documented · 68 / 100
- Technologies
- Nuxt · Vue
- Website type
- Starter
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2022-10-05
- Screenshot last checked
- 2026-10-03
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Nuxt as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Automatically checked against source and license rules; no manual editorial review.
Inspect the recorded source material
SHA-256: e515095e2e0fc5bfd57971d7b0a07679c5ab67aa48486f7313267498c8b04443
2026-10-03T01:58:44.249Z
Source file / repository<br> <p align="center"> <img src="https://nuxtjs.org/design-kit/colored-white-text.png" style="width:350;" /> </p> <h1 align="center">Nuxt3 Starter</h1> ## Installation ```bash yarn install ``` ```bash yarn dev ``` ## Included ### Unocss Inspired by [Windi CSS](http://windicss.org/), [Tailwind CSS](https://tailwindcss.com/), and [Twind](https://github.com/tw-in-js/twind), but: - [Fully customizable](#configurations) - no core utilities, all functionalities are provided via presets. - No parsing, no AST, no scanning, it's **INSTANT** (5x faster than Windi CSS or Tailwind JIT). - ~6kb min+brotli - zero deps and browser friendly. - [Shortcuts](#shortcuts) - aliasing utilities, dynamically. - [Attributify mode](https://github.com/unocss/unocss/tree/main/packages/preset-attributify/) - group utilities in attributes. - [Pure CSS Icons](https://github.com/unocss/unocss/tree/main/packages/preset-icons/) - use any icon as a single class. - [Variant Groups](https://github.com/unocss/unocss/tree/main/packages/transformer-variant-group) - shorthand for group utils with common prefixes. - [CSS Directives](https://github.com/unocss/unocss/tree/main/packages/transformer-directives) - reuse utils in CSS with `@apply` directive. - [Compilation mode](https://github.com/unocss/unocss/tree/main/packages/transformer-compile-class/) - synthesizes multiple classes into one at build time. - [Inspector](#inspector) - inspect and debug interactively. - [CSS-in-JS Runtime build](https://github.com/unocss/unocss/tree/main/packages/runtime) - use UnoCSS with one line of CDN import. - [VS Code extension](https://marketplace.visualstudio.com/items?itemName=antfu.unocss) - Code-splitting for CSS - ships minimal CSS for MPA. --- ### Maz-UI [](https://vuejs.org) [](https://v3.nuxtjs.org/) [](https://www.npmjs.com/package/maz-ui) [](https://github.com/LouisMazel/maz-ui/blob/master/LICENSE) [](https://npm-stat.com/charts.html?package=maz-ui) [](https://codeclimate.com/github/LouisMazel/maz-ui/maintainability) [](https://codeclimate.com/github/LouisMazel/maz-ui/test_coverage) [](https://bundlephobia.com/package/[email protected]) [](https://bundlephobia.com/package/[email protected]) [](https://bundlephobia.com/package/[email protected]) > [Maz-ui](https://louismazel.github.io/maz-ui/) is a standalone components library and tools for [Vue.JS](https://vuejs.org) & [Nuxt.JS](https://nuxtjs.org/) (v3.x) ## Documentation & Components [Documentation & Components](https://louismazel.github.io/maz-ui-3/) --- ### Supabase [Supabase](https://supabase.com) is an open source Firebase alternative. We're building the features of Firebase using enterprise-grade open source tools. - [x] Hosted Postgres Database. [Docs](https://supabase.com/docs/guides/database) - [x] Authentication and Authorization. [Docs](https://supabase.com/docs/guides/auth) - [x] Auto-generated APIs. - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api) - [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/api#realtime-api) - [x] GraphQL (Beta). [Docs](https://supabase.com/docs/guides/api#graphql-api) - [x] Functions. - [x] Database Functions. [Docs](https://supabase.com/docs/guides/database/functions) - [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions) - [x] File Storage. [Docs](https://supabase.com/docs/guides/storage) - [x] Dashboard #### Documentation For full documentation, visit [supabase.com/docs](https://supabase.com/docs) To see how to Contribute, visit [Getting Started](./DEVELOPERS.md) --- ### vue-chartjs <img align="right" width="150" height="150" alt="vue-chartjs logo" src="https://raw.githubusercontent.com/apertureless/vue-chartjs/main/assets/vue-chartjs.png"> **vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components. Supports Chart.js v3 and v2. [](https://badge.fury.io/js/vue-chartjs) [](https://codecov.io/gh/apertureless/vue-chartjs) [](https://github.com/apertureless/vue-chartjs/actions) [](http://packagequality.com/#?package=vue-chartjs) [](https://www.npmjs.com/package/vue-chartjs) [](https://gitter.im/vue-chartjs/Lobby) [](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt) [](https://cdnjs.com/libraries/vue-chartjs) [](https://snyk.io/test/github/apertureless/vue-chartjs) [](https://www.paypal.me/apertureless/50eur) [](https://ko-fi.com/C0C1WP7C) --- ### Pinia > Intuitive, type safe and flexible Store for Vue - 💡 Intuitive - 🔑 Type Safe - ⚙️ Devtools support - 🔌 Extensible - 🏗 Modular by design - 📦 Extremely light Pinia works with both Vue 2 and Vue 3. Pinia is the most similar English pronunciation of the word _pineapple_ in Spanish: _piña_. A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar to stores, each one is born individually, but they are all connected at the end. It's also a delicious tropical fruit indigenous to South America. #### 👉 [Demo with Vue 3 on StackBlitz](https://stackblitz.com/github/piniajs/example-vue-3-vite) #### 👉 [Demo with Nuxt 3 on StackBlitz](https://stackblitz.com/github/piniajs/example-nuxt-3) --- ### @nuxtjs/color-mode [![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![Github Actions CI][github-actions-ci-src]][github-actions-ci-href] [![License][license-src]][license-href] > 🌑 Dark and 🌕 Light mode with auto detection made easy with Nuxt [](https://color-mode.nuxtjs.app/) <p align="center"> <a href="https://color-mode.nuxtjs.app">Live demo</a> </p> - [✨ Release Notes](https://color-mode.nuxtjs.org/releases) - [📖 Documentation](https://color-mode.nuxtjs.org) - [▶️ Online playground](https://stackblitz.com/edit/nuxt-color-mode) ## Features - Nuxt 3 and Nuxt Bridge support - Add `.${color}-mode` class to `<html>` for easy CSS theming - Force a page to a specific color mode (perfect for incremental development) - Works with client-side and universal rendering - Auto detect system [color-mode](https://drafts.csswg.org/mediaqueries-5/#descdef-media-prefers-color-mode) - Sync dark mode across tabs and windows 🔄 - Supports IE9+ 👴 [📖 Read more](https://color-mode.nuxtjs.org) **Note**: v3 of `@nuxtjs/color-mode` is compatible with [Nuxt 3 and Nuxt Bridge](https://v3.nuxtjs.org/). If you're looking for the previous version of this module, check out [the previous docs](https://v2.color-mode.nuxtjs.org/), or [read more about the differences](https://color-mode.nuxtjs.org/#migrating-to-v3).
Explore similar templates
Compare previews and descriptions within the same stack and category.

laravel-nuxt
A Laravel + Nuxt decoupled starter kit with built-in login, registration, email verification, password reset, and Socialite third-party login (GitHub example), switchable between SPA and SSR.
Nuxt · Starter

canvas
Canvas is a Nuxt-based portfolio template that uses Nuxt Content for content management and Nuxt UI with Tailwind CSS for pages.
Nuxt · Portfolio

nuxt3-starter
A Nuxt 3 starter template generated by nuxi, preconfigured with UnoCSS, unplugin-icons, Pinia, and VueUse. It suits developers who need a quick Nuxt 3 project skeleton with atomic CSS and auto-import workflows, and is available under the MIT license.
Nuxt · Starter

starter
The official Nuxt starter template for Nuxt UI, based on Nuxt and Vue. It provides a runnable project skeleton, an online demo, and Nuxt UI installation documentation, with README commands for creating, installing, developing, building, and previewing.
Nuxt · Starter

bloggrify
Bloggrify is a Nuxt layer that turns Markdown files into a blog site, built on Nuxt Content with preconfigured analytics, newsletter, comments, SEO, RSS, and content components.
Nuxt · Blog

vitify-nuxt
Vitify Nuxt is an admin dashboard starter template built on Nuxt and Vuetify, featuring a drawer layout, automatic navigation and breadcrumbs, notification state, ECharts charts, theming and dark mode, and authentication via nuxt-auth-utils.
Nuxt · Admin dashboard
