Nuxt 3 Awesome Starter

a Nuxt 3 starter template or boilerplate with a lot of useful features. and integrated with TailwindCSS 3.

WARNING Nuxt 3 is still in beta and is not recommended for production use.



Preview Preview

Live Demo

Open In Code Sandbox Open In Stackblitz

Table of Contents

Built-in Components

  • Footer
  • Button
  • Anchor (link)
  • Navbar
    • Navbar Builder
    • Drawer (on mobile)
    • Options (on mobile)
  • Action Sheet
  • Theme Toggle / Switcher
  • Page Layout
    • Wrapper
    • Header
      • Title
    • Body
      • Section
        • Section Wrapper
        • Section Title
  • Dashboard Layout
    • Sidebar
  • Modal
  • Alert

Quick Start

  • This project using yarn as package manager.
  • Clone this project to your computer git clone
  • Install dependencies yarn install
  • Run yarn dev to start development server and open http://localhost:3000 in your browser
  • Run yarn build to build project and yarn start to start production server

Checkout the deployment documentation.



Tailwindcss import managed by windicss. and you can add custom styles in :


Theme (Dark Mode)

ThemeManager is a plugin that allows you to switch between themes. this lib in :


Thememanager is a function-class construct when app.vue before mounted. theme construct inside AppSetup() in /path/to/app.vue :

<!-- /path/to/app.vue -->
<script lang="ts" setup>
import { AppSetup } from '~/utils/app';
// app setup

To change theme, you can direct set theme from state theme.setting, example :

<script lang="ts" setup>
import { IThemeSettingOptions } from '~/utils/theme'
const themeSetting = useState<IThemeSettingOptions>('theme.setting')
themeSetting.value = 'dark'

When you change state theme.setting, it will automatically change theme.

Theme Setting have 4 options :

  • light
  • dark
  • system (operating system theme)
  • realtime (realtime theme, if 05:00 – 17:00, it will change to light theme, otherwise dark)

We have state theme.current, this state return light or dark theme. basically it’s process from theme.setting. dont change theme with this state.


Localization is a plugin that allows you to switch between languages. this lib in :


LanguageManager is a function-class construct when app.vue before mounted. this lib depend on @intlify/nuxt3 lang construct inside AppSetup() in /path/to/app.vue :

<script lang=”ts” setup> import { AppSetup } from ‘~/utils/app’; // app setup AppSetup() </script>

To change language, you can direct set language from state lang.setting, example :

<script lang="ts" setup>
const langSetting = useState<string>('locale.setting')
langSetting.value = 'en'

When you change state locale.setting, it will automatically change language.


This project using unplugin-icons for auto generate and import icon as component.

You can see collection icon list in :

you can use <prefix-collection:icon /> or <PrefixCollection:Icon />.

in this project, configuration prefix as a “icon”, you can see in nuxt.config.ts :

export default defineNuxtConfig({

    vite: {
        plugins: [
                dts: true,
                resolvers: [
                        prefix: 'Icon',


Example :

// use icon from collection "Simple Icons" and name icon is "nuxtdotjs"
<IconSimpleIcons:nuxtdotjs />

// use icon from collection "Unicons" and name icon is "sun"
<IconUil:sun />

Precommit and Postmerge

This project using husky and commitlint for precommit and postmerge. when you commit, it will check your commit message and running “yarn lint-staged” to check your staged files. configuration in : /path/to/.husky/pre-commit and /path/to/commitlint.config.js

And when Postmerge, it will run “yarn” to automatically install new dependencies. configuration in /path/to/.husky/post-merge


This project is licensed under the MIT license, Copyright (c) 2022 Alfian Dwi Nugraha. For more information see the LICENSE file.


View Github