Nuxt Pro

Starting the developement

• clone the repo & cd into the project
• run nvm use to use the correct node version from the .nvmrc file (please install nvm if you don't have it yet)
• run cp .env.example .env and define the env vars
• run yarn install to get the dependencies
• now just run the yarn dev to spin up the dev server
• create a new branch from the dev branch & continue developing

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

Table of Contents

• Nuxt Pro
  • Starting the developement
  • Features
  • Table of Contents
  • Development
    • Deploy as Static Site
  • Notes
    • Custom Workspace Snippets
    • Styles
    • Theme (Dark Mode)
    • Localization
    • Generate Locales
    • Icons
    • Precommit and Postmerge

Development

• This project is using yarn as the package manager.
• Clone this project to your machine
• Install dependencies yarn install
• Run yarn dev to start development server and open http://localhost:3000 in your browser

Deploy as Static Site

• Run yarn generate to build the project
• Serve dist/ folder Checkout the deployment documentation.

Notes

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 :

<script lang="ts" setup> import { AppSetup } from '~/utils/app'; // app setup AppSetup() </script>

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 :

yarn 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 "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