vuetify-nuxt-module
Version:
Zero-Config Nuxt Module for Vuetify
569 lines (565 loc) • 18.6 kB
text/typescript
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.
*
* Only serializable `Intl.DateTimeFormatOptions` values are supported here:
* the date configuration is statically serialized to a virtual module, so
* function-valued formats cannot be expressed (see #313, #331). Use a custom
* date adapter if you need function formats.
*/
formats?: Record<string, Intl.DateTimeFormatOptions>;
/**
* 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 {
/**
* Auto-import Vuetify composables.
*
* Pass an array of composable names to import only those, e.g. `['useDisplay', 'useTheme']`.
*
* @default true
*/
importComposables?: boolean | string[];
/**
* 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`
*
* Pass an array of composable names to prefix only those, e.g. `['useLocale', 'useTheme']`.
*
* @default false
*/
prefixComposables?: boolean | string[];
/**
* Vuetify styles.
*
* If you are using Vuetify 3, you can only use the `configFile` option.
*
* The `colors` and `utilities` options are only available for Vuetify 4.
*
* @see https://vuetifyjs.com/en/styles/entry-points/#individual-modules
* @see https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
*
* @default true
*/
styles?: true | 'none' | {
/**
* Path to the custom Vuetify SASS configuration file.
*/
configFile: string;
/**
* Caching options forwarded to `@vuetify/unplugin-styles`.
*
* @default true
*/
cache?: boolean | {
path?: string;
sassOptions?: Record<string, unknown>;
};
/**
* @deprecated Use `styles.cache` instead.
*/
experimental?: {
cache?: boolean;
};
} | {
/**
* Include the standard colors palette?
*
* @default true
*/
colors?: boolean;
/**
* Include the standard utilities?
*
* @default true
*/
utilities?: 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
* @deprecated Vite 7 supports only the modern SASS compiler and API.
*/
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[];
/**
* Automatically install rules plugin
*
* @since v0.19.0
* @see https://vuetifyjs.com/en/features/rules/
*/
enableRules?: boolean;
/**
* Rules configuration.
*
* @since v0.19.0
* @default true
*/
rulesConfiguration?: {
fromLabs?: boolean;
configFile?: 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.
*
* @deprecated Use `cookie.name` instead.
* @default 'color-scheme'
*/
cookieName?: string;
/**
* Cookie attributes for the color scheme cookie.
*/
cookie?: {
/**
* The name for the cookie.
*
* @default 'color-scheme'
*/
name?: string;
/**
* The domain for the color scheme cookie.
*
* Useful to share the cookie across subdomains, e.g. `.example.com`.
*
* @default undefined
*/
domain?: string;
/**
* Mark the cookie as `Secure`.
*
* Forced to `true` when `sameSite` is `'none'`.
*
* @default undefined
*/
secure?: boolean;
/**
* The `SameSite` attribute for the cookie.
*
* @default 'lax'
*/
sameSite?: 'lax' | 'strict' | 'none';
};
/**
* 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;
cookieDomain?: string;
cookieSecure?: boolean;
cookieSameSite: 'lax' | 'strict' | 'none';
darkThemeName: string;
lightThemeName: string;
};
}
/**
* Configuration options for the Vuetify Nuxt module.
*/
interface ModuleOptions extends VuetifyModuleOptions {
}
interface ModuleHooks {
/**
* Hook called when the module is registered.
*
* @param registerModule - A function to register a Vuetify module with inline options.
*/
'vuetify:registerModule': (registerModule: (config: InlineModuleOptions) => void) => HookResult;
}
interface ModuleRuntimeHooks {
/**
* Hook called before the Vuetify configuration is resolved.
* allowing you to modify the configuration.
*
* @param options - The configuration options including `isDev` and `vuetifyOptions`.
*/
'vuetify:configuration': (options: {
isDev: boolean;
vuetifyOptions: VuetifyOptions;
}) => HookResult;
/**
* Hook called before the Vuetify instance is created.
*
* @param options - The options used to create the Vuetify instance.
*/
'vuetify:before-create': (options: {
isDev: boolean;
vuetifyOptions: VuetifyOptions;
}) => HookResult;
/**
* Hook called after the Vuetify instance has been created.
*
* @param vuetify - The created Vuetify instance.
*/
'vuetify:ready': (vuetify: ReturnType<typeof createVuetify>) => HookResult;
/**
* Hook called to configure SSR client hints.
*
* @param options - The SSR client hints configuration options.
*/
'vuetify:ssr-client-hints': (options: {
vuetifyOptions: VuetifyOptions;
ssrClientHints: SSRClientHints;
ssrClientHintsConfiguration: SSRClientHintsConfiguration;
}) => HookResult;
}
declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
export { _default as default };
export type { ComponentName, Components, DateAdapter, DateOptions, DirectiveName, Directives, ExternalVuetifyOptions, FontAwesomeSvgIconSet, FontIconSet, IconFontName, IconSetName, IconsOptions, InlineModuleOptions, JSSVGIconSet, LabComponentName, LabComponents, MOptions, ModuleHooks, ModuleOptions, ModuleRuntimeHooks, SSRClientHints, SSRClientHintsConfiguration, UnoCCSMdiIconSet, VOptions, VuetifyLocale, VuetifyModuleOptions };