vuetify-nuxt-module/dist/module.d.ts

Zero-Config Nuxt Module for Vuetify

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@5.x/css/materialdesignicons.min.css
     * - 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@5.x/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`
     * - `useGoTo` -> `useVGoTo`
     *
     * @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
     *
     * @default true
     */
    styles?: true | 'none' | 'sass' | {
        configFile: string;
    };
    /**
     * The module will add `vuetify/styles` in Nuxt `css` by default.
     *
     * If you want to add custom styles, you should enable this flag to avoid registering `vuetify/styles`.
     *
     * @see https://github.com/vuetifyjs/nuxt-module/pull/213
     * @default false
     */
    disableVuetifyStyles?: boolean;
    /**
     * Disable the modern SASS compiler and API.
     *
     * The module will check for `sass-embedded` dev dependency:
     * - if `disableModernSassCompiler` is enabled, the module will configure the legacy SASS compiler.
     * - if `sass-embedded` dependency is installed, the module will configure the modern SASS compiler.
     * - otherwise, the module will configure the modern SASS API and will enable [preprocessorMaxWorkers](https://vitejs.dev/config/shared-options.html#css-preprocessormaxworkers), only if not configured from user land.
     *
     * @https://vitejs.dev/config/shared-options.html#css-preprocessoroptions
     * @see https://vitejs.dev/config/shared-options.html#css-preprocessormaxworkers
     *
     * @default false
     */
    disableModernSassCompiler?: boolean;
    /**
     * Add Vuetify Vite Plugin `transformAssetsUrls`?
     *
     * @default true
     */
    includeTransformAssetsUrls?: boolean | Record<string, string[]>;
    /**
     * Directives Vuetify Vite Plugin should ignore.
     *
     * @since v0.15.1
     */
    ignoreDirectives?: DirectiveName | DirectiveName[];
    /**
     * 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;
    };
}

interface ModuleOptions extends VuetifyModuleOptions {
}
interface ModuleHooks {
    'vuetify:registerModule': (registerModule: (config: InlineModuleOptions) => void) => HookResult;
}
interface ModuleRuntimeHooks {
    '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 const _default: _nuxt_schema.NuxtModule<ModuleOptions>;

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 ModuleRuntimeHooks, type SSRClientHints, type SSRClientHintsConfiguration, type UnoCCSMdiIconSet, type VOptions, type VuetifyLocale, type VuetifyModuleOptions, _default as default };