Nuxt 3 Awesome Starter
a Nuxt 3 starter template or boilerplate with a lot of useful features. and integrated with TailwindCSS 3.
This template was built to make it easier to create web projects using Nuxt 3. It was originally designed for coursework and portfolio templates. (hence there will be lots of ui components for easy reuse)
Warning
Features
- ๐จ Tailwind CSS v3 with Windicss
-
โจ Headless UI -
๐ Icon Pack Component (unplugin-icons) -
๐น State & Store Management (Pinia) -
๐ฉ Localization (i18n) by @intlify & Auto Generate Locales - ๐ฆ Vue Composition Collection (Vueuse)
-
๐ Content Management System (Nuxt Content) [SSR] - ๐ Switch Theme (light, dark, system, realtime)
-
๐ฎ๐ฉ Language Switcher - ๐ช Built-in Component & Layout
- Eslint & Prettier
- Husky & Commitlint
- Custom Workspace Snippets
- Built-in Unit Test
- Configurable Theme
- Primary Colors
- Font
To Do
- Adding HTTP Client
Preview
![]() |
|
![]() |
![]() |
Table of Contents
Quick Start
For detail information, go here Getting Started
Start with this template
- This project using
pnpm
as package manager. - Clone this project to your computer
git clone https://github.com/viandwi24/nuxt3-awesome-starter
- Install dependencies
pnpm install
- Run
pnpm dev
to start development server and openhttp://localhost:3000
in your browser
Deploy as Static Site
- Run
pnpm generate
to build the project - Serve
dist/
folder Checkout the deployment documentation.
Built-in Components
- Footer
- Button
- Anchor (link)
- Alert
- Card
- Action Sheet
- Theme Toggle / Switcher
- Navbar
- Navbar Builder
- Drawer (on mobile)
- Options (on mobile)
- Page Layout
- Wrapper
- Header
- Title
- Body
- Section
- Section Wrapper
- Section Title
- Section
- Dashboard Layout
- Sidebar
- Modal
Notes
Nuxt Content
With Nuxt Content, you can just create markdown file (recommended) inside content
folder.
But this is only available for SSR (Server Side Rendering) mode. Static mode still not working, you can see the issue nuxt/content#1202
For now, you can follow
Custom Workspace Snippets
This workspace including custom snippets for VSCode.
- n3:content
content template with markdown - n3:page
page template
Styles
Tailwindcss import managed by windicss. 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)
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
Localization is a plugin that allows you to switch between languages. this lib in :
/path/to/utils/lang.ts
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
:
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'
</script>
When you change state locale.setting
, it will automatically change language.
Generate Locales
I made an automatic tool to automatically translate to all languages โโthat have been prepared in the ./locales/ folder So, you can just update "locales/en.yml" and run this tools, it will automatically translate to all languages.
You can just run :
pnpm generate:locales
# or :
node ./tools/translator.js ./locales en.yml
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: [
UnpluginComponentsVite({
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 />
Precommit and Postmerge
This project using husky and commitlint for precommit and postmerge.
when you commit, it will check your commit message and running "pnpm 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 "pnpm" to automatically install new dependencies.
configuration in /path/to/.husky/post-merge
License
This project is licensed under the MIT license, Copyright (c) 2022 Alfian Dwi Nugraha. For more information see the LICENSE file.