https://github.com/adkcodexd/mynuxt3
nuxt3 template
https://github.com/adkcodexd/mynuxt3
Last synced: 2 months ago
JSON representation
nuxt3 template
- Host: GitHub
- URL: https://github.com/adkcodexd/mynuxt3
- Owner: ADKcodeXD
- License: mit
- Created: 2022-06-13T03:38:21.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-13T03:38:22.000Z (about 4 years ago)
- Last Synced: 2025-01-26T16:44:17.205Z (over 1 year ago)
- Language: Vue
- Size: 11.3 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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 now in RC version (Release Candidate) [But i'm still using from nuxt3 latest version]
> Nuxt 3 is still in beta and is not recommended for production use.
> Breaking changes tracker can be found [here](https://github.com/nuxt/framework/discussions/2883)
## Features
- [x] 💨 [Tailwind CSS v3](https://tailwindcss.com/) with [Windicss](https://windicss.org/)
- [x] ✨ [Headless UI](https://headlessui.dev/)
- [x] 🔔 [Icon Pack Component (unplugin-icons)](https://icones.js.org/)
- [x] 🛹 [State & Store Management (Pinia)](https://pinia.vuejs.org/)
- [x] 🚩 [Localization (i18n) by @intlify](https://github.com/intlify/nuxt3)
- [x] 📦 [Vue Composition Collection (Vueuse)](https://vueuse.org/)
- [x] 🌙 Switch Theme (light, dark, system, realtime)
- [x] 🇮🇩 Language Switcher
- [x] 🪝 Built-in Component & Layout
- [x] Eslint & Prettier
- [x] Husky & Commitlint
## To Do
- [ ] Adding simple Unit Test
- [ ] Adding HTTP Client
- [ ] Configurable Theme (colors, fonts, etc)
## Preview
## Table of Contents
- [Nuxt 3 Awesome Starter](#nuxt-3-awesome-starter)
- [Features](#features)
- [To Do](#to-do)
- [Preview](#preview)
- [Table of Contents](#table-of-contents)
- [Quick Start](#quick-start)
- [Built-in Components](#built-in-components)
- [Notes](#notes)
- [Styles](#styles)
- [Theme (Dark Mode)](#theme-dark-mode)
- [Localization](#localization)
- [Icons](#icons)
- [Precommit and Postmerge](#precommit-and-postmerge)
- [License](#license)
## Quick Start
* This project using `yarn` as package manager.
* Clone this project to your computer `git clone https://github.com/viandwi24/nuxt3-awesome-starter`
* 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](https://v3.nuxtjs.org/docs/deployment).
## Built-in Components
- [x] Footer
- [x] Button
- [x] Anchor (link)
- [x] Navbar
- [x] Navbar Builder
- [x] Drawer (on mobile)
- [x] Options (on mobile)
- [x] Action Sheet
- [x] Theme Toggle / Switcher
- [x] Page Layout
- [x] Wrapper
- [x] Header
- [x] Title
- [x] Body
- [x] Section
- [x] Section Wrapper
- [x] Section Title
- [x] Dashboard Layout
- [x] Sidebar
- [ ] Modal
- [ ] Alert
- [ ]
## Notes
### 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` :
```vue
import { AppSetup } from '~/utils/app';
// app setup
AppSetup()
```
To change theme, you can direct set theme from state `theme.setting`, example :
```vue
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
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](https://github.com/intlify/nuxt3)
lang construct inside `AppSetup()` in `/path/to/app.vue` :
import { AppSetup } from '~/utils/app';
// app setup
AppSetup()
To change language, you can direct set language from state `lang.setting`, example :
```vue
const langSetting = useState<string>('locale.setting')
langSetting.value = 'en'
```
When you change state `locale.setting`, it will automatically change language.
### 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/](https://icones.js.org/)
you can use `` or ``.
in this project, configuration prefix as a "icon", you can see in `nuxt.config.ts` :
```js
export default defineNuxtConfig({
...
vite: {
plugins: [
UnpluginComponentsVite({
dts: true,
resolvers: [
IconsResolver({
prefix: 'Icon',
}),
],
}),
],
},
...
})
```
Example :
```vue
// use icon from collection "Simple Icons" and name icon is "nuxtdotjs"
// use icon from collection "Unicons" and name icon is "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`
## License
This project is licensed under the MIT license, Copyright (c) 2022 Alfian Dwi Nugraha. For more information see the [LICENSE](LICENSE.md) file.
