webdelin / Nuxt3-starter

Nuxt 3 Awesome Starter

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

Features

• 💨 Tailwind CSS v3
• ✨ Headless UI
• 🔔 Icon Pack Component (unplugin-icons)
• 🛹 State & Store Management (Pinia)
• 🌙 Switch Theme (light, dark, system, realtime)
• 🪝 Built-in Component & Layout
• Localization
• Lint & Prettier

.	.

Demo

Demo

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

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
• Dashboard Layout
  • Sidebar
• Modal
• Alert

Notes

Styles

Tailwindcss import in :

/path/to/assets/sass/vendor.scss

and you can add custom styles in :

/path/to/assets/sass/app.scss

Theme (Dark Mode)

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

/path/to/utils/theme.ts

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
AppSetup()
</script>

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

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)

Icons

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

You can see collection icon list in : https://icones.js.org/

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: [
            ViteComponents({
                dts: true,
                resolvers: [
                    IconsResolver({
                        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 />

Quick Start

• Clone this project to your computer git clone https://github.com/viandwi24/nuxt3-awesome-starter
• Install dependencies npm install
• Run npm run dev to start development server and open http://localhost:3000 in your browser
• Run npm run build to build project and npm run start to start production server

Checkout the deployment documentation.

License

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