nuxt-ignis 0.1.4 → 0.1.5

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.1.5 (2024-12-21)
+- feat: more flexible config for `i18n` and `formkit`
+- docs: improved instructions for using as a layer
+
 ## 0.1.4 (2024-12-07)
 - feat: include `elrh-pslo` text utility
 - docs: add instructions for using as a layer

package/README.md

@@ -20,20 +20,34 @@ Aside from being "forked", `nuxt-ignis` is also available as [NPM package](https
 
 1) Add following dependency into your `package.json`:
 ```
-"nuxt-ignis": "0.1.4"
+"nuxt-ignis": "0.1.5"
 ```
 
 2) Add following section into your `nuxt.config.ts`:
 ```
 extends: [
-  `nuxt-ignis`
+  'nuxt-ignis'
 ]
 ```
 
-3) Setup your `.env` to fit your project needs. Check [Configuration](#Configuration) section for reference.
+3) Add `.npmrc` file with following content (if you don't have it yet):
+```
+shamefully-hoist=true
+strict-peer-dependencies=false
+```
+
+4) Setup your `.env` to fit your project needs. Check [Configuration](#Configuration) section for reference.
 
 You are ready to build your next awesome project in Nuxt!
 
+#### Netlify deployment note
+If you use [Netlify](https://www.netlify.com/) for deployment then for some reasons [not yet clear to me](https://github.com/nuxt/nuxt/discussions/30187) after extending from Nuxt Ignis you have to add two explicit dependencies into your `package.json`, namely:
+```
+"vue": "latest",
+"vue-router": "latest"
+```
+Without this workaround the project builds and deploys but will hit runtime error 500 upon loading the page. Hopefully, this is just a temporary issue (12/2024).
+
 ## Overview
 
 **Fundamentals**
@@ -92,12 +106,21 @@ Currently, following modules are opinionated:
 - `@nuxtjs/tailwindcss` - set `NUXT_PUBLIC_IGNIS_TAILWIND` to `true | false` (ignored if `NUXT_PUBLIC_IGNIS_UI=true`)
 - `nuxt-neon` - set `NUXT_PUBLIC_IGNIS_NEON` to `true | false`
 - `@nuxtjs/supabase` - set `NUXT_PUBLIC_IGNIS_SUPABASE` to `true | false`
-- `@nuxtjs/i18n` - set `NUXT_PUBLIC_IGNIS_I18N` to `true | false`
-- `@formkit/nuxt` - set `NUXT_PUBLIC_IGNIS_FORMKIT` to `true | false`
+- `@nuxtjs/i18n` - set `NUXT_PUBLIC_IGNIS_I18N_ENABLED` to `true | false`
+- `@formkit/nuxt` - set `NUXT_PUBLIC_IGNIS_FORMKIT_ENABLED` to `true | false`
 - `@nuxt/content` - set `NUXT_PUBLIC_IGNIS_CONTENT` to `true | false`
 
 Default values are **false** (not included) for all optional modules.
 
+#### I18N options
+- you can select default language locale via `NUXT_PUBLIC_IGNIS_I18N_LOCALE`
+- all `.json` files with messages in `@assets/lang` folder will be auto-scanned
+- if [default config file](https://github.com/AloisSeckar/nuxt-ignis/blob/main/i18n.config.ts) is not suitable for your project, you may specify path to your own using `NUXT_PUBLIC_IGNIS_I18N_CONFIG`
+
+#### Formkit options
+- you can select default language locale via `NUXT_PUBLIC_IGNIS_FORMKIT_LOCALE`
+- if [default config file](https://github.com/AloisSeckar/nuxt-ignis/blob/main/i18n.config.ts) is not suitable for your project, you may specify path to your own using `NUXT_PUBLIC_IGNIS_FORMKIT_CONFIG`
+
 ### Optional features
 Currently, following extra features (not using separate Nuxt Modules) are opinionated:
 - `Open Props CSS` - set `NUXT_PUBLIC_IGNIS_OPENPROPS` to `true | false`

package/app.vue

@@ -25,8 +25,8 @@ useHead({
     lang: 'en',
   },
   bodyAttrs: {
-    class: 'bg-slate-900 m-auto text-center text-white'
-  }
+    class: 'bg-slate-900 m-auto text-center text-white',
+  },
 })
 initConsola()
 log.info('Nuxt Ignis was here!')

package/components/AppFeature.vue

@@ -35,9 +35,9 @@
  * Macro `defineProps()` comes from Vue.js API
  * (https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits).
  * This is how to pass variables inside components in Vue.
- * 
+ *
  * `required` - value has to be provided, otherwise an error will occur
- * 
+ *
  * `default` - will have this value, unless overwritten by caller
  */
 const props = defineProps({
@@ -48,7 +48,8 @@ const props = defineProps({
 /**
  * `Icon` component can only be used if `@nuxt/ui` module is activated.
  */
-const showIcon = useRuntimeConfig().public.ignis.ui === 'nuxt-ui'
+const config = useRuntimeConfig().public.ignis
+const showIcon = config.preset.ui === 'nuxt-ui' || config.ui
 
 // In setup section, you have to adress properties like this.
 // You cannot reach them directly like in template.

package/components/CurrentTime.vue

@@ -20,8 +20,7 @@
       day="2-digit"
       hour="2-digit"
       minute="2-digit"
-      second="2-digit"
-    />
+      second="2-digit" />
   </div>
 </template>
 

package/composables/useTranslation.ts

@@ -2,47 +2,46 @@ import lang from '@/assets/lang/en.json'
 
 /**
  * An adapter above `t` function from `i18n` module.
- * 
+ *
  * This function is basically a shorthand for obtaining `i18n` translation in scripts.
  * In templates `$t` function is available, but in scripts we normally have to
  * access the `t` function via the instance of `$i18n` living inside current Nuxt App.
- * 
- * Since $i18n is an optional dependency in Nuxt Ignis setup, this also gracefully handles 
+ *
+ * Since $i18n is an optional dependency in Nuxt Ignis setup, this also gracefully handles
  * cases when user turns the module off while still using the translations in the code.
- * 
+ *
  * @param key identifier of text that should be displayed
  * @returns translated text from i18n sources
  */
 export function useT(key: string): string {
-  if (useRuntimeConfig().public.ignis.i18n) {
+  if (useRuntimeConfig().public.ignis.i18n.enabled) {
     // i18n available => just use it
-    // @ts-ignore (in case i18n is turned off, type of $i18n cannot be infered)
     return useNuxtApp().$i18n.t(key)
   } else {
     // backdoor for Nuxt Ignis to display values on demo index page
     const backdoorValue = searchLang(key)
     if (backdoorValue) {
-        return backdoorValue as string
+      return backdoorValue as string
     }
     // for other custom values a warning will be produced and a placeholder will be returned
     log.warn('@nuxtjs/i18n turned off, translations are not available (set NUXT_PUBLIC_IGNIS_I18N=true)')
-    return "Translation not available"
+    return 'Translation not available'
   }
 }
 
 /** AI-generated helper to search a value for given key in JSON lang file. */
 function searchLang(key: string): unknown {
-    const keys = key.split(".")
+  const keys = key.split('.')
 
-    let current = lang
-    for (const key of keys) {
-        if (current && key in current) {
-            // @ts-expect-error TODO this should be fixed
-            current = current[key]
-        } else {
-            return undefined
-        }
+  let current = lang
+  for (const key of keys) {
+    if (current && key in current) {
+      // @ts-expect-error TODO this should be fixed
+      current = current[key]
+    } else {
+      return undefined
     }
+  }
 
-    return current
+  return current
 }

package/features.ts

@@ -61,22 +61,28 @@ export function setFeatures() {
   }
 
   // i18n
-  if (process.env.NUXT_PUBLIC_IGNIS_I18N === 'true') {
+  if (process.env.NUXT_PUBLIC_IGNIS_I18N_ENABLED === 'true') {
     // module definition
     nuxtConfig.modules.push('@nuxtjs/i18n')
     // module-specific config key
     nuxtConfig = defu({
       i18n: {
-        vueI18n: './i18n.config.ts',
-        locales: ['en'],
-        defaultLocale: 'en',
+        vueI18n: process.env.NUXT_PUBLIC_IGNIS_I18N_CONFIG || './i18n.config.ts',
       },
     }, nuxtConfig)
   }
 
   // formkit
-  if (process.env.NUXT_PUBLIC_IGNIS_FORMKIT === 'true') {
+  if (process.env.NUXT_PUBLIC_IGNIS_FORMKIT_ENABLED === 'true') {
+    // module definition
     nuxtConfig.modules.push('@formkit/nuxt')
+    // module-specific config key
+    nuxtConfig = defu({
+      formkit: {
+        autoImport: true,
+        configFile: process.env.NUXT_PUBLIC_IGNIS_FORMKIT_CONFIG || './formkit.config.ts',
+      },
+    }, nuxtConfig)
   }
 
   // content

package/formkit.config.ts

@@ -1,11 +1,12 @@
 // https://formkit.com/guides/optimizing-for-production#using-the-nuxt-module
-import { en, de } from '@formkit/i18n'
+import { en, de, cs } from '@formkit/i18n'
 import type { DefaultConfigOptions } from '@formkit/vue'
 
+const ignisLocale = process.env.NUXT_PUBLIC_IGNIS_FORMKIT_DEFAULT || 'en'
+
 const config: DefaultConfigOptions = {
-  // example of importing different message translations and set the default one
-  locales: { en, de },
-  locale: 'en',
+  locales: { en, de, cs }, // TODO allow multiple locales
+  locale: ignisLocale,
 }
 
 export default config

package/i18n.config.ts

@@ -1,12 +1,12 @@
-import en from '@/assets/lang/en.json'
-// create and load more language files if needed
+const ignisLocale = process.env.NUXT_PUBLIC_IGNIS_I18N_DEFAULT || 'en'
 
+// https://i18n.nuxtjs.org/docs/composables/define-i18n-config
 export default defineI18nConfig(() => ({
   legacy: false,
   strategy: 'no_prefix',
-  locale: 'en',
-  defaultLocale: 'en',
-  fallbackLocale: 'en',
-  messages: { en }, // allowe more language if needed
+  locale: ignisLocale,
+  defaultLocale: ignisLocale,
+  fallbackLocale: ignisLocale,
+  messages: scanI18NSources(), // will dynamically load all .jsons from @/assets/lang/*
   warnHtmlMessage: false,
 }))

package/nuxt.config.ts

@@ -26,6 +26,7 @@ const nuxtConfig = defu(ignisFeatures, {
       // NOTE: due to static-like nature of nuxt.config.ts file
       // actual values MUST BE provided via .env file (or production equivalent)
       ignis: {
+        // presets
         preset: {
           ui: 'off', // nuxt-ui/tailwind/off
           db: 'off', // neon/supabase/off
@@ -35,8 +36,16 @@ const nuxtConfig = defu(ignisFeatures, {
         tailwind: false, // true/false (ignored, if ui=true)
         neon: false, // true/false
         supabase: false, // true/false
-        i18n: false, // true/false
-        formkit: false, // true/false
+        i18n: {
+          enabled: false, // true/false
+          default: 'en', // default locale (should be same as formkit)
+          config: './i18n.config.ts', // path to config file
+        },
+        formkit: {
+          enabled: false, // true/false
+          default: 'en', // default locale (should be same as i18n)
+          config: './formkit.config.ts', // path to config file
+        },
         content: false, // true/false
         openprops: false, // true/false
         pslo: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-ignis",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Enhanced and customizable Nuxt application starter pack",
   "repository": "github:AloisSeckar/nuxt-ignis",
   "license": "MIT",

package/pages/index.vue

@@ -48,8 +48,8 @@ const nuxtui = ui === 'nuxt-ui' || setup.ui
 const tailwind = ui !== 'off' || setup.ui || setup.tailwind
 const neon = db === 'neon' || setup.neon
 const supabase = db === 'supabase' || setup.supabase
-const i18n = setup.i18n
-const formkit = setup.formkit
+const i18n = setup.i18n.enabled
+const formkit = setup.formkit.enabled
 const content = setup.content
 const openprops = setup.openprops
 </script>

package/utils/i18n-sources.ts

@@ -0,0 +1,18 @@
+// scans @/assets/lang/* for all .json files with i18n messages
+// and makes them available for i18n.config.ts
+
+import type { LocaleMessage } from '@intlify/core-base'
+
+export function scanI18NSources() {
+  const modules = import.meta.glob('@/assets/lang/*.json', { eager: true })
+
+  const messages = {} as { [x: string]: LocaleMessage<unknown> }
+  for (const path in modules) {
+    const locale = path.match(/\/([^/]+)\.json$/)
+    if (locale && locale[1]) {
+      messages[locale[1]] = modules[path] as LocaleMessage<unknown>
+    }
+  }
+
+  return messages
+}

package/utils/ignis-types.ts

@@ -1,21 +1,21 @@
 /**
  * Available variants for UI libraries.
- * 
+ *
  * `nuxt-ui` - full https://ui.nuxt.com/ via `@nuxt/ui` connector module **[RECOMMENDED]**
- * 
+ *
  * `tailwind` - only https://tailwindcss.com/ via `@nuxtjs/tailwindcss` connector module
- * 
+ *
  * `off` - no UI library **[DEFAULT]**
  */
 export type UIOptions = 'nuxt-ui' | 'tailwind' | 'off'
 
 /**
  * Available variants for Database connector.
- * 
+ *
  * `neon` - https://neon.tech/ via `nuxt-neon` connector module **[RECOMMENDED]**
  *
  * `supabase` - https://supabase.com/ via `@nuxtjs/supabase` connector module
- * 
+ *
  * `off` - no database module **[DEFAULT]**
  */
 export type DBOptions = 'neon' | 'supabase' | 'off'