NuxtVueStarter

nuxt-starter — Nuxt Starter Template

By toimc

A starter template based on Nuxt 3 and Vite, integrating UnoCSS, Pinia, PWA, Nuxt Content, and other modules, providing SSR, file-based routing, auto-imports, and light/dark mode as foundational capabilities.

Open Source SiteDownload Source ZIP

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-13View source

What stands out

A quick read of the recorded project description.

01

Based on Nuxt 3 and Vite, providing SSR, file-based routing, component auto-imports, and a module system

02

Uses UnoCSS as the atomic CSS engine and supports pure CSS icons from any icon set via UnoCSS

03

Integrates Pinia for state management, paired with @pinia-plugin-persistedstate/nuxt to persist data to localStorage

04

Built-in VitePWA for offline support and auto-update behavior, plus ColorMode for dark/light mode with automatic detection

05

Integrates Nuxt Content to read .md, .yml, .csv, and .json files from the content/ directory, supporting Markdown pages and MDC syntax

06

Provides a layout system, a whitelisted Mock API (server/middleware/mock.ts), and TypeScript support

Template Details

This is a starter template for Nuxt 3, described in its repository as an Opinionated Nuxt Starter Template, with an online demo deployed on Netlify. The template is built around Nuxt 3 and Vite, offering SSR, file-based routing, component auto-imports, and a module system, and it uses <script setup> syntax with TypeScript.

For styling and icons, the template uses UnoCSS as its atomic CSS engine and supports pure CSS icons from any icon set via UnoCSS. State management uses Pinia, paired with @pinia-plugin-persistedstate/nuxt to persist data to localStorage. The template also provides a layout system, a whitelisted Mock API (located at server/middleware/mock.ts), and API auto-imports for the Composition API, VueUse, and custom composables.

Feature modules include: VitePWA for offline support and auto-update behavior; ColorMode for dark/light mode with automatic detection; Nuxt Content for reading .md, .yml, .csv, and .json files from the content/ directory, supporting Markdown pages and embedding Vue components in MDC syntax; and DevTools for development experience. The README recommends using VS Code with Volar and notes that Vetur should be disabled if installed.

For usage, you can try it online via StackBlitz, create a repository from this template on GitHub, or clone it locally with npx degit toimc/nuxt-starter my-nuxt3-app, then run pnpm i and pnpm dev to start, and pnpm build to build. The template is MIT licensed, allowing free use, modification, commercial use, and distribution of this version of the code, but third-party assets such as demo images, fonts, and icons must be checked against their respective licenses, and external services like domains, hosting, databases, payments, or AI may incur additional charges.

NuxtStarter

Is it right for your project?

Use Cases

  • Quickly scaffolding a Nuxt 3 project skeleton with preconfigured modules such as UnoCSS, Pinia, PWA, and Content
  • Organizing content pages with Markdown and MDC syntax, and embedding Vue components in Markdown
  • Needing dark/light mode switching, offline support, and auto-update as PWA foundational capabilities
  • During development, needing a whitelisted Mock API and auto-imported composables to speed up API integration

Suitable For

  • Developers familiar with Vue 3 and Nuxt 3 who want to start new projects directly with preconfigured modules
  • Teams needing TypeScript, <script setup> syntax, and an auto-import workflow
  • Projects planning to drive the site with Markdown content and requiring PWA and theme mode capabilities

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    You can try it online via StackBlitz or create a repository from this template on GitHub

  2. 2

    For local cloning, run npx degit toimc/nuxt-starter my-nuxt3-app, then enter the directory and run pnpm i to install dependencies

  3. 3

    Use pnpm dev to start development and pnpm build to build; if pnpm is not installed, run npm install -g pnpm first

  4. 4

    The README recommends using VS Code with Volar; if Vetur is installed, it can be disabled

  5. 5

    The code is MIT licensed; when distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice; third-party assets such as demo images, fonts, and icons must be checked against their respective licenses

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version under the MIT license in a public repository; the free scope is the code of this version and does not imply that external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version of the code are allowed.
  • 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 limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • Demo images, fonts, icons, and other third-party assets must be checked against 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 additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text
https://github.com/toimc/nuxt-starter/blob/main/LICENSEhttps://github.com/toimc/nuxt-starter/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-13. 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 · 74 / 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
2025-01-24
Screenshot last checked
2026-10-13

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.

Review declaration: [email protected] · 2026-10-13

Inspect the recorded source material

SHA-256: 2bf398d61f719e035eaf14dfed49fb7a8020783e540576890906f52385046989

2026-10-13T04:37:51.617Z

Source file / repository
<h2 align="center">
Nuxt3+Vite Template
</h2><br>


## Features

- 💚 [Nuxt 3](https://nuxt.com/) - SSR, ESR, File-based routing, components auto importing, modules, etc.
- ⚡️ Vite - Instant HMR.
- 🎨 [UnoCSS](https://github.com/unocss/unocss) - The instant on-demand atomic CSS engine.
- 😃 Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/unocss/unocss).
- 🔥 The `<script setup>` syntax.
- 🍍 [State Management via Pinia](https://github.com/vuejs/pinia)
- 📑 [Layout system](./layouts).
- Ⓜ️ [Mock API](./server/middleware/mock.ts) with whitelist
- 📥 APIs auto importing - for Composition API, VueUse and custom composables.
- 🦾 TypeScript.
- 📲 [PWA](https://github.com/vite-pwa/nuxt) with offline support and auto update behavior.
- 🌓 Dark/Light mode.
- 📝 [Nuxt Content](https://content.nuxtjs.org/), Markdown Page Support, Content made easy



## Plugins

### Nuxt Modules

- [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs.
- [ColorMode](https://github.com/nuxt-modules/color-mode) - dark and Light mode with auto detection made easy with Nuxt.
- [UnoCSS](https://github.com/unocss/unocss) - the instant on-demand atomic CSS engine.
- [Pinia](https://github.com/vuejs/pinia) - intuitive, type safe, light and flexible Store for Vue. With `@pinia-plugin-persistedstate/nuxt` for persist data use localStorage.
- [VitePWA](https://github.com/vite-pwa/nuxt) - zero-config PWA Plugin for Nuxt 3.
- [DevTools](https://github.com/nuxt/devtools) - unleash Nuxt Developer Experience.
- [Content](https://content.nuxtjs.org/) - Nuxt Content reads the `content/` directory in your project, parses `.md`, `.yml`, `.csv` and `.json` files to create a powerful data layer for your application. Use Vue components in Markdown with the [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc).



## IDE

We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable [Vetur](https://vuejs.github.io/vetur/) if you have it).



## Try it now!

### Online

<a href="https://stackblitz.com/edit/toimc-nuxt3-starter"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>



### GitHub Template

[Create a repo from this template on GitHub](https://github.com/toimc/nuxt-starter/generate).



### Clone to local

If you prefer to do it manually with the cleaner git history

```bash
npx degit toimc/nuxt-starter my-nuxt3-app
cd my-nuxt3-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

#start
pnpm dev

#build
pnpm build
```
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

laravel-nuxt

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

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

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

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

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

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