vuetify-nuxt4-module 1.1.0

package/dist/module.mjs

@@ -0,0 +1,253 @@
+import { defineNuxtModule, useLogger, createResolver, addPlugin, addImports, extendViteConfig, addVitePlugin } from '@nuxt/kit';
+import defu from 'defu';
+
+const MODULE_NAME = "nuxt-vuetify-module";
+const module$1 = defineNuxtModule({
+  meta: {
+    name: MODULE_NAME,
+    configKey: "vuetify",
+    compatibility: {
+      nuxt: ">=4.0.0"
+    }
+  },
+  defaults: {
+    vuetifyOptions: {
+      blueprint: "md3",
+      dateAdapter: "vuetify",
+      icons: {
+        defaultSet: "mdi"
+      },
+      ssr: true
+    },
+    importComposables: true,
+    prefixComposables: false,
+    transformAssetUrls: true,
+    autoImport: true,
+    styles: true,
+    persistence: {
+      enabled: true,
+      key: "nuxt-vuetify-theme",
+      storage: "cookie",
+      cookieOptions: {
+        maxAge: 60 * 60 * 24 * 365,
+        path: "/",
+        sameSite: "lax"
+      }
+    }
+  },
+  async setup(options, nuxt) {
+    const logger = useLogger(MODULE_NAME);
+    const { resolve } = createResolver(import.meta.url);
+    logger.info("Setting up Vuetify module...");
+    await nuxt.callHook("vuetify:register", (additionalOptions) => {
+      options = defu(additionalOptions, options);
+    });
+    nuxt.options.runtimeConfig.public.vuetify = {
+      vuetifyOptions: options.vuetifyOptions,
+      persistence: options.persistence
+    };
+    addStyles(nuxt, options.styles);
+    addIconStyles(nuxt, options.vuetifyOptions.icons);
+    nuxt.options.build.transpile.push("vuetify");
+    addPlugin({
+      src: resolve("./runtime/plugins/vuetify"),
+      mode: "all"
+    });
+    if (options.importComposables) {
+      addVuetifyComposables(options.prefixComposables);
+    }
+    addImports([
+      {
+        name: "useVuetify",
+        from: resolve("./runtime/composables/useVuetify")
+      },
+      {
+        name: "onVuetifyHook",
+        from: resolve("./utils/hooks")
+      },
+      {
+        name: "offVuetifyHook",
+        from: resolve("./utils/hooks")
+      }
+    ]);
+    extendViteConfig((config) => {
+      config.optimizeDeps ??= {};
+      config.optimizeDeps.include ??= [];
+      config.optimizeDeps.include.push("vuetify");
+      config.optimizeDeps.exclude ??= [];
+      config.optimizeDeps.exclude.push("vuetify/components", "vuetify/directives");
+      config.esbuild ??= {};
+      if (typeof config.esbuild !== "boolean") {
+        config.esbuild.treeShaking = true;
+      }
+      config.build ??= {};
+      config.build.rollupOptions ??= {};
+      const existingOnWarn = config.build.rollupOptions.onwarn;
+      config.build.rollupOptions.onwarn = (warning, warn) => {
+        if (warning.message?.includes("vuetify") && warning.message?.includes("dynamically imported")) {
+          return;
+        }
+        if (existingOnWarn) {
+          existingOnWarn(warning, warn);
+        } else {
+          warn(warning);
+        }
+      };
+      const output = config.build.rollupOptions.output;
+      if (output && !Array.isArray(output)) {
+        output.manualChunks = (id) => {
+          if (id.includes("vuetify") && (id.endsWith(".css") || id.endsWith(".sass") || id.endsWith(".scss"))) {
+            return "vuetify-styles";
+          }
+          if (id.includes("vuetify/lib/composables") || id.includes("vuetify/lib/util")) {
+            return "vuetify-core";
+          }
+          if (id.includes("vuetify/lib/framework")) {
+            return "vuetify-framework";
+          }
+          if (id.includes("vuetify/lib/components/VDataTable")) {
+            return "vuetify-datatable";
+          }
+          if (id.includes("vuetify/lib/components/VCalendar")) {
+            return "vuetify-calendar";
+          }
+          if (id.includes("VDatePicker") || id.includes("VCalendar")) return "vuetify-date";
+          if (id.includes("VAutocomplete") || id.includes("VCombobox")) return "vuetify-autocomplete";
+          if (id.includes("vuetify/lib/components/VForm") || id.includes("vuetify/lib/components/VTextField") || id.includes("vuetify/lib/components/VSelect")) {
+            return "vuetify-forms";
+          }
+          if (id.includes("vuetify/lib/components/VNavigationDrawer") || id.includes("vuetify/lib/components/VAppBar") || id.includes("vuetify/lib/components/VToolbar")) {
+            return "vuetify-navigation";
+          }
+          if (id.includes("vuetify/lib/components")) {
+            return "vuetify-components";
+          }
+          if (id.includes("vuetify/lib/directives")) {
+            return "vuetify-directives";
+          }
+          if (id.includes("@mdi/font") || id.includes("materialdesignicons")) {
+            return "icons";
+          }
+          if (id.includes("vuetify") && /\.(?:css|sass|scss)$/.test(id)) {
+            return "vuetify-styles";
+          }
+          if (id.includes("vuetify")) {
+            return "vuetify";
+          }
+        };
+      }
+      config.build.chunkSizeWarningLimit = 600;
+      config.build.minify = "esbuild";
+      config.build.cssMinify = "lightningcss";
+      config.build.cssCodeSplit = true;
+    });
+    if (options.transformAssetUrls) {
+      await setupTransformAssetUrls(nuxt);
+    }
+    if (options.autoImport) {
+      await setupAutoImport(options.autoImport, logger);
+    }
+    if (options.vuetifyOptions.ssr) {
+      nuxt.options.vite.ssr ??= {};
+      nuxt.options.vite.ssr.noExternal ??= [];
+      if (Array.isArray(nuxt.options.vite.ssr.noExternal)) {
+        nuxt.options.vite.ssr.noExternal.push("vuetify");
+      }
+    }
+    addPreloadHints(nuxt, options.vuetifyOptions.icons);
+    logger.success("Vuetify module setup complete");
+  }
+});
+function addStyles(nuxt, styles) {
+  if (typeof styles === "boolean" && !styles || styles === "none") return;
+  if (typeof styles === "object" && styles.configFile) {
+    nuxt.options.css.unshift(styles.configFile);
+  } else if (styles === "sass") {
+    nuxt.options.css.unshift("vuetify/styles/main.sass");
+  } else {
+    nuxt.options.css.unshift("vuetify/styles");
+  }
+}
+function addIconStyles(nuxt, icons) {
+  const defaultSet = icons?.defaultSet ?? "mdi";
+  if (defaultSet.includes("svg")) return;
+  const cssMap = {
+    mdi: "@mdi/font/css/materialdesignicons.css",
+    fa: "@fortawesome/fontawesome-free/css/all.css"
+  };
+  const css = cssMap[defaultSet];
+  if (css && !nuxt.options.css.includes(css)) {
+    nuxt.options.css.push(css);
+  }
+}
+function addVuetifyComposables(prefix) {
+  const composables = [
+    "useLocale",
+    "useDefaults",
+    "useDisplay",
+    "useLayout",
+    "useRtl",
+    "useTheme",
+    "useDate",
+    "useGoTo"
+  ];
+  const imports = composables.map((name) => ({
+    name,
+    as: prefix ? name.replace("use", "useV") : name,
+    from: "vuetify"
+  }));
+  addImports(imports);
+}
+async function setupTransformAssetUrls(nuxt) {
+  try {
+    const { transformAssetUrls } = await import('vite-plugin-vuetify');
+    nuxt.options.vite.vue ??= {};
+    nuxt.options.vite.vue.template = defu(nuxt.options.vite.vue.template || {}, {
+      transformAssetUrls
+    });
+  } catch {
+    const fallbackTransformAssetUrls = {
+      "v-img": ["src"],
+      "v-card": ["image"],
+      "v-card-item": ["image"],
+      "v-carousel-item": ["src"],
+      "v-navigation-drawer": ["image"],
+      "v-parallax": ["src"],
+      "v-avatar": ["image"]
+    };
+    nuxt.options.vite.vue ??= {};
+    nuxt.options.vite.vue.template = defu(nuxt.options.vite.vue.template || {}, {
+      transformAssetUrls: fallbackTransformAssetUrls
+    });
+  }
+}
+async function setupAutoImport(autoImport, logger) {
+  try {
+    const vuetifyPlugin = await import('vite-plugin-vuetify').then((m) => m.default);
+    const autoImportConfig = typeof autoImport === "boolean" ? autoImport : {
+      labs: autoImport.labs ?? false,
+      ignore: autoImport.ignore ?? []
+    };
+    addVitePlugin(vuetifyPlugin({ autoImport: autoImportConfig }));
+  } catch {
+    logger.warn(
+      "vite-plugin-vuetify not found. Install it for auto-import support:\n  npm install -D vite-plugin-vuetify"
+    );
+  }
+}
+function addPreloadHints(nuxt, icons) {
+  const defaultSet = icons?.defaultSet ?? "mdi";
+  nuxt.hook("nitro:config", (config) => {
+    config.prerender ??= {};
+    config.prerender.routes ??= [];
+  });
+  nuxt.hook("app:rendered", (ctx) => {
+    if (defaultSet === "mdi") {
+      ctx.renderResult?.head?.push(
+        '<link rel="preload" href="/_nuxt/@mdi/font/fonts/materialdesignicons-webfont.woff2" as="font" type="font/woff2" crossorigin>'
+      );
+    }
+  });
+}
+
+export { module$1 as default };

