vuetify
- Version 3.8.9
- Published
- 45 MB
- No dependencies
- MIT license
Install
npm i vuetify
yarn add vuetify
pnpm add vuetify
Overview
Vue Material Component Framework
Index
Variables
Functions
Interfaces
IconAliases
- calendar
- cancel
- checkboxIndeterminate
- checkboxOff
- checkboxOn
- clear
- close
- collapse
- color
- complete
- delete
- delimiter
- dropdown
- edit
- error
- expand
- eyeDropper
- file
- first
- info
- last
- loading
- menu
- minus
- next
- plus
- prev
- radioOff
- radioOn
- ratingEmpty
- ratingFull
- ratingHalf
- sortAsc
- sortDesc
- subgroup
- success
- treeviewCollapse
- treeviewExpand
- unfold
- upload
- warning
Type Aliases
- ActiveStrategy
- Anchor
- DataTableCellPropsFunction
- DataTableCompareFunction
- DataTableHeader
- DataTableHeaderCellPropsFunction
- DataTableRowPropsFunction
- DataTableSortItem
- DateOptions
- DefaultsInstance
- DisplayBreakpoint
- DisplayThresholds
- FilterFunction
- FilterMatch
- IconOptions
- JSXComponent
- LocationStrategyFunction
- OpenStrategy
- ScrollStrategyFunction
- SelectStrategy
- SnackbarQueueMessage
- ThemeDefinition
- ValidationRule
Namespaces
Variables
variable allowedVariants
const allowedVariants: readonly [ 'elevated', 'flat', 'tonal', 'outlined', 'text', 'plain'];
variable block
const block: readonly ['top', 'bottom'];
variable breakpoints
const breakpoints: readonly ['sm', 'md', 'lg', 'xl', 'xxl'];
variable IconValue
const IconValue: PropType<any>;
variable inline
const inline: readonly ['start', 'end', 'left', 'right'];
variable locationStrategies
const locationStrategies: { static: typeof staticLocationStrategy; connected: typeof connectedLocationStrategy;};
variable scrollStrategies
const scrollStrategies: { none: null; close: typeof closeScrollStrategy; block: typeof blockScrollStrategy; reposition: typeof repositionScrollStrategy;};
variable version
const version: string;
variable VSnackbar
const VSnackbar: any;
Functions
function blockScrollStrategy
blockScrollStrategy: (data: ScrollStrategyData, props: StrategyProps) => void;
function closeScrollStrategy
closeScrollStrategy: (data: ScrollStrategyData) => void;
function connectedLocationStrategy
connectedLocationStrategy: ( data: LocationStrategyData, props: StrategyProps$1, contentStyles: Ref<Record<string, string>>) => { updateLocation: () => | { available: { x: number; y: number }; contentBox: Box; flipped: { x: boolean; y: boolean }; } | undefined;};
function createVuetify
createVuetify: typeof createVuetify;
function deepEqual
deepEqual: (a: any, b: any) => boolean;
function EventProp
EventProp: <T extends any[] = any[]>() => PropType<(...args: T) => void>;
function provideExpanded
provideExpanded: (props: ExpandProps) => { expand: (item: DataTableItem, value: boolean) => void; expanded: Ref<Set<string>, Set<string>> & { readonly externalValue: readonly string[]; }; expandOnClick: Ref<boolean, boolean>; isExpanded: (item: DataTableItem) => boolean; toggleExpand: (item: DataTableItem) => void;};
function provideSelection
provideSelection: ( props: SelectionProps, { allItems, currentPage, }: { allItems: Ref<SelectableItem[]>; currentPage: Ref<SelectableItem[]> }) => { toggleSelect: (item: SelectableItem, index?: number, event?: MouseEvent) => void; select: (items: SelectableItem[], value: boolean) => void; selectAll: (value: boolean) => void; isSelected: (items: SelectableItem | SelectableItem[]) => boolean; isSomeSelected: (items: SelectableItem | SelectableItem[]) => boolean; someSelected: vue.ComputedRef<boolean>; allSelected: vue.ComputedRef<boolean>; showSelectAll: Ref<boolean, boolean>; lastSelectedIndex: vue.ShallowRef<number, number>; selectStrategy: vue.ComputedRef<DataTableSelectStrategy>;};
function repositionScrollStrategy
repositionScrollStrategy: ( data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) => void;
function staticLocationStrategy
staticLocationStrategy: () => void;
function useDate
useDate: () => DateInstance;
function useDefaults
useDefaults: { <T extends Record<string, any>>(props: T, name?: string): T; (props?: undefined, name?: string): Record<string, any>;};
function useDisplay
useDisplay: ( props?: DisplayProps, name?: string) => { displayClasses: Ref<{ [x: string]: boolean }, { [x: string]: boolean }>; mobile: vue.ComputedRef<boolean>; xs: Ref<boolean>; sm: Ref<boolean>; md: Ref<boolean>; lg: Ref<boolean>; xl: Ref<boolean>; xxl: Ref<boolean>; smAndUp: Ref<boolean>; mdAndUp: Ref<boolean>; lgAndUp: Ref<boolean>; xlAndUp: Ref<boolean>; smAndDown: Ref<boolean>; mdAndDown: Ref<boolean>; lgAndDown: Ref<boolean>; xlAndDown: Ref<boolean>; name: Ref<DisplayBreakpoint>; height: Ref<number>; width: Ref<number>; mobileBreakpoint: Ref<number | DisplayBreakpoint>; platform: Ref<DisplayPlatform>; thresholds: Ref<DisplayThresholds>; ssr: boolean; update(): void;};
function useGoTo
useGoTo: (_options?: GoToOptions) => { ( target: ComponentPublicInstance | HTMLElement | string | number, options?: Partial<GoToOptions> ): Promise<unknown>; horizontal( target: ComponentPublicInstance | HTMLElement | string | number, options?: Partial<GoToOptions> ): Promise<unknown>;};
function useLayout
useLayout: () => { getLayoutItem: (id: string) => LayoutItem | undefined; mainRect: Ref<Layer, Layer>; mainStyles: Ref<CSSProperties, CSSProperties>;};
function useLocale
useLocale: () => LocaleInstance & RtlInstance;
function useRtl
useRtl: () => { isRtl: Ref<boolean, boolean>; rtlClasses: Ref<string, string> };
function useTheme
useTheme: () => ThemeInstance;
Interfaces
interface Blueprint
interface Blueprint extends Omit<VuetifyOptions, 'blueprint'> {}
interface DateInstance
interface DateInstance extends DateModule.InternalAdapter {}
property locale
locale?: any;
interface DisplayInstance
interface DisplayInstance {}
property height
height: Ref<number>;
property lg
lg: Ref<boolean>;
property lgAndDown
lgAndDown: Ref<boolean>;
property lgAndUp
lgAndUp: Ref<boolean>;
property md
md: Ref<boolean>;
property mdAndDown
mdAndDown: Ref<boolean>;
property mdAndUp
mdAndUp: Ref<boolean>;
property mobile
mobile: Ref<boolean>;
property mobileBreakpoint
mobileBreakpoint: Ref<number | DisplayBreakpoint>;
property name
name: Ref<DisplayBreakpoint>;
property platform
platform: Ref<DisplayPlatform>;
property sm
sm: Ref<boolean>;
property smAndDown
smAndDown: Ref<boolean>;
property smAndUp
smAndUp: Ref<boolean>;
property thresholds
thresholds: Ref<DisplayThresholds>;
property width
width: Ref<number>;
property xl
xl: Ref<boolean>;
property xlAndDown
xlAndDown: Ref<boolean>;
property xlAndUp
xlAndUp: Ref<boolean>;
property xs
xs: Ref<boolean>;
property xxl
xxl: Ref<boolean>;
method update
update: () => void;
interface GoToInstance
interface GoToInstance {}
interface IconAliases
interface IconAliases {}
property calendar
calendar: IconValue;
property cancel
cancel: IconValue;
property checkboxIndeterminate
checkboxIndeterminate: IconValue;
property checkboxOff
checkboxOff: IconValue;
property checkboxOn
checkboxOn: IconValue;
property clear
clear: IconValue;
property close
close: IconValue;
property collapse
collapse: IconValue;
property color
color: IconValue;
property complete
complete: IconValue;
property delete
delete: IconValue;
property delimiter
delimiter: IconValue;
property dropdown
dropdown: IconValue;
property edit
edit: IconValue;
property error
error: IconValue;
property expand
expand: IconValue;
property eyeDropper
eyeDropper: IconValue;
property file
file: IconValue;
property first
first: IconValue;
property info
info: IconValue;
property last
last: IconValue;
property loading
loading: IconValue;
property menu
menu: IconValue;
property minus
minus: IconValue;
property next
next: IconValue;
property plus
plus: IconValue;
property prev
prev: IconValue;
property radioOff
radioOff: IconValue;
property radioOn
radioOn: IconValue;
property ratingEmpty
ratingEmpty: IconValue;
property ratingFull
ratingFull: IconValue;
property ratingHalf
ratingHalf: IconValue;
property sortAsc
sortAsc: IconValue;
property sortDesc
sortDesc: IconValue;
property subgroup
subgroup: IconValue;
property success
success: IconValue;
property treeviewCollapse
treeviewCollapse: IconValue;
property treeviewExpand
treeviewExpand: IconValue;
property unfold
unfold: IconValue;
property upload
upload: IconValue;
property warning
warning: IconValue;
index signature
[name: string]: IconValue;
interface IconProps
interface IconProps {}
interface InternalItem
interface InternalItem<T = any> {}
interface LocaleInstance
interface LocaleInstance {}
property current
current: Ref<string>;
property fallback
fallback: Ref<string>;
property messages
messages: Ref<LocaleMessages>;
property n
n: (value: number) => string;
property name
name: string;
property provide
provide: (props: LocaleOptions) => LocaleInstance;
property t
t: (key: string, ...params: unknown[]) => string;
interface LocaleMessages
interface LocaleMessages {}
index signature
[key: string]: LocaleMessages | string;
interface LocaleOptions
interface LocaleOptions {}
interface RtlInstance
interface RtlInstance {}
property isRtl
isRtl: Ref<boolean>;
property rtl
rtl: Ref<Record<string, boolean>>;
property rtlClasses
rtlClasses: Ref<string>;
interface RtlOptions
interface RtlOptions {}
property rtl
rtl?: Record<string, boolean>;
interface SubmitEventPromise
interface SubmitEventPromise extends SubmitEvent, Promise<FormValidationResult> {}
interface ThemeInstance
interface ThemeInstance {}
property computedThemes
readonly computedThemes: DeepReadonly< Ref<Record<string, InternalThemeDefinition>>>;
property current
readonly current: DeepReadonly<Ref<InternalThemeDefinition>>;
property global
readonly global: { readonly name: Ref<string>; readonly current: DeepReadonly<Ref<InternalThemeDefinition>>;};
property isDisabled
readonly isDisabled: boolean;
property name
readonly name: Readonly<Ref<string>>;
property styles
readonly styles: Readonly<Ref<string>>;
property themeClasses
readonly themeClasses: Readonly<Ref<string | undefined>>;
property themes
readonly themes: Ref<Record<string, InternalThemeDefinition>>;
interface VuetifyOptions
interface VuetifyOptions {}
property aliases
aliases?: Record<string, any>;
property blueprint
blueprint?: Blueprint;
property components
components?: Record<string, any>;
property date
date?: DateOptions;
property defaults
defaults?: DefaultsOptions;
property directives
directives?: Record<string, any>;
property display
display?: DisplayOptions;
property goTo
goTo?: GoToOptions;
property icons
icons?: IconOptions;
property locale
locale?: LocaleOptions & RtlOptions;
property ssr
ssr?: SSROptions;
property theme
theme?: ThemeOptions;
Type Aliases
type ActiveStrategy
type ActiveStrategy = { activate: ActiveStrategyFunction; in: ActiveStrategyTransformInFunction; out: ActiveStrategyTransformOutFunction;};
type Anchor
type Anchor = | Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;
type DataTableCellPropsFunction
type CellPropsFunction<T> = ( data: Pick< ItemKeySlot<T>, 'index' | 'item' | 'internalItem' | 'value' | 'column' >) => Record<string, any>;
type DataTableCompareFunction
type DataTableCompareFunction<T = any> = (a: T, b: T) => number | null;
type DataTableHeader
type DataTableHeader<T = Record<string, any>> = { key?: | 'data-table-group' | 'data-table-select' | 'data-table-expand' | (string & {}); value?: SelectItemKey<T>; title?: string; fixed?: boolean; align?: 'start' | 'end' | 'center'; width?: number | string; minWidth?: number | string; maxWidth?: number | string; nowrap?: boolean; headerProps?: Record<string, any>; cellProps?: HeaderCellProps; sortable?: boolean; sort?: DataTableCompareFunction; sortRaw?: DataTableCompareFunction; filter?: FilterFunction; children?: DataTableHeader<T>[];};
type DataTableHeaderCellPropsFunction
type HeaderCellPropsFunction = ( data: Pick<ItemKeySlot<any>, 'index' | 'item' | 'internalItem' | 'value'>) => Record<string, any>;
type DataTableRowPropsFunction
type RowPropsFunction<T> = ( data: Pick<ItemKeySlot<T>, 'index' | 'item' | 'internalItem'>) => Record<string, any>;
type DataTableSortItem
type SortItem = { key: string; order?: boolean | 'asc' | 'desc';};
type DateOptions
type DateOptions = Partial<InternalDateOptions>;
type DefaultsInstance
type DefaultsInstance = | undefined | { [key: string]: undefined | Record<string, unknown>; global?: Record<string, unknown>; };
type DisplayBreakpoint
type DisplayBreakpoint = 'xs' | Breakpoint;
type DisplayThresholds
type DisplayThresholds = { [key in DisplayBreakpoint]: number;};
type FilterFunction
type FilterFunction = ( value: string, query: string, item?: InternalItem) => FilterMatch;
type FilterMatch
type FilterMatch = boolean | number | FilterMatchArray;
type IconOptions
type IconOptions = Partial<InternalIconOptions>;
type JSXComponent
type JSXComponent<Props = any> = | { new (): ComponentPublicInstance<Props>; } | FunctionalComponent<Props>;
type LocationStrategyFunction
type LocationStrategyFunction = ( data: LocationStrategyData, props: StrategyProps$1, contentStyles: Ref<Record<string, string>>) => | undefined | { updateLocation: (e?: Event) => void; };
type OpenStrategy
type OpenStrategy = { open: OpenStrategyFunction; select: OpenSelectStrategyFunction;};
type ScrollStrategyFunction
type ScrollStrategyFunction = ( data: ScrollStrategyData, props: StrategyProps, scope: EffectScope) => void;
type SelectStrategy
type SelectStrategy = { select: SelectStrategyFunction; in: SelectStrategyTransformInFunction; out: SelectStrategyTransformOutFunction;};
type SnackbarQueueMessage
type SnackbarMessage = | string | (Omit< VSnackbar['$props'], | 'modelValue' | 'onUpdate:modelValue' | 'activator' | 'activatorProps' | 'closeDelay' | 'openDelay' | 'openOnClick' | 'openOnFocus' | 'openOnHover' | 'style' | '$children' | 'v-slots' | `v-slot:${string}` | keyof VNodeProps > & { style?: any; });
type ThemeDefinition
type ThemeDefinition = DeepPartial<InternalThemeDefinition>;
type ValidationRule
type ValidationRule = | ValidationResult | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>);
Namespaces
namespace createVuetify
namespace createVuetify {}
variable version
var version: string;
namespace DateModule
namespace DateModule {}
Supports module augmentation to specify date adapter types
interface Adapter
interface Adapter {}
type InternalAdapter
type InternalAdapter = {} extends Adapter ? DateAdapter : Adapter;
namespace global
namespace global {}
namespace global.JSX
namespace global.JSX {}
interface ElementChildrenAttribute
interface ElementChildrenAttribute {}
property $children
$children: {};
Package Files (1)
Dependencies (0)
No dependencies.
Dev Dependencies (71)
- @date-io/core
- @date-io/date-fns
- @date-io/dayjs
- @date-io/luxon
- @date-io/moment
- @fortawesome/fontawesome-svg-core
- @fortawesome/free-solid-svg-icons
- @fortawesome/vue-fontawesome
- @intlify/devtools-types
- @percy/cli
- @percy/sdk-utils
- @rollup/plugin-alias
- @rollup/plugin-babel
- @rollup/plugin-node-resolve
- @rollup/plugin-typescript
- @testing-library/dom
- @testing-library/user-event
- @testing-library/vue
- @types/node
- @types/resize-observer-browser
- @vitejs/plugin-vue
- @vitejs/plugin-vue-jsx
- @vitest/browser
- @vitest/coverage-istanbul
- @vitest/ui
- @vue/reactivity
- @vue/shared
- @vue/test-utils
- @vuetify/babel-plugin-jsx
- acorn-walk
- autoprefixer
- babel-plugin-add-import-extension
- babel-plugin-module-resolver
- babel-plugin-transform-define
- babel-polyfill
- cssnano
- csstype
- cy-mobile-commands
- date-fns
- dayjs
- dotenv
- eslint-plugin-vitest
- expect
- fast-glob
- identity-obj-proxy
- jsdom
- luxon
- micromatch
- moment
- postcss
- roboto-fontface
- rollup
- rollup-plugin-dts
- rollup-plugin-sass
- rollup-plugin-sourcemaps
- rollup-plugin-terser
- timezone-mock
- ts-node
- ts-patch
- typescript-transform-paths
- unplugin-auto-import
- unplugin-vue-components
- upath
- vite
- vite-live-preview
- vite-ssr
- vitest
- vue
- vue-i18n
- vue-router
- webdriverio
Peer Dependencies (4)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/vuetify
.
- Markdown[](https://www.jsdocs.io/package/vuetify)
- HTML<a href="https://www.jsdocs.io/package/vuetify"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 21455 ms. - Missing or incorrect documentation? Open an issue for this package.