Nuxt 3 Awesome Starter

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

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

. .
Preview Preview On Mobile




Built-in Components

  • Footer
  • Button
  • Anchor (link)
  • Navbar
    • Navbar Builder
    • Drawer (on mobile)
    • Options (on mobile)
  • Action Sheet
  • Theme Toggle / Switcher
  • Modal
  • Alert



Tailwindcss import in :


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)


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 />

Nuxt 3 Development Notes


Make sure to install the dependencies

# npm
npm install

# yarn
yarn install


Start the development server on http://localhost:3000

# npm
npm run dev

# yarn
yarn dev


Build the application for production:

# npm
npm run build && npm run start

# yarn
yarn build && yarn start

Checkout the deployment documentation.


View Github