@mframework/ui 0.0.6-beta2 → 0.0.6-beta3

package/module.ts

@@ -8,17 +8,18 @@ import {
 } from '@nuxt/kit'
 
 export interface MFrameworkUiOptions {
-  image?: Record<string, any>
-  fonts?: Record<string, any>
-  vuetify?: {
-    vuetifyOptions?: Record<string, any>
-  }
-  tailwind?: {
-    enable?: boolean
+  image ? : Record < string, any >
+    fonts ? : Record < string, any >
+    vuetify ? : {
+      vuetifyOptions ? : Record < string,
+      any >
+    }
+  tailwind ? : {
+    enable ? : boolean
   }
 }
 
-export default defineNuxtModule<MFrameworkUiOptions>({
+export default defineNuxtModule < MFrameworkUiOptions > ({
   meta: {
     name: '@mframework/ui',
     configKey: 'mframeworkUi'
@@ -38,7 +39,9 @@ export default defineNuxtModule<MFrameworkUiOptions>({
     }
   },
   async setup(options, nuxt) {
-    const { resolve } = createResolver(import.meta.url)
+    const {
+      resolve
+    } = createResolver(import.meta.url)
 
     //
     // 1. Expose options to runtime
@@ -65,7 +68,9 @@ export default defineNuxtModule<MFrameworkUiOptions>({
       // Use Node resolution from this project's root to detect installed package
       // without triggering Nuxt's module loader.
       // eslint-disable-next-line @typescript-eslint/no-var-requires
-      const { createRequire } = await import('module')
+      const {
+        createRequire
+      } = await import('module')
       const req = createRequire(import.meta.url)
       try {
         req.resolve('vuetify')
@@ -92,7 +97,10 @@ export default defineNuxtModule<MFrameworkUiOptions>({
       nuxt.options.css = nuxt.options.css || []
       nuxt.options.css.push(resolve('./runtime/assets/css/tailwind.css'))
 
-      nuxt.options.postcss = nuxt.options.postcss || { plugins: {}, order: [] }
+      nuxt.options.postcss = nuxt.options.postcss || {
+        plugins: {},
+        order: []
+      }
       nuxt.options.postcss.plugins = nuxt.options.postcss.plugins || {}
       // Use the new PostCSS adapter package name so Nuxt doesn't try to
       // use the old `tailwindcss` package as a PostCSS plugin.
@@ -108,19 +116,14 @@ export default defineNuxtModule<MFrameworkUiOptions>({
     // 6. Register plugins (icons, theme, icon switching, search).
     //    Only register plugins that require Vuetify when Vuetify is available.
     //
-    if (vuetifyInstalled) {
-      addPlugin(resolve('./runtime/plugins/theme'))
-      addPlugin(resolve('./runtime/plugins/icon-switcher'))
-      addPlugin(resolve('./runtime/search/plugin'))
-    } else {
-      // If Vuetify isn't installed, we still register a minimal search plugin
-      // that doesn't depend on Vuetify, if present. Keep module resilient.
-      try {
-        addPlugin(resolve('./runtime/search/plugin'))
-      } catch (e) {
-        // ignore — plugin not critical
-      }
-    }
+    // Install Vuetify first
+    await installModule(resolveModule('vuetify-nuxt-module'), {
+      vuetifyOptions: options.vuetify?.vuetifyOptions || {}
+    })
+
+    // THEN load plugins that depend on Vuetify
+    addPlugin(resolve('./runtime/plugins/theme'))
+    addPlugin(resolve('./runtime/plugins/icon-switcher'))
 
     //
     // 7. Auto-import components from this module

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mframework/ui",
-  "version": "0.0.6-beta2",
+  "version": "0.0.6-beta3",
   "description": "Official opinionated UI module for the M Framework.",
   "keywords": [
     "ui",

package/runtime/plugins/icon-switcher.ts

@@ -1,22 +1,32 @@
-import { vuetify } from './vuetify'
+import { defineNuxtPlugin } from '#app'
+import { useVuetify } from 'vuetify-nuxt-module/runtime'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const vuetify = useVuetify()
+
+  // If Vuetify isn't ready yet, skip plugin initialization
+  if (!vuetify || !vuetify.framework) {
+    console.warn('[mframework-ui] Vuetify not ready for icon-switcher plugin')
+    return
+  }
+
+  const stored =
+    typeof localStorage !== 'undefined'
+      ? localStorage.getItem('mframework-icon-set')
+      : null
 
-export default (nuxtApp: any) => {
-  const stored = typeof localStorage !== 'undefined' ? localStorage.getItem('mframework-icon-set') : null
   const initial = stored || 'mdi'
-  const framework = vuetify as any
 
-  // `vuetify` typing differs between versions; treat as any here
-  ;(vuetify as any).framework = (vuetify as any).framework || {}
-  ;(vuetify as any).framework.icons = (vuetify as any).framework.icons || {}
-  ;(vuetify as any).framework.icons.defaultSet = initial
+  vuetify.framework.icons = vuetify.framework.icons || {}
+  vuetify.framework.icons.defaultSet = initial
 
   const setIconSet = (name: string) => {
-    ;(vuetify as any).framework.icons.defaultSet = name
-    if (typeof localStorage !== 'undefined') localStorage.setItem('mframework-icon-set', name)
+    vuetify.framework.icons.defaultSet = name
+    localStorage.setItem('mframework-icon-set', name)
   }
 
   nuxtApp.provide('mIcons', {
     setIconSet,
-    current: () => (vuetify as any).framework.icons.defaultSet,
+    current: () => vuetify.framework.icons.defaultSet
   })
-}
+})