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.
| . | . |
|---|---|
 |
 |
Demo
Features
-
💨 Tailwind CSS v3 -
✨ Headless UI -
🔔 Icon Pack Component (unplugin-icons) -
🛹 State & Store Management (Pinia) -
🌙 Switch Theme (light, dark, system, realtime) -
🪝 Built-in Component UI - Localization
- Lint & Prettier
Built-in Components
- Footer
- Button
- Anchor (link)
- Navbar
- Navbar Builder
- Drawer (on mobile)
- Options (on mobile)
- Action Sheet
- Theme Toggle / Switcher
- 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 :
lightdarksystem(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 />
Nuxt 3 Development Notes
Setup
Make sure to install the dependencies
# npm
npm install
# yarn
yarn install
Development
Start the development server on http://localhost:3000
# npm
npm run dev
# yarn
yarn dev
Production
Build the application for production:
# npm
npm run build && npm run start
# yarn
yarn build && yarn start
Checkout the deployment documentation.
Here the code I put in my project based on yours.
61 Oct 20, 2022
4 May 21, 2022
386 Dec 28, 2022
2 Mar 2, 2022
120 Dec 27, 2022
2 Nov 6, 2022
95 Dec 28, 2022
0 Dec 31, 2021
2 Jun 23, 2022
53 Dec 27, 2022
17 Nov 19, 2022
43 Jan 3, 2023
5 Nov 11, 2022
43 Jan 5, 2023
3 Jun 22, 2022
6 Dec 17, 2022
2 Nov 10, 2022
8 Dec 14, 2022
3 Aug 16, 2022