NuxtVueStarter

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.

2 previews
Desktop homepage1 / 2
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 2

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-03View source

What stands out

A quick read of the recorded project description.

01

A Nuxt 3 starter project that can be developed immediately after installation

02

Preconfigured UnoCSS with support for shortcuts, attributify, pure CSS icons, and the @apply directive

03

Integrated Maz-UI component library, ready to use its Vue/Nuxt components

04

Supabase integration covering database, authentication, auto-generated APIs, functions, and file storage

05

Built-in Pinia state management and vue-chartjs chart wrapper

06

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.

NuxtStarter

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. 1

    Install dependencies: yarn install

  2. 2

    Start the development server: yarn dev

  3. 3

    External services such as Supabase require creating a project and configuring keys yourself, and checking quotas and pricing

  4. 4

    Third-party assets in the template such as images, fonts, and icons require separate license verification

  5. 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

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This 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

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

[![vue 3](https://img.shields.io/badge/vue-3-42b983.svg)](https://vuejs.org)
[![nuxt 3](https://img.shields.io/badge/nuxt-3-42b983.svg)](https://v3.nuxtjs.org/)

[![npm](https://img.shields.io/npm/v/maz-ui/latest.svg)](https://www.npmjs.com/package/maz-ui)
[![license](https://img.shields.io/github/license/LouisMazel/maz-ui.svg)](https://github.com/LouisMazel/maz-ui/blob/master/LICENSE)
[![Downloads](https://img.shields.io/npm/dm/maz-ui.svg)](https://npm-stat.com/charts.html?package=maz-ui)

[![maintainability](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/maintainability)](https://codeclimate.com/github/LouisMazel/maz-ui/maintainability)
[![test_coverage](https://api.codeclimate.com/v1/badges/6b27047dcf150ccddfac/test_coverage)](https://codeclimate.com/github/LouisMazel/maz-ui/test_coverage)

[![bundlephobia_tree](https://badgen.net/bundlephobia/tree-shaking/[email protected])](https://bundlephobia.com/package/[email protected])
[![bundlephobia_zip](https://badgen.net/bundlephobia/min/[email protected])](https://bundlephobia.com/package/[email protected])
[![bundlephobia_zip](https://badgen.net/bundlephobia/minzip/[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.

[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)
[![Build Status](https://img.shields.io/github/workflow/status/apertureless/vue-chartjs/CI.svg)](https://github.com/apertureless/vue-chartjs/actions)
[![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)
[![npm](https://img.shields.io/npm/dm/vue-chartjs.svg)](https://www.npmjs.com/package/vue-chartjs)
[![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs)
[![Known Vulnerabilities](https://snyk.io/test/github/apertureless/vue-chartjs/badge.svg)](https://snyk.io/test/github/apertureless/vue-chartjs)
[![Donate](https://raw.githubusercontent.com/apertureless/vue-chartjs/main/assets/donate.svg)](https://www.paypal.me/apertureless/50eur)
[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](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

[![nuxt-color-mode](https://user-images.githubusercontent.com/904724/79349768-f09cf080-7f36-11ea-93bb-20fae8c94811.gif)](https://color-mode.nuxtjs.app/)

<p align="center">
  <a href="https://color-mode.nuxtjs.app">Live demo</a>
</p>

- [✨ &nbsp;Release Notes](https://color-mode.nuxtjs.org/releases)
- [📖 &nbsp;Documentation](https://color-mode.nuxtjs.org)
- [▶️ &nbsp;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+ 👴

[📖 &nbsp;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).


Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.