vuetify-nuxt-module 0.6.6 → 0.7.0

package/README.md

@@ -28,12 +28,12 @@
 
 - 📖 [**Documentation & guides**](https://vuetify-nuxt-module.netlify.app/)
 - 👌 **Zero-Config**: sensible built-in default [Vuetify](https://vuetifyjs.com/) configuration for common use cases
-- 🔌 **Extensible**: expose the ability to customize the Vuetify configuration via [Nuxt Plugin Hooks](https://nuxt.com/docs/guide/going-further/hooks#usage-with-plugins)
+- 🔌 **Extensible**: expose the ability to customize the Vuetify configuration via [Nuxt Runtime Hooks](https://nuxt.com/docs/guide/going-further/hooks#usage-with-plugins)
 - ⚡ **Fully Tree Shakable**: by default, only the needed Vuetify components are imported
 - 🛠️ **Versatile**: custom Vuetify [directives](https://vuetifyjs.com/en/getting-started/installation/#manual-steps) and [labs components](https://vuetifyjs.com/en/labs/introduction/) registration
 - ✨ **Configurable Styles**: configure your variables using [Vuetify SASS Variables](https://vuetifyjs.com/en/features/sass-variables/) 
 - 💥 **SSR**: automatic SSR detection and configuration including [HTTP Client hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints)
-- 🔩 **Nuxt Layers and Hooks**: load your Vuetify configuration using [Nuxt Layers](https://nuxt.com/docs/getting-started/layers#layers) or using a custom module via `vuetify:registerModule` [Nuxt Hook](https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time)
+- 🔩 **Nuxt Layers and Module Hooks**: load your Vuetify configuration using [Nuxt Layers](https://nuxt.com/docs/getting-started/layers#layers) or using a custom module via `vuetify:registerModule` [Nuxt Module Hook](https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time)
 - 📥 **Vuetify Configuration File**: configure your Vuetify options using a custom `vuetify.config` file, no dev server restart needed
 - 🔥 **Pure CSS Icons**: no more font/js icons, use the new `unocss-mdi` icon set or build your own with UnoCSS Preset Icons
 - 😃 **Icon Fonts**: configure the [icon font](https://vuetifyjs.com/en/features/icon-fonts/) you want to use, the module will automatically import it for you using CDN or local dependencies

package/custom-configuration.d.ts

@@ -1,3 +1,3 @@
-import { ExternalVuetifyOptions } from './dist/types';
+import type { ExternalVuetifyOptions } from './dist/module'
 declare function defineVuetifyConfiguration(vuetifyOptions: ExternalVuetifyOptions): ExternalVuetifyOptions;
 export { defineVuetifyConfiguration };

package/dist/module.d.mts

@@ -0,0 +1,446 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { HookResult } from '@nuxt/schema';
+import { VuetifyOptions, LocaleOptions, RtlOptions, createVuetify } from 'vuetify';
+import * as vuetify_locale from 'vuetify/locale';
+import * as vuetify_labs_components from 'vuetify/labs/components';
+import * as vuetify_directives from 'vuetify/directives';
+import * as vuetify_components from 'vuetify/components';
+
+type DateAdapter = 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom';
+/**
+ * Date configuration.
+ */
+interface DateOptions {
+    /**
+     * The date adapter.
+     *
+     * The adapter will be picked from the dependencies.
+     * When multiple `@date-io/xxxx` libraries installed in your project,
+     * you should specify the adapter otherwise an error will be thrown.
+     *
+     * If you want to use a custom adapter, configure `adapter: 'custom'`,
+     * and then add a Nuxt plugin to configure the adapter using `vuetify:configuration` hook.
+     *
+     * @default 'vuetify'
+     */
+    adapter?: DateAdapter;
+    /**
+     * Formats.
+     */
+    formats?: Record<string, string>;
+    /**
+     * Locales.
+     *
+     * When `@nuxtjs/i18n` Nuxt module is present, this option will be ignored, locales will be extracted from the available locales.
+     */
+    locale?: Record<string, any>;
+}
+type IconSetName = 'mdi' | 'fa' | 'fa4' | 'md' | 'mdi-svg' | 'fa-svg' | 'unocss-mdi' | 'custom';
+type IconFontName = 'unocss-mdi' | 'mdi' | 'fa' | 'fa4' | 'md';
+interface JSSVGIconSet {
+    aliases?: Record<string, string>;
+}
+interface FontAwesomeSvgIconSet {
+    /**
+     * The libraries to import and register with the corresponding name.
+     *
+     * For example, to import free svg icons, `libraries` should be (the default):
+     * `libraries: [[false, 'fas', '@fortawesome/free-solid-svg-icons']]
+     *
+     * Following with the example, the resulting import will be:
+     * `import { fas } from '@fortawesome/free-solid-svg-icons'`
+     *
+     * @default [[false, 'fas', '@fortawesome/free-solid-svg-icons']]
+     */
+    libraries?: [defaultExport: boolean, name: string, library: string][];
+}
+interface FontIconSet {
+    name: IconFontName;
+    /**
+     * Use CDN?
+     *
+     * - mdi: https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons
+     * - md:  https://fonts.googleapis.com/css?family=Material+Icons
+     * - fa:  https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css
+     * - fa4: https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css
+     *
+     * @default the corresponding CDN for the icon set
+     */
+    cdn?: string;
+}
+interface UnoCCSMdiIconSet {
+    collapse?: string;
+    complete?: string;
+    cancel?: string;
+    close?: string;
+    delete?: string;
+    clear?: string;
+    success?: string;
+    info?: string;
+    warning?: string;
+    error?: string;
+    prev?: string;
+    next?: string;
+    checkboxOn?: string;
+    checkboxOff?: string;
+    checkboxIndeterminate?: string;
+    delimiter?: string;
+    sortAsc?: string;
+    sortDesc?: string;
+    expand?: string;
+    menu?: string;
+    subgroup?: string;
+    dropdown?: string;
+    radioOn?: string;
+    radioOff?: string;
+    edit?: string;
+    ratingEmpty?: string;
+    ratingFull?: string;
+    ratingHalf?: string;
+    loading?: string;
+    first?: string;
+    last?: string;
+    unfold?: string;
+    file?: string;
+    plus?: string;
+    minus?: string;
+    calendar?: string;
+}
+interface IconsOptions {
+    /**
+     * @default 'mdi'
+     */
+    defaultSet: IconSetName;
+    /**
+     * The prefix for UnoCSS Preset Icons.
+     *
+     * @default 'i-'
+     */
+    unocssIconPrefix?: string;
+    /**
+     * Override the default mdi icons.
+     *
+     * Icon names should include the prefix and the collection, for example:
+     * - home: i-<collection>:<icon>
+     */
+    unocssIcons?: UnoCCSMdiIconSet;
+    unocssAdditionalIcons?: Record<string, string>;
+    sets?: IconFontName | IconFontName[] | FontIconSet[];
+    svg?: {
+        mdi?: JSSVGIconSet;
+        fa?: FontAwesomeSvgIconSet;
+    };
+}
+type ComponentName = keyof typeof vuetify_components;
+type Components = false | ComponentName | ComponentName[];
+type DirectiveName = keyof typeof vuetify_directives;
+type Directives = boolean | DirectiveName | DirectiveName[];
+type LabComponentName = keyof typeof vuetify_labs_components;
+type LabComponents = boolean | LabComponentName | LabComponentName[];
+type VuetifyLocale = keyof typeof vuetify_locale;
+interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'aliases' | 'components' | 'directives' | 'locale' | 'date' | 'icons'>> {
+    /**
+     * Configure the SSR options.
+     *
+     * This option is only used when SSR is enabled in your Nuxt configuration.
+     */
+    ssr?: {
+        clientWidth: number;
+        clientHeight?: number;
+    };
+    aliases?: Record<string, ComponentName>;
+    /**
+     * Do you need to configure some global components?.
+     *
+     * @default false
+     */
+    components?: Components;
+    /**
+     * Configure the locale messages, the locale, the fallback locale and RTL options.
+     *
+     * When `@nuxtjs/i18n` Nuxt module is present, the following options will be ignored:
+     * - `locale`
+     * - `fallback`
+     * - `rtl`
+     * - `messages`
+     *
+     * The adapter will be `vuetify`, if you want to use another adapter, check `date` option.
+     */
+    locale?: Omit<LocaleOptions, 'adapter'> & RtlOptions;
+    /**
+     * Include locale messages?
+     *
+     * When `@nuxtjs/i18n` Nuxt module is present, this option will be ignored.
+     *
+     * You can include the locales you want to use in your application, this module will load and configure the messages for you.
+     */
+    localeMessages?: VuetifyLocale | VuetifyLocale[];
+    /**
+     * Include the lab components?
+     *
+     * You can include all lab components configuring `labComponents: true`.
+     *
+     * You can provide an array with the names of the lab components to include.
+     *
+     * @see https://vuetifyjs.com/en/labs/introduction/
+     *
+     * @default false
+     */
+    labComponents?: LabComponents;
+    /**
+     * Include the directives?
+     *
+     * You can include all directives configuring `directives: true`.
+     *
+     * You can provide an array with the names of the directives to include.
+     *
+     * @default false
+     */
+    directives?: Directives;
+    /**
+     * Date configuration.
+     *
+     * When this option is configured, the `v-date-picker` lab component will be included.
+     *
+     * @see https://vuetifyjs.com/features/dates/
+     * @see https://vuetifyjs.com/components/date-pickers/
+     */
+    date?: DateOptions;
+    /**
+     * Include the icons?
+     *
+     * By default, `mdi` icons will be used via cdn: https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css.
+     *
+     * @see https://vuetifyjs.com/en/features/icon-fonts/
+     */
+    icons?: false | IconsOptions;
+}
+interface MOptions {
+    /**
+     * @default true
+     */
+    importComposables?: boolean;
+    /**
+     * If you are using another composables that collide with the Vuetify ones,
+     * enable this flag to prefix them with `V`:
+     * - `useLocale` -> `useVLocale`
+     * - `useDefaults` -> `useVDefaults`
+     * - `useDisplay` -> `useVDisplay`
+     * - `useLayout` -> `useVLayout`
+     * - `useRtl` -> `useVRtl`
+     * - `useTheme` -> `useVTheme`
+     *
+     * @default false
+     */
+    prefixComposables?: boolean;
+    /**
+     * Vuetify styles.
+     *
+     * If you want to use configFile on SSR, you have to disable `experimental.inlineSSRStyles` in nuxt.config.
+     *
+     * @see https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
+     * @see https://github.com/userquin/vuetify-nuxt-module/issues/78 and https://github.com/userquin/vuetify-nuxt-module/issues/74
+     */
+    styles?: true | 'none' | 'expose' | 'sass' | {
+        configFile: string;
+    };
+    /**
+     * Add Vuetify Vite Plugin `transformAssetsUrls`?
+     *
+     * @default true
+     */
+    includeTransformAssetsUrls?: boolean | Record<string, string[]>;
+    /**
+     * Vuetify SSR client hints.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints
+     */
+    ssrClientHints?: {
+        /**
+         * Should the module reload the page on first request?
+         *
+         * @default false
+         */
+        reloadOnFirstRequest?: boolean;
+        /**
+         * Enable `Sec-CH-Viewport-Width` and `Sec-CH-Viewport-Height` headers?
+         *
+         * @see https://wicg.github.io/responsive-image-client-hints/#sec-ch-viewport-width
+         * @see https://wicg.github.io/responsive-image-client-hints/#sec-ch-viewport-height
+         *
+         * @default false
+         */
+        viewportSize?: boolean;
+        /**
+         * Enable `Sec-CH-Prefers-Color-Scheme` header?
+         *
+         * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
+         *
+         * @default false
+         */
+        prefersColorScheme?: boolean;
+        /**
+         * The options for `prefersColorScheme`, `prefersColorScheme` must be enabled.
+         *
+         * If you want the module to handle the color scheme for you, you should configure this option, otherwise you'll need to add your custom implementation.
+         */
+        prefersColorSchemeOptions?: {
+            /**
+             * The name for the cookie.
+             *
+             * @default 'color-scheme'
+             */
+            cookieName?: string;
+            /**
+             * The name for the dark theme.
+             *
+             * @default 'dark'
+             */
+            darkThemeName?: string;
+            /**
+             * The name for the light theme.
+             *
+             * @default 'light'
+             */
+            lightThemeName?: string;
+            /**
+             * Use the browser theme only?
+             *
+             * This flag can be used when your application provides a custom dark and light themes,
+             * but will not provide a theme switcher, that's, using by default the browser theme.
+             *
+             * @default false
+             */
+            useBrowserThemeOnly?: boolean;
+        };
+        /**
+         * Enable `Sec-CH-Prefers-Reduced-Motion` header?
+         *
+         * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
+         *
+         * @default false
+         */
+        prefersReducedMotion?: boolean;
+    };
+}
+interface VuetifyModuleOptions {
+    moduleOptions?: MOptions;
+    /**
+     * Vuetify options.
+     *
+     * You can inline the configuration or specify a file path:
+     * `vuetifyOptions: './vuetify.options.ts'`
+     *
+     * The path should be relative to the root folder.
+     */
+    vuetifyOptions?: string | VOptions;
+}
+interface InlineModuleOptions extends Omit<VuetifyModuleOptions, 'vuetifyOptions'> {
+    vuetifyOptions: VOptions;
+}
+interface ExternalVuetifyOptions extends VOptions {
+    config?: boolean;
+}
+/**
+ * Request headers received from the client in SSR.
+ */
+interface SSRClientHints {
+    /**
+     * Is the first request the browser hits the server?
+     */
+    firstRequest: boolean;
+    /**
+     * The browser supports prefer-color-scheme client hints?
+     */
+    prefersColorSchemeAvailable: boolean;
+    /**
+     * The browser supports prefer-reduced-motion client hints?
+     */
+    prefersReducedMotionAvailable: boolean;
+    /**
+     * The browser supports viewport-height client hints?
+     */
+    viewportHeightAvailable: boolean;
+    /**
+     * The browser supports viewport-width client hints?
+     */
+    viewportWidthAvailable: boolean;
+    prefersColorScheme?: 'dark' | 'light' | 'no-preference';
+    prefersReducedMotion?: 'no-preference' | 'reduce';
+    viewportHeight?: number;
+    viewportWidth?: number;
+    /**
+     * The theme name from the cookie.
+     */
+    colorSchemeFromCookie?: string;
+    colorSchemeCookie?: string;
+}
+interface SSRClientHintsConfiguration {
+    enabled: boolean;
+    viewportSize: boolean;
+    prefersColorScheme: boolean;
+    prefersReducedMotion: boolean;
+    prefersColorSchemeOptions?: {
+        baseUrl: string;
+        defaultTheme: string;
+        themeNames: string[];
+        cookieName: string;
+        darkThemeName: string;
+        lightThemeName: string;
+    };
+}
+
+declare const _default: _nuxt_schema.NuxtModule<VuetifyModuleOptions>;
+
+interface ModuleOptions extends VuetifyModuleOptions {
+}
+interface ModuleHooks {
+    'vuetify:registerModule': (registerModule: (config: InlineModuleOptions) => void) => HookResult;
+}
+interface RuntimeModuleHooks {
+    'vuetify:configuration': (options: {
+        isDev: boolean;
+        vuetifyOptions: VuetifyOptions;
+    }) => HookResult;
+    'vuetify:before-create': (options: {
+        isDev: boolean;
+        vuetifyOptions: VuetifyOptions;
+    }) => HookResult;
+    'vuetify:ready': (vuetify: ReturnType<typeof createVuetify>) => HookResult;
+    'vuetify:ssr-client-hints': (options: {
+        vuetifyOptions: VuetifyOptions;
+        ssrClientHints: SSRClientHints;
+        ssrClientHintsConfiguration: SSRClientHintsConfiguration;
+    }) => HookResult;
+}
+declare module '#app' {
+    interface RuntimeNuxtHooks {
+        'vuetify:configuration': (options: {
+            isDev: boolean;
+            vuetifyOptions: VuetifyOptions;
+        }) => HookResult;
+        'vuetify:before-create': (options: {
+            isDev: boolean;
+            vuetifyOptions: VuetifyOptions;
+        }) => HookResult;
+        'vuetify:ready': (vuetify: ReturnType<typeof createVuetify>) => HookResult;
+        'vuetify:ssr-client-hints': (options: {
+            vuetifyOptions: VuetifyOptions;
+            ssrClientHints: SSRClientHints;
+            ssrClientHintsConfiguration: SSRClientHintsConfiguration;
+        }) => HookResult;
+    }
+}
+declare module '@nuxt/schema' {
+    interface NuxtConfig {
+        ['vuetify']?: Partial<ModuleOptions>;
+    }
+    interface NuxtOptions {
+        ['vuetify']?: ModuleOptions;
+    }
+    interface NuxtHooks {
+        'vuetify:registerModule': (registerModule: (config: InlineModuleOptions) => void) => HookResult;
+    }
+}
+
+export { type ComponentName, type Components, type DateAdapter, type DateOptions, type DirectiveName, type Directives, type ExternalVuetifyOptions, type FontAwesomeSvgIconSet, type FontIconSet, type IconFontName, type IconSetName, type IconsOptions, type InlineModuleOptions, type JSSVGIconSet, type LabComponentName, type LabComponents, type MOptions, type ModuleHooks, type ModuleOptions, type RuntimeModuleHooks, type SSRClientHints, type SSRClientHintsConfiguration, type UnoCCSMdiIconSet, type VOptions, type VuetifyLocale, type VuetifyModuleOptions, _default as default };

package/dist/module.d.ts

@@ -1,10 +1,10 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { HookResult } from '@nuxt/schema';
+import { VuetifyOptions, LocaleOptions, RtlOptions, createVuetify } from 'vuetify';
 import * as vuetify_locale from 'vuetify/locale';
 import * as vuetify_labs_components from 'vuetify/labs/components';
 import * as vuetify_directives from 'vuetify/directives';
 import * as vuetify_components from 'vuetify/components';
-import { VuetifyOptions, createVuetify, LocaleOptions, RtlOptions } from 'vuetify';
 
 type DateAdapter = 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom';
 /**
@@ -323,7 +323,7 @@ interface MOptions {
         prefersReducedMotion?: boolean;
     };
 }
-interface ModuleOptions {
+interface VuetifyModuleOptions {
     moduleOptions?: MOptions;
     /**
      * Vuetify options.
@@ -335,7 +335,7 @@ interface ModuleOptions {
      */
     vuetifyOptions?: string | VOptions;
 }
-interface InlineModuleOptions extends Omit<ModuleOptions, 'vuetifyOptions'> {
+interface InlineModuleOptions extends Omit<VuetifyModuleOptions, 'vuetifyOptions'> {
     vuetifyOptions: VOptions;
 }
 interface ExternalVuetifyOptions extends VOptions {
@@ -389,10 +389,31 @@ interface SSRClientHintsConfiguration {
         lightThemeName: string;
     };
 }
+
+declare const _default: _nuxt_schema.NuxtModule<VuetifyModuleOptions>;
+
+interface ModuleOptions extends VuetifyModuleOptions {
+}
 interface ModuleHooks {
     'vuetify:registerModule': (registerModule: (config: InlineModuleOptions) => void) => HookResult;
 }
-declare module '#app/nuxt' {
+interface RuntimeModuleHooks {
+    'vuetify:configuration': (options: {
+        isDev: boolean;
+        vuetifyOptions: VuetifyOptions;
+    }) => HookResult;
+    'vuetify:before-create': (options: {
+        isDev: boolean;
+        vuetifyOptions: VuetifyOptions;
+    }) => HookResult;
+    'vuetify:ready': (vuetify: ReturnType<typeof createVuetify>) => HookResult;
+    'vuetify:ssr-client-hints': (options: {
+        vuetifyOptions: VuetifyOptions;
+        ssrClientHints: SSRClientHints;
+        ssrClientHintsConfiguration: SSRClientHintsConfiguration;
+    }) => HookResult;
+}
+declare module '#app' {
     interface RuntimeNuxtHooks {
         'vuetify:configuration': (options: {
             isDev: boolean;
@@ -417,10 +438,9 @@ declare module '@nuxt/schema' {
     interface NuxtOptions {
         ['vuetify']?: ModuleOptions;
     }
-    interface NuxtHooks extends ModuleHooks {
+    interface NuxtHooks {
+        'vuetify:registerModule': (registerModule: (config: InlineModuleOptions) => void) => HookResult;
     }
 }
 
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
-
-export { ComponentName, Components, DateAdapter, DateOptions, DirectiveName, Directives, ExternalVuetifyOptions, FontAwesomeSvgIconSet, FontIconSet, IconFontName, IconSetName, IconsOptions, InlineModuleOptions, JSSVGIconSet, LabComponentName, LabComponents, MOptions, ModuleHooks, ModuleOptions, SSRClientHints, SSRClientHintsConfiguration, UnoCCSMdiIconSet, VOptions, VuetifyLocale, _default as default };
+export { type ComponentName, type Components, type DateAdapter, type DateOptions, type DirectiveName, type Directives, type ExternalVuetifyOptions, type FontAwesomeSvgIconSet, type FontIconSet, type IconFontName, type IconSetName, type IconsOptions, type InlineModuleOptions, type JSSVGIconSet, type LabComponentName, type LabComponents, type MOptions, type ModuleHooks, type ModuleOptions, type RuntimeModuleHooks, type SSRClientHints, type SSRClientHintsConfiguration, type UnoCCSMdiIconSet, type VOptions, type VuetifyLocale, type VuetifyModuleOptions, _default as default };

package/dist/module.json

@@ -2,7 +2,8 @@
   "name": "vuetify-nuxt-module",
   "configKey": "vuetify",
   "compatibility": {
-    "nuxt": "^3.0.0"
+    "nuxt": "^3.6.5",
+    "bridge": false
   },
-  "version": "0.6.6"
+  "version": "0.7.0"
 }

package/dist/module.mjs

@@ -15,7 +15,7 @@ import { parseQuery, parseURL } from 'ufo';
 import destr from 'destr';
 import { transformAssetUrls } from 'vite-plugin-vuetify';
 
-const version = "0.6.6";
+const version = "0.7.0";
 
 const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
 const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `/@nuxt-vuetify-configuration/${VIRTUAL_VUETIFY_CONFIGURATION.slice("virtual:".length)}`;
@@ -246,7 +246,7 @@ function prepareIcons(unocssPresent, logger, vuetifyOptions) {
       sets = sets.filter((s) => s.name !== "unocss-mdi");
     }
     sets.filter((s) => cssFonts.includes(s.name)).forEach(({ name, cdn }) => {
-      resolvedIcons.aliasesImportPresent || (resolvedIcons.aliasesImportPresent = name === defaultSet);
+      resolvedIcons.aliasesImportPresent ||= name === defaultSet;
       if (name === "unocss-mdi")
         return;
       resolvedIcons.imports.push(`import {${name === defaultSet ? "aliases," : ""}${name}} from 'vuetify/iconsets/${name}'`);
@@ -286,7 +286,7 @@ function prepareIcons(unocssPresent, logger, vuetifyOptions) {
       logger.warn("Missing @fortawesome/vue-fontawesome dependency, install it!");
     }
     if (faSvgExists) {
-      resolvedIcons.aliasesImportPresent || (resolvedIcons.aliasesImportPresent = defaultSet === "fa-svg");
+      resolvedIcons.aliasesImportPresent ||= defaultSet === "fa-svg";
       resolvedIcons.imports.push(`import {${defaultSet === "fa-svg" ? "aliases," : ""}fa} from 'vuetify/iconsets/fa-svg'`);
       resolvedIcons.imports.push("import { library } from '@fortawesome/fontawesome-svg-core'");
       resolvedIcons.imports.push("import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'");
@@ -308,7 +308,7 @@ function prepareIcons(unocssPresent, logger, vuetifyOptions) {
     const mdiSvgExists = isPackageExists("@mdi/js");
     if (mdiSvgExists) {
       resolvedIcons.svg.mdi = true;
-      resolvedIcons.aliasesImportPresent || (resolvedIcons.aliasesImportPresent = defaultSet === "mdi-svg");
+      resolvedIcons.aliasesImportPresent ||= defaultSet === "mdi-svg";
       resolvedIcons.imports.push(`import {${defaultSet === "mdi-svg" ? "aliases," : ""}mdi} from 'vuetify/iconsets/mdi-svg'`);
       if (mdiSvg && mdiSvg.aliases) {
         resolvedIcons.imports.push(`import {${Object.values(mdiSvg.aliases).join(",")}} from '@mdi/js'`);
@@ -398,7 +398,6 @@ function prepareSSRClientHints(baseUrl, ctx) {
 }
 
 async function load(options, nuxt, ctx) {
-  var _a;
   const {
     configuration,
     vuetifyConfigurationFilesToWatch
@@ -452,7 +451,7 @@ async function load(options, nuxt, ctx) {
   if (ctx.icons.enabled) {
     ctx.icons.local?.forEach((css) => nuxt.options.css.push(css));
     if (ctx.icons.cdn?.length) {
-      (_a = nuxt.options.app.head).link ?? (_a.link = []);
+      nuxt.options.app.head.link ??= [];
       ctx.icons.cdn.forEach(([key, href]) => nuxt.options.app.head.link.push({
         key,
         rel: "stylesheet",
@@ -1249,7 +1248,7 @@ function configureVite(configKey, nuxt, ctx) {
     checkVuetifyPlugins(viteInlineConfig);
     viteInlineConfig.optimizeDeps = defu(viteInlineConfig.optimizeDeps, { exclude: ["vuetify"] });
     if (nuxt.options.ssr) {
-      viteInlineConfig.ssr || (viteInlineConfig.ssr = {});
+      viteInlineConfig.ssr ||= {};
       viteInlineConfig.ssr.noExternal = [
         ...Array.isArray(viteInlineConfig.ssr.noExternal) ? viteInlineConfig.ssr.noExternal : viteInlineConfig.ssr.noExternal && typeof viteInlineConfig.ssr.noExternal !== "boolean" ? [viteInlineConfig.ssr.noExternal] : [],
         configKey
@@ -1266,7 +1265,6 @@ function configureVite(configKey, nuxt, ctx) {
 }
 
 function configureNuxt(configKey, nuxt, ctx) {
-  var _a, _b, _c;
   const {
     importComposables,
     prefixComposables,
@@ -1278,7 +1276,7 @@ function configureNuxt(configKey, nuxt, ctx) {
     nuxt.options.build.transpile.push(configKey);
     nuxt.options.build.transpile.push(runtimeDir);
   }
-  (_a = nuxt.options).css ?? (_a.css = []);
+  nuxt.options.css ??= [];
   if (typeof styles === "string" && ["sass", "expose"].includes(styles))
     nuxt.options.css.unshift("vuetify/styles/main.sass");
   else if (styles === true)
@@ -1286,8 +1284,8 @@ function configureNuxt(configKey, nuxt, ctx) {
   else if (typeof styles === "object" && typeof styles?.configFile === "string")
     nuxt.options.css.unshift(styles.configFile);
   if (includeTransformAssetsUrls && typeof nuxt.options.vite.vue?.template?.transformAssetUrls === "undefined") {
-    (_b = nuxt.options.vite).vue ?? (_b.vue = {});
-    (_c = nuxt.options.vite.vue).template ?? (_c.template = {});
+    nuxt.options.vite.vue ??= {};
+    nuxt.options.vite.vue.template ??= {};
     nuxt.options.vite.vue.template.transformAssetUrls = normalizeTransformAssetUrls(
       typeof includeTransformAssetsUrls === "object" ? defu(includeTransformAssetsUrls, transformAssetUrls) : transformAssetUrls
     );
@@ -1299,12 +1297,14 @@ function configureNuxt(configKey, nuxt, ctx) {
     references.push({ types: "vuetify" });
     references.push({ types: "vuetify-nuxt-module/custom-configuration" });
     references.push({ types: "vuetify-nuxt-module/configuration" });
+    const types = ctx.resolver.resolve(runtimeDir, "plugins/types");
+    references.push({ path: ctx.resolver.resolve(nuxt.options.buildDir, types) });
   });
   if (importComposables) {
-    const composables = ["useLocale", "useDefaults", "useDisplay", "useLayout", "useRtl", "useTheme"];
+    const composables = ["useDate", "useLocale", "useDefaults", "useDisplay", "useLayout", "useRtl", "useTheme"];
     addImports(composables.map((name) => ({
       name,
-      from: "vuetify",
+      from: ctx.vuetify3_4 || name !== "useDate" ? "vuetify" : "vuetify/labs/date",
       as: prefixComposables ? name.replace(/^use/, "useV") : void 0,
       meta: { docsUrl: `https://vuetifyjs.com/en/api/${toKebabCase(name)}/` }
     })));
@@ -1347,7 +1347,10 @@ const module = defineNuxtModule({
   meta: {
     name: "vuetify-nuxt-module",
     configKey: "vuetify",
-    compatibility: { nuxt: "^3.0.0" },
+    compatibility: {
+      nuxt: "^3.6.5",
+      bridge: false
+    },
     version
   },
   // Default configuration options of the Nuxt module
@@ -1366,7 +1369,7 @@ const module = defineNuxtModule({
       logger.error(`Cannot support nuxt version: ${getNuxtVersion(nuxt)}`);
     const vuetifyPkg = await getPackageInfo("vuetify");
     const versions = vuetifyPkg?.version?.split(".").map((v) => Number.parseInt(v));
-    const vuetify3_4 = versions && versions.length > 1 && versions[0] >= 3 && versions[1] >= 4;
+    const vuetify3_4 = versions && versions.length > 1 && (versions[0] > 3 || versions[0] === 3 && versions[1] >= 4);
     const ctx = {
       logger,
       resolver: createResolver(import.meta.url),

package/dist/runtime/plugins/client-hints.d.ts

@@ -1,16 +1 @@
-export interface ClientHintRequestFeatures {
-    firstRequest: boolean;
-    prefersColorSchemeAvailable: boolean;
-    prefersReducedMotionAvailable: boolean;
-    viewportHeightAvailable: boolean;
-    viewportWidthAvailable: boolean;
-}
-export interface SSRClientHints extends ClientHintRequestFeatures {
-    prefersColorScheme?: 'dark' | 'light' | 'no-preference';
-    prefersReducedMotion?: 'no-preference' | 'reduce';
-    viewportHeight?: number;
-    viewportWidth?: number;
-    colorSchemeFromCookie?: string;
-    colorSchemeCookie?: string;
-}
 export declare const VuetifyHTTPClientHints = "vuetify:nuxt:ssr-client-hints";

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

@@ -0,0 +1,27 @@
+import type { UnwrapNestedRefs } from 'vue'
+import type { createVuetify } from 'vuetify'
+
+export interface ClientHintRequestFeatures {
+  firstRequest: boolean
+  prefersColorSchemeAvailable: boolean
+  prefersReducedMotionAvailable: boolean
+  viewportHeightAvailable: boolean
+  viewportWidthAvailable: boolean
+}
+export interface SSRClientHints extends ClientHintRequestFeatures {
+  prefersColorScheme?: 'dark' | 'light' | 'no-preference'
+  prefersReducedMotion?: 'no-preference' | 'reduce'
+  viewportHeight?: number
+  viewportWidth?: number
+  colorSchemeFromCookie?: string
+  colorSchemeCookie?: string
+}
+
+declare module '#app' {
+  interface NuxtApp {
+    $vuetify: ReturnType<typeof createVuetify>
+    $ssrClientHints: UnwrapNestedRefs<SSRClientHints>
+  }
+}
+
+export {}

package/dist/runtime/plugins/vuetify-client-hints.client.d.ts

@@ -1,6 +1,6 @@
 import type { UnwrapNestedRefs } from 'vue';
-import type { SSRClientHints } from './client-hints';
-import type { Plugin } from '#app/nuxt';
+import type { SSRClientHints } from './types';
+import type { Plugin } from '#app';
 declare const plugin: Plugin<{
     ssrClientHints: UnwrapNestedRefs<SSRClientHints>;
 }>;

package/dist/runtime/plugins/vuetify-client-hints.server.d.ts

@@ -1,6 +1,6 @@
 import type { UnwrapNestedRefs } from 'vue';
-import type { SSRClientHints } from './client-hints';
-import type { Plugin } from '#app/nuxt';
+import type { SSRClientHints } from './types';
+import type { Plugin } from '#app';
 declare const plugin: Plugin<{
     ssrClientHints: UnwrapNestedRefs<SSRClientHints>;
 }>;

package/dist/runtime/plugins/vuetify-no-client-hints.d.ts

@@ -1,6 +1,6 @@
 import type { UnwrapNestedRefs } from 'vue';
-import type { SSRClientHints } from './client-hints';
-import type { Plugin } from '#app/nuxt';
+import type { SSRClientHints } from './types';
+import type { Plugin } from '#app';
 declare const plugin: Plugin<{
     ssrClientHints: UnwrapNestedRefs<SSRClientHints>;
 }>;

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

@@ -1,5 +1,5 @@
 import type { createVuetify } from 'vuetify';
-import type { Plugin } from '#app/nuxt';
+import type { Plugin } from '#app';
 declare const plugin: Plugin<{
     vuetify: ReturnType<typeof createVuetify>;
 }>;

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

@@ -1,5 +1,5 @@
 import type { createVuetify } from 'vuetify';
-import type { Plugin } from '#app/nuxt';
+import type { Plugin } from '#app';
 declare const plugin: Plugin<{
     vuetify: ReturnType<typeof createVuetify>;
 }>;

package/dist/types.d.mts

@@ -0,0 +1,21 @@
+
+import type { ModuleOptions, ModuleHooks, RuntimeModuleHooks } from './module'
+
+declare module '#app' {
+  interface RuntimeNuxtHooks extends RuntimeModuleHooks {}
+}
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['vuetify']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['vuetify']?: ModuleOptions }
+  interface NuxtHooks extends ModuleHooks {}
+}
+
+declare module 'nuxt/schema' {
+  interface NuxtConfig { ['vuetify']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['vuetify']?: ModuleOptions }
+  interface NuxtHooks extends ModuleHooks {}
+}
+
+
+export type { ComponentName, Components, DateAdapter, DateOptions, DirectiveName, Directives, ExternalVuetifyOptions, FontAwesomeSvgIconSet, FontIconSet, IconFontName, IconSetName, IconsOptions, InlineModuleOptions, JSSVGIconSet, LabComponentName, LabComponents, MOptions, ModuleHooks, ModuleOptions, RuntimeModuleHooks, SSRClientHints, SSRClientHintsConfiguration, UnoCCSMdiIconSet, VOptions, VuetifyLocale, VuetifyModuleOptions, default } from './module'

package/dist/types.d.ts

@@ -1,5 +1,9 @@
 
-import { ModuleOptions, ModuleHooks } from './module'
+import type { ModuleOptions, ModuleHooks, RuntimeModuleHooks } from './module'
+
+declare module '#app' {
+  interface RuntimeNuxtHooks extends RuntimeModuleHooks {}
+}
 
 declare module '@nuxt/schema' {
   interface NuxtConfig { ['vuetify']?: Partial<ModuleOptions> }
@@ -14,4 +18,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { ComponentName, Components, DateAdapter, DateOptions, DirectiveName, Directives, ExternalVuetifyOptions, FontAwesomeSvgIconSet, FontIconSet, IconFontName, IconSetName, IconsOptions, InlineModuleOptions, JSSVGIconSet, LabComponentName, LabComponents, MOptions, ModuleHooks, ModuleOptions, SSRClientHints, SSRClientHintsConfiguration, UnoCCSMdiIconSet, VOptions, VuetifyLocale, default } from './module'
+export type { ComponentName, Components, DateAdapter, DateOptions, DirectiveName, Directives, ExternalVuetifyOptions, FontAwesomeSvgIconSet, FontIconSet, IconFontName, IconSetName, IconsOptions, InlineModuleOptions, JSSVGIconSet, LabComponentName, LabComponents, MOptions, ModuleHooks, ModuleOptions, RuntimeModuleHooks, SSRClientHints, SSRClientHintsConfiguration, UnoCCSMdiIconSet, VOptions, VuetifyLocale, VuetifyModuleOptions, default } from './module'

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "0.6.6",
-  "packageManager": "pnpm@8.10.2",
+  "version": "0.7.0",
+  "packageManager": "pnpm@8.10.5",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -21,18 +21,17 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "require": "./dist/module.cjs",
-      "import": "./dist/module.mjs"
+      "types": "./dist/types.d.mts",
+      "default": "./dist/module.mjs"
     },
     "./custom-configuration": {
       "types": "./custom-configuration.d.ts",
-      "require": "./custom-configuration.cjs",
-      "import": "./custom-configuration.mjs"
+      "default": "./custom-configuration.mjs"
     },
     "./configuration": {
       "types": "./configuration.d.ts"
-    }
+    },
+    "./*": "./*"
   },
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
@@ -43,7 +42,7 @@
     "*.mjs"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build prepare && nuxt-module-build",
+    "prepack": "nuxt-module-build prepare && nuxt-module-build build",
     "dev": "nuxi dev playground",
     "dev:multiple-json": "MULTIPLE_LANG_FILES=true nuxi dev playground",
     "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare playground",
@@ -58,48 +57,52 @@
     "docs:serve": "pnpm -C docs run serve",
     "lint": "eslint .",
     "lint:fix": "nr lint --fix",
+    "publint": "publint",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "release": "bumpp && npm publish"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.6.2",
-    "defu": "^6.1.2",
+    "@nuxt/kit": "^3.8.2",
+    "defu": "^6.1.3",
     "destr": "^2.0.2",
     "local-pkg": "^0.5.0",
     "pathe": "^1.1.1",
     "perfect-debounce": "^1.0.0",
     "ufo": "^1.3.1",
-    "unconfig": "^0.3.9",
+    "unconfig": "^0.3.11",
     "vite-plugin-vuetify": "^1.0.2",
-    "vuetify": "^3.3.23"
+    "vuetify": "^3.4.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.41.0",
-    "@antfu/ni": "^0.21.8",
+    "@antfu/eslint-config": "^0.43.1",
+    "@antfu/ni": "^0.21.10",
     "@date-io/luxon": "^2.17.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
     "@iconify-json/carbon": "^1.1.21",
-    "@iconify-json/mdi": "^1.1.54",
-    "@mdi/js": "^7.2.96",
-    "@nuxt/devtools": "^0.7.0",
-    "@nuxt/module-builder": "^0.4.0",
-    "@nuxt/schema": "^3.6.5",
-    "@nuxt/test-utils": "^3.6.5",
-    "@nuxtjs/i18n": "8.0.0-rc.5",
-    "@parcel/watcher": "^2.2.0",
+    "@iconify-json/mdi": "^1.1.55",
+    "@mdi/js": "^7.3.67",
+    "@nuxt/devtools": "^0.8.5",
+    "@nuxt/module-builder": "^0.5.4",
+    "@nuxt/schema": "^3.8.2",
+    "@nuxt/test-utils": "^3.8.1",
+    "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge",
+    "@parcel/watcher": "^2.3.0",
     "@types/node": "^18",
-    "@unocss/nuxt": "^0.53.6",
+    "@unocss/nuxt": "^0.57.7",
     "bumpp": "^9.2.0",
-    "eslint": "^8.49.0",
-    "luxon": "^3.3.0",
-    "nuxt": "^3.6.5",
+    "eslint": "^8.54.0",
+    "luxon": "^3.4.3",
+    "nuxt": "^3.8.2",
+    "publint": "^0.2.5",
+    "rimraf": "^5.0.5",
     "sass": "^1.63.6",
-    "typescript": "^5.2.2",
-    "vite": "^4.3.9",
-    "vitest": "^0.31.4"
+    "typescript": "^5.3.2",
+    "vite": "^4.5.0",
+    "vitest": "^0.34.6",
+    "vue-tsc": "^1.8.22"
   },
   "build": {
     "externals": [