hdhsyyyyy / nuxt3-element-custody Goto Github PK

• [✅] 🛹 State & Store Management (Pinia)
• [✅] 🚩 Localization (i18n) by @intlify & Auto Generate Locales
• [✅] 📦 Vue Composition Collection (Vueuse)
• [✅] 📚 Content Management System (Nuxt Content) [SSR]
• [✅] 📈 UI FrameWork(Element-plus)
• [✅] 💨 Reimagine Atomic CSS(UnoCSS)
• [✅] 🇮🇩 Language Switcher
• [✅] 🪝 Built-in Component & Layout
• [✅] Eslint & Stylelint && Prettier
• [✅] Husky & Commitlint
• [✅] Custom Git commit(cz-comit)
• [✅] Custom Workspace Snippets

• Adding simple Unit Test
• Configurable Theme
  • Primary Colors
  • Font

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

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

This workspace including custom snippets for VSCode.

• nuxt3:content
  content template with markdown
• nuxt3
  page template

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.

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 translate

# or :

node ./tools/translator.js ./locales en.yml

Run :

yarn commit

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