package/dist/runtime/composables/useVuetify.d.ts

@@ -0,0 +1,19 @@
+export declare function useVuetify(): {
+    vuetify: any;
+    theme: any;
+    locale: any;
+    display: any;
+    defaults: any;
+    isDark: import("vue").ComputedRef<any>;
+    isMobile: import("vue").ComputedRef<any>;
+    isSmAndDown: import("vue").ComputedRef<any>;
+    isMdAndUp: import("vue").ComputedRef<any>;
+    isRtl: import("vue").ComputedRef<any>;
+    currentBreakpoint: import("vue").ComputedRef<any>;
+    currentTheme: import("vue").ComputedRef<any>;
+    currentLocale: import("vue").ComputedRef<any>;
+    colors: import("vue").ComputedRef<any>;
+    toggleTheme(): void;
+    setTheme(name: string): void;
+    setLocale(locale: string): void;
+};

package/dist/runtime/composables/useVuetify.js

@@ -0,0 +1,38 @@
+import { createError, useNuxtApp } from "#app";
+import { computed } from "vue";
+export function useVuetify() {
+  const { $vuetify } = useNuxtApp();
+  if (!$vuetify) {
+    throw createError({
+      statusCode: 500,
+      message: "Vuetify is not initialized. Make sure vuetify-nuxt4-module is properly configured."
+    });
+  }
+  return {
+    // Core
+    vuetify: $vuetify,
+    theme: $vuetify.theme,
+    locale: $vuetify.locale,
+    display: $vuetify.display,
+    defaults: $vuetify.defaults,
+    // Computed helpers
+    isDark: computed(() => $vuetify.theme.global.current.value.dark),
+    isMobile: computed(() => $vuetify.display.mobile.value),
+    isSmAndDown: computed(() => $vuetify.display.smAndDown.value),
+    isMdAndUp: computed(() => $vuetify.display.mdAndUp.value),
+    isRtl: computed(() => $vuetify.locale.isRtl.value),
+    currentBreakpoint: computed(() => $vuetify.display.name.value),
+    currentTheme: computed(() => $vuetify.theme.global.name.value),
+    currentLocale: computed(() => $vuetify.locale.current.value),
+    colors: computed(() => $vuetify.theme.global.current.value.colors),
+    toggleTheme() {
+      $vuetify.theme.change($vuetify.theme.global.current.value.dark ? "light" : "dark");
+    },
+    setTheme(name) {
+      $vuetify.theme.global.name.value = name;
+    },
+    setLocale(locale) {
+      $vuetify.locale.current.value = locale;
+    }
+  };
+}

package/dist/runtime/plugins/vuetify.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/vuetify.js

@@ -0,0 +1,67 @@
+import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+import { createVuetify } from "vuetify";
+import { watch } from "vue";
+import {
+  logger,
+  callVuetifyHook,
+  createIconConfig,
+  createLocaleConfig,
+  createDateConfig,
+  loadBlueprint,
+  resolvePersistenceConfig,
+  getPersistedTheme,
+  setPersistedTheme
+} from "../../utils";
+export default defineNuxtPlugin({
+  name: "vuetify",
+  enforce: "pre",
+  parallel: true,
+  async setup(nuxtApp) {
+    const runtimeConfig = useRuntimeConfig().public.vuetify;
+    const { vuetifyOptions: config, persistence: persistenceOptions } = runtimeConfig;
+    logger.debug("Initializing Vuetify...");
+    const vuetifyOptions = {
+      ssr: config.ssr ?? true,
+      theme: config.theme,
+      defaults: config.defaults,
+      aliases: config.aliases
+    };
+    const [blueprint, dateConfig, iconConfig, localConfig] = await Promise.all([
+      config.blueprint ? loadBlueprint(config.blueprint) : void 0,
+      config.dateAdapter && config.dateAdapter !== "vuetify" ? createDateConfig(config.dateAdapter) : void 0,
+      config.icons ? createIconConfig(config.icons) : createIconConfig(),
+      config.locale ? createLocaleConfig(config.locale) : createLocaleConfig()
+    ]);
+    if (blueprint) vuetifyOptions.blueprint = blueprint;
+    if (dateConfig) vuetifyOptions.date = dateConfig;
+    if (iconConfig) vuetifyOptions.icons = iconConfig;
+    if (config.locale) vuetifyOptions.locale = localConfig;
+    await callVuetifyHook(nuxtApp, "vuetify:before-create", { vuetifyOptions });
+    const vuetify = createVuetify(vuetifyOptions);
+    nuxtApp.vueApp.use(vuetify);
+    if (import.meta.client) {
+      const persistenceConfig = resolvePersistenceConfig(persistenceOptions);
+      if (persistenceConfig.enabled) {
+        const setupPersistence = () => {
+          const persistedTheme = getPersistedTheme(persistenceConfig);
+          if (persistedTheme && vuetify.theme.themes.value[persistedTheme]) {
+            vuetify.theme.change(persistedTheme);
+          }
+          watch(
+            () => vuetify.theme.global.name.value,
+            (theme) => setPersistedTheme(persistenceConfig, theme)
+          );
+        };
+        if ("requestIdleCallback" in window) {
+          requestIdleCallback(setupPersistence);
+        } else {
+          setTimeout(setupPersistence, 0);
+        }
+      }
+    }
+    await callVuetifyHook(nuxtApp, "vuetify:configuration", { vuetifyOptions });
+    await callVuetifyHook(nuxtApp, "vuetify:ready", vuetify);
+    logger.success("Vuetify initialized");
+    nuxtApp.provide("vuetify", vuetify);
+  }
+});