vuetify
Version:
Vue Material Component Framework
1,241 lines • 1.98 MB
JSON
{
"$schema": "http://json.schemastore.org/web-types",
"framework": "vue",
"name": "vuetify",
"version": "3.6.7",
"contributions": {
"html": {
"types-syntax": "typescript",
"description-markup": "markdown",
"tags": [
{
"name": "VAlert",
"source": {
"module": "./src/components/index.ts",
"symbol": "VAlert"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-alert",
"attributes": [
{
"name": "title",
"description": "Specify a title text for the component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "text",
"description": "Specify content text for the component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "border",
"description": "Adds a colored border to the component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean | 'top' | 'end' | 'bottom' | 'start'"
}
},
{
"name": "borderColor",
"description": "Specifies the color of the border. Accepts any color value.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "closable",
"description": "Adds a close icon that can hide the alert.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "closeIcon",
"description": "Change the default icon used for **closable** alerts.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"default": "'$close'",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "type",
"description": "Create a specialized alert that uses a contextual color and has a pre-defined icon.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "'success' | 'info' | 'warning' | 'error'"
}
},
{
"name": "closeLabel",
"description": "Text used for *aria-label* on **closable** alerts. Can also be customized globally in [Internationalization](/customization/internationalization).",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"default": "'$vuetify.close'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "icon",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"default": "null",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "modelValue",
"description": "Controls whether the component is visible or hidden.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "prominent",
"description": "Displays a larger vertically centered icon to draw more attention.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxHeight",
"description": "Sets the maximum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxWidth",
"description": "Sets the maximum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minHeight",
"description": "Sets the minimum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minWidth",
"description": "Sets the minimum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "elevation",
"description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "location",
"description": "Specifies the component's location. Can combine by using a space separated string.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>"
}
},
{
"name": "position",
"description": "Sets the position for the component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "'static' | 'relative' | 'fixed' | 'absolute' | 'sticky'"
}
},
{
"name": "rounded",
"description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "tile",
"description": "Removes the component's border-radius.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "variant",
"description": "Applies a distinct style to the component.",
"doc-url": "https://vuetifyjs.com/api/VAlert#props",
"default": "'flat'",
"value": {
"kind": "expression",
"type": "'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'"
}
}
],
"events": [
{
"name": "click:close",
"description": "Emitted when close icon is clicked.",
"doc-url": "https://vuetifyjs.com/api/v-alert#events",
"arguments": [
{
"name": "argument",
"type": "[MouseEvent]\n"
}
]
},
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-alert#events",
"arguments": [
{
"name": "argument",
"type": "[boolean]\n"
}
]
}
],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-alert#slots"
},
{
"name": "prepend",
"description": "Slot for icon at beginning of alert.",
"doc-url": "https://vuetifyjs.com/api/v-alert#slots"
},
{
"name": "title",
"description": "Slot for the component's title content.",
"doc-url": "https://vuetifyjs.com/api/v-alert#slots"
},
{
"name": "text",
"description": "Slot for the component's text content.",
"doc-url": "https://vuetifyjs.com/api/v-alert#slots"
},
{
"name": "append",
"description": "Slot for icon at end of alert.",
"doc-url": "https://vuetifyjs.com/api/v-alert#slots"
},
{
"name": "close",
"description": "Slot for icon used in **dismissible** prop.",
"doc-url": "https://vuetifyjs.com/api/v-alert#slots",
"vue-properties": [
{
"name": "props",
"type": "Record<string, any>"
}
]
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VAlertTitle",
"source": {
"module": "./src/components/index.ts",
"symbol": "VAlertTitle"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-alert-title",
"attributes": [
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VAlertTitle#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-alert-title#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VApp",
"source": {
"module": "./src/components/index.ts",
"symbol": "VApp"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-app",
"attributes": [
{
"name": "fullHeight",
"description": "Sets the component height to 100%.",
"doc-url": "https://vuetifyjs.com/api/VApp#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "overlaps",
"description": "**FOR INTERNAL USE ONLY**",
"doc-url": "https://vuetifyjs.com/api/VApp#props",
"default": "[]",
"value": {
"kind": "expression",
"type": "string[]"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VApp#props",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-app#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VAppBar",
"source": {
"module": "./src/components/index.ts",
"symbol": "VAppBar"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-app-bar",
"attributes": [
{
"name": "image",
"description": "Specifies a [v-img](/components/images) as the component's background.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "title",
"description": "Specify a title text for the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "flat",
"description": "Removes the component's **box-shadow**.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "collapse",
"description": "Morphs the component into a collapsed state, reducing its maximum width.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "modelValue",
"description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "location",
"description": "Aligns the component towards the top or bottom.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "'top'",
"value": {
"kind": "expression",
"type": "'top' | 'bottom'"
}
},
{
"name": "absolute",
"description": "Applies position: absolute to the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'prominent' | 'comfortable' | 'compact'"
}
},
{
"name": "extended",
"description": "Use this prop to increase the height of the toolbar _without_ using the `extension` slot for adding content. May be used in conjunction with the **extension-height** prop, and any of the other props that affect the height of the toolbar, e.g. **prominent**, **dense**, etc., **WITH THE EXCEPTION** of **height**.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "extensionHeight",
"description": "Designate an explicit height for the `extension` slot.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "48",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "floating",
"description": "Applies **display: inline-flex** to the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "height",
"description": "Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. **prominent**, **dense**, **extended**, etc.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "64",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "border",
"description": "Designates the **border-radius** applied to the component. This can be **xs**, **sm**, **md**, **lg**, **xl**.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "elevation",
"description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "rounded",
"description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "tile",
"description": "Removes any applied **border-radius** from the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "'header'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "name",
"description": "Assign a specific name for layout registration.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "order",
"description": "Adjust the order of the component in relation to its registration order.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "0",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "scrollTarget",
"description": "The element to target for scrolling events. Uses `window` by default.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "scrollThreshold",
"description": "The amount of scroll distance down before **scroll-behavior** activates.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"default": "300",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "scrollBehavior",
"description": "Specify an action to take when the scroll position of **scroll-target** reaches **scroll-threshold**. Accepts any combination of hide, inverted, collapse, elevate, and fade-image. Multiple values can be used, separated by a space.",
"doc-url": "https://vuetifyjs.com/api/VAppBar#props",
"value": {
"kind": "expression",
"type": "| (string & {})\n | 'hide'\n | 'inverted'\n | 'collapse'\n | 'elevate'\n | 'fade-image'"
}
}
],
"events": [
{
"name": "update:modelValue",
"description": "Event that is emitted when the component's model changes.",
"doc-url": "https://vuetifyjs.com/api/v-app-bar#events",
"arguments": [
{
"name": "argument",
"type": "[boolean]\n"
}
]
}
],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-app-bar#slots"
},
{
"name": "image",
"description": "Expects the [`v-img`](/components/images/) component.",
"doc-url": "https://vuetifyjs.com/api/v-app-bar#slots"
},
{
"name": "prepend",
"description": "Adds an item outside the input and before input content.",
"doc-url": "https://vuetifyjs.com/api/v-app-bar#slots"
},
{
"name": "append",
"description": "Adds an item inside the input and after input content.",
"doc-url": "https://vuetifyjs.com/api/v-app-bar#slots"
},
{
"name": "title",
"description": "Slot for the component's title content.",
"doc-url": "https://vuetifyjs.com/api/v-app-bar#slots"
},
{
"name": "extension",
"description": "Slot positioned directly under the main content of the toolbar. Height of this slot can be set explicitly with the **extension-height** prop.",
"doc-url": "https://vuetifyjs.com/api/v-app-bar#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VAppBarNavIcon",
"source": {
"module": "./src/components/index.ts",
"symbol": "VAppBarNavIcon"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-app-bar-nav-icon",
"attributes": [
{
"name": "symbol",
"description": "The [Symbol](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) used to hook into group functionality for components like [v-btn-toggle](/components/btn-toggle) and [v-bottom-navigation](/components/bottom-navigations/).",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "flat",
"description": "Removes the button box shadow. This is different than using the 'flat' variant.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "active",
"description": "Controls the **active** state of the item. This is typically used to highlight the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "baseColor",
"description": "Sets the color of component when not focused.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "prependIcon",
"description": "Creates a [v-icon](/api/v-icon/) component in the **prepend** slot before default content.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "appendIcon",
"description": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "block",
"description": "Expands the button to 100% of available space.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "readonly",
"description": "Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "slim",
"description": "Reduces padding to 0 8px.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "stacked",
"description": "Displays the button as a flex-column.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "ripple",
"description": "Applies the [v-ripple](/directives/ripple) directive.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean | { class: string }"
}
},
{
"name": "value",
"description": "The value used when the component is selected in a group. If not provided, a unique ID will be used.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "text",
"description": "Specify content text for the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "border",
"description": "Designates the **border-radius** applied to the component. This can be **xs**, **sm**, **md**, **lg**, **xl**.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "density",
"description": "Adjusts the vertical height used by the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "'default' | 'comfortable' | 'compact'"
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxHeight",
"description": "Sets the maximum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "maxWidth",
"description": "Sets the maximum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minHeight",
"description": "Sets the minimum height for the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "minWidth",
"description": "Sets the minimum width for the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "elevation",
"description": "Designates an elevation applied to the component between 0 and 24. You can find more information on the [elevation page](/styles/elevation).",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "disabled",
"description": "Removes the ability to click or target the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "selectedClass",
"description": "Configure the active CSS class applied when an item is selected.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "loading",
"description": "Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - **primary**, **secondary**, **success**, **info**, **warning**, **error**) or a Boolean which uses the component **color** (set by color prop - if it's supported by the component) or the primary color.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "false",
"value": {
"kind": "expression",
"type": "string | boolean"
}
},
{
"name": "location",
"description": "Specifies the component's location. Can combine by using a space separated string.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "<a href=\"https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/util/anchor.ts#L8-L14\" target=\"_blank\">Anchor</a>"
}
},
{
"name": "position",
"description": "Sets the position for the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "'static' | 'relative' | 'fixed' | 'absolute' | 'sticky'"
}
},
{
"name": "rounded",
"description": "Designates the **border-radius** applied to the component. This can be **0**, **xs**, **sm**, true, **lg**, **xl**, **pill**, **circle**, and **shaped**. Find more information on available border radius classes on the [Border Radius page](/styles/border-radius).",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string | number | boolean"
}
},
{
"name": "tile",
"description": "Removes any applied **border-radius** from the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "href",
"description": "Designates the component as anchor and applies the **href** attribute.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "replace",
"description": "Setting **replace** prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the [replace](https://router.vuejs.org/api/#replace) prop on the vue-router documentation.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "exact",
"description": "Exactly match the link. Without this, '/' will match every route. You can find more information about the [**exact** prop](https://router.vuejs.org/api/#exact) on the vue-router documentation.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "to",
"description": "Denotes the target route of the link. You can find more information about the [**to** prop](https://router.vuejs.org/api/#to) on the vue-router documentation.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "RouteLocationRaw"
}
},
{
"name": "size",
"description": "Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: **x-small**, **small**, **default**, **large**, and **x-large**.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "'default'",
"value": {
"kind": "expression",
"type": "string | number"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "'button'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "theme",
"description": "Specify a theme for this component and all of its children.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "color",
"description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "variant",
"description": "Applies a distinct style to the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "'text'",
"value": {
"kind": "expression",
"type": "'flat' | 'text' | 'elevated' | 'tonal' | 'outlined' | 'plain'"
}
},
{
"name": "icon",
"description": "Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_.",
"doc-url": "https://vuetifyjs.com/api/VAppBarNavIcon#props",
"default": "'$menu'",
"value": {
"kind": "expression",
"type": "any"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-app-bar-nav-icon#slots"
},
{
"name": "prepend",
"description": "Adds an item outside the input and before input content.",
"doc-url": "https://vuetifyjs.com/api/v-app-bar-nav-icon#slots"
},
{
"name": "append",
"description": "Adds an item inside the input and after input content.",
"doc-url": "https://vuetifyjs.com/api/v-app-bar-nav-icon#slots"
},
{
"name": "loader",
"description": "Slot for custom loader (displayed when [loading](#props-loading) prop is equal to true).",
"doc-url": "https://vuetifyjs.com/api/v-app-bar-nav-icon#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VAppBarTitle",
"source": {
"module": "./src/components/index.ts",
"symbol": "VAppBarTitle"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-app-bar-title",
"attributes": [
{
"name": "text",
"description": "Specify content text for the component.",
"doc-url": "https://vuetifyjs.com/api/VAppBarTitle#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://vuetifyjs.com/api/VAppBarTitle#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://vuetifyjs.com/api/v-app-bar-title#slots"
},
{
"name": "text",
"description": "Slot for the component's text content.",
"doc-url": "https://vuetifyjs.com/api/v-app-bar-title#slots"
}
],
"vue-model": {
"prop": "modelValue",
"event": "update:modelValue"
}
},
{
"name": "VAutocomplete",
"source": {
"module": "./src/components/index.ts",
"symbol": "VAutocomplete"
},
"description": "",
"doc-url": "https://vuetifyjs.com/api/v-autocomplete",
"attributes": [
{
"name": "label",
"description": "Sets the text of the [v-label](/api/v-label/) or [v-field-label](/api/v-field-label/) component.",
"doc-url": "https://vuetifyjs.com/api/VAutocomplete#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "autoSelectFirst",
"description": "When searching, will always highlight the first option and select it on blur. `exact` will only highlight and select exact matches.",
"doc-url": "https://vuetifyjs.com/api/VAutocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean | 'exact'"
}
},
{
"name": "clearOnSelect",
"description": "Reset the search text when a selection is made while using the **multiple** prop.",
"doc-url": "https://vuetifyjs.com/api/VAutocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "search",
"description": "Text input used to filter items.",
"doc-url": "https://vuetifyjs.com/api/VAutocomplete#props",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "filterMode",
"description": "Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`.\n\n- **some**: There is at least one match from either the custom filter or the custom key filter.\n- **every**: All columns match either the custom filter or the custom key filter.\n- **union**: There is at least one match from the custom filter, or all columns match the custom key filters.\n- **intersection**: There is at least one match from the custom filter, and all columns match the custom key filters.",
"doc-url": "https://vuetifyjs.com/api/VAutocomplete#props",
"default": "'intersection'",
"value": {
"kind": "expression",
"type": "'some' | 'every' | 'union' | 'intersection'"
}
},
{
"name": "noFilter",
"description": "Do not apply filtering when searching. Useful when data is being filtered server side.",
"doc-url": "https://vuetifyjs.com/api/VAutocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
}
},
{
"name": "customFilter",
"description": "Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted.",
"do