vuetify
Version:
Vue Material Component Framework
1,305 lines • 1.34 MB
JSON
{
"$schema": "http://json.schemastore.org/web-types",
"framework": "vue",
"name": "vuetify",
"version": "2.3.16",
"contributions": {
"html": {
"types-syntax": "typescript",
"description-markup": "markdown",
"tags": [
{
"name": "VApp",
"source": {
"module": "./src/components/index.ts",
"symbol": "VApp"
},
"description": "",
"doc-url": "https://www.vuetifyjs.com/api/v-app",
"attributes": [
{
"name": "id",
"description": "Sets the DOM id on the component",
"doc-url": "https://www.vuetifyjs.com/api/v-app#props",
"default": "'app'",
"value": {
"kind": "expression",
"type": "string"
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://www.vuetifyjs.com/api/v-app#slots"
}
],
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "VAppBar",
"source": {
"module": "./src/components/index.ts",
"symbol": "VAppBar"
},
"description": "",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar",
"attributes": [
{
"name": "absolute",
"description": "Applies position: absolute to the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "app",
"description": "Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside **outside** of `v-main` component to function properly. You can more information about layouts on the [application page](/components/application). **Note:** this prop automatically applies **position: fixed** to the layout element. You can overwrite this functionality by using the `absolute` prop",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "bottom",
"description": "Aligns the component towards the bottom.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "clipped-left",
"description": "Designates that the application's `v-navigation-drawer` that is positioned on the left is below the app-bar.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "clipped-right",
"description": "Designates that the application's `v-navigation-drawer` that is positioned on the right is below the app-bar.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "collapse",
"description": "Puts the toolbar into a collapsed state reducing its maximum width.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "collapse-on-scroll",
"description": "Puts the app-bar into a collapsed state when scrolling.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "color",
"description": "Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "dark",
"description": "Applies the dark theme variant to the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html).",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "dense",
"description": "Reduces the height of the toolbar content to 48px (96px when using the **prominent** prop).",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "elevate-on-scroll",
"description": "Elevates the app-bar when scrolling.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "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://www.vuetifyjs.com/api/v-app-bar#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"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://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "extension-height",
"description": "Specify an explicit height for the `extension` slot. ",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "48",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "fade-img-on-scroll",
"description": "When using the **src** prop or `img` slot, will fade the image when scrolling.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "fixed",
"description": "Applies **position: fixed** to the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "flat",
"description": "Removes the toolbar's box-shadow.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "floating",
"description": "Applies **display: inline-flex** to the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"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://www.vuetifyjs.com/api/v-app-bar#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "hide-on-scroll",
"description": "Hides the app-bar when scrolling. Will still show the `extension` slot.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "inverted-scroll",
"description": "Hides the app-bar when scrolling down and displays it when scrolling up.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "light",
"description": "Applies the light theme variant to the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "max-height",
"description": "Sets the maximum height for the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "max-width",
"description": "Sets the maximum width for the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "min-height",
"description": "Sets the minimum height for the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "min-width",
"description": "Sets the minimum width for the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "outlined",
"description": "Removes elevation (box-shadow) and adds a *thin* border.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "prominent",
"description": "Increases the height of the toolbar content to 128px.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "rounded",
"description": "Designates the **border-radius** applied to the component. You can find more information on the [Border Radius page](/styles/border-radius).",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"boolean",
"string"
]
}
},
{
"name": "scroll-off-screen",
"description": "Hides the app-bar when scrolling. Will **NOT** show the `extension` slot.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "scroll-target",
"description": "Designates the element to target for scrolling events. Uses `window` by default.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "scroll-threshold",
"description": "The amount of scroll distance down before **hide-on-scroll** activates.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"string",
"number"
]
}
},
{
"name": "shaped",
"description": "Applies a large border radius on the top left and bottom right of the card.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "short",
"description": "Reduce the height of the toolbar content to 56px (112px when using the **prominent** prop).",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "shrink-on-scroll",
"description": "Shrinks a **prominent** toolbar to a **dense** or **short** (default) one when scrolling.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "src",
"description": "Image source. See `v-img` for details",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"string",
"object"
]
}
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "'header'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "tile",
"description": "Removes the component's **border-radius**.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "value",
"description": "Controls whether the component is visible or hidden.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
}
],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://www.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. If this slot has no content, the **extended** prop may be used instead.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#slots"
},
{
"name": "img",
"description": "Expects the [v-img](/components/images) component. Scoped **props** should be applied with `v-bind=\"props\"`.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar#slots",
"vue-properties": [
{
"name": "props",
"type": "{ height: string, src: string | srcObject }"
}
]
}
],
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "VAppBarNavIcon",
"source": {
"module": "./src/components/index.ts",
"symbol": "VAppBarNavIcon"
},
"description": "",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar-nav-icon",
"attributes": [],
"events": [],
"slots": [
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://www.vuetifyjs.com/api/v-app-bar-nav-icon#slots"
}
],
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "VAlert",
"source": {
"module": "./src/components/index.ts",
"symbol": "VAlert"
},
"description": "",
"doc-url": "https://www.vuetifyjs.com/api/v-alert",
"attributes": [
{
"name": "border",
"description": "Puts a border on the alert. Accepts **top** \\| **right** \\| **bottom** \\| **left**.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "close-icon",
"description": "Change the default icon used for **dismissible** alerts.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "'$cancel'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "close-label",
"description": "Text used for *aria-label* on **dismissible** alerts. Can also be customizing globally in [Internationalization](/customization/internationalization).",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "'$vuetify.close'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "color",
"description": "Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "colored-border",
"description": "Applies the defined **color** to the alert's border.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "dark",
"description": "Applies the dark theme variant to the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html).",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "dense",
"description": "Hides the alert icon and decreases component's height.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "dismissible",
"description": "Adds a close icon that can hide the alert.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "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://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "height",
"description": "Sets the height for the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "icon",
"description": "Designates a specific icon.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"boolean",
"string"
]
}
},
{
"name": "light",
"description": "Applies the light theme variant to the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "max-height",
"description": "Sets the maximum height for the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "max-width",
"description": "Sets the maximum width for the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "min-height",
"description": "Sets the minimum height for the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "min-width",
"description": "Sets the minimum width for the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "mode",
"description": "Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation [for transition modes](https://vuejs.org/v2/api/#transition).",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "origin",
"description": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "outlined",
"description": "Makes the background transparent and applies a thin border.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "prominent",
"description": "Displays a larger vertically centered icon to draw more attention.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "rounded",
"description": "Designates the **border-radius** applied to the component. You can find more information on the [Border Radius page](/styles/border-radius).",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"boolean",
"string"
]
}
},
{
"name": "shaped",
"description": "Applies a large border radius on the top left and bottom right of the card.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "tag",
"description": "Specify a custom tag used on the root element.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "'div'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "text",
"description": "Applies the defined **color** to text and a low opacity background of the same.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "tile",
"description": "Removes the component's border-radius.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "transition",
"description": "Sets the component transition. Can be one of the [built in transitions](/styles/transitions) or one your own.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "type",
"description": "Specify a **success**, **info**, **warning** or **error** alert. Uses the contextual color and has a pre-defined icon.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "value",
"description": "Controls whether the component is visible or hidden.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "width",
"description": "Sets the width for the component.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
}
],
"events": [
{
"name": "input",
"description": "The updated bound model",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#events",
"arguments": [
{
"name": "argument",
"type": "boolean"
}
]
}
],
"slots": [
{
"name": "append",
"description": "Slot for icon at end of alert.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#slots"
},
{
"name": "close",
"description": "Slot for icon used in **dismissible** prop.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#slots",
"vue-properties": [
{
"name": "toggle",
"type": "Function"
}
]
},
{
"name": "default",
"description": "The default Vue slot.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#slots"
},
{
"name": "prepend",
"description": "Slot for icon at beginning of alert.",
"doc-url": "https://www.vuetifyjs.com/api/v-alert#slots"
}
],
"vue-model": {
"prop": "value",
"event": "input"
}
},
{
"name": "VAutocomplete",
"source": {
"module": "./src/components/index.ts",
"symbol": "VAutocomplete"
},
"description": "",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete",
"attributes": [
{
"name": "allow-overflow",
"description": "Allow the menu to overflow off the screen",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "true",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "append-icon",
"description": "Appends an icon to the component, uses the same syntax as `v-icon`",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "'$dropdown'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "append-outer-icon",
"description": "Appends an icon to the outside the component's input, uses same syntax as `v-icon`",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "attach",
"description": "Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This will attach to the root `v-app` component by default.",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "any"
}
},
{
"name": "auto-select-first",
"description": "When searching, will always highlight the first option",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "autofocus",
"description": "Enables autofocus",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "background-color",
"description": "Changes the background-color of the input",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "cache-items",
"description": "Keeps a local _unique_ copy of all items that have been passed through the **items** prop.",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "chips",
"description": "Changes display of selections to chips",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "clear-icon",
"description": "Applied when using **clearable** and the input is dirty",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "'$clear'",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "clearable",
"description": "Add input clear functionality, default icon is Material Design Icons **mdi-clear**",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "color",
"description": "Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the [colors page](/styles/colors#material-colors).",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": "string"
}
},
{
"name": "counter",
"description": "Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"boolean",
"number",
"string"
]
}
},
{
"name": "counter-value",
"description": "",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "null",
"value": {
"kind": "expression",
"type": "function"
}
},
{
"name": "dark",
"description": "Applies the dark theme variant to the component. This will default the components color to _white_ unless you've configured your [application theme](/customization/theme) to **dark** or if you are using the **color** prop on the component. You can find more information on the Material Design documentation for [dark themes](https://material.io/design/color/dark-theme.html).",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "deletable-chips",
"description": "Adds a remove icon to selected chips",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "dense",
"description": "Reduces the input height",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "disable-lookup",
"description": "Disables keyboard lookup",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "disabled",
"description": "Disables the input",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "eager",
"description": "Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "error",
"description": "Puts the input in a manual error state",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "error-count",
"description": "The total number of errors that should display at once",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "1",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "error-messages",
"description": "Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the **rules** prop. This field will not trigger validation",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "[]",
"value": {
"kind": "expression",
"type": [
"string",
"array"
]
}
},
{
"name": "filled",
"description": "Applies the alternate filled input style",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "filter",
"description": "The filtering algorithm used when searching. [example](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts#L36)",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "(item, queryText, itemText) => {}",
"value": {
"kind": "expression",
"type": "function"
}
},
{
"name": "flat",
"description": "Removes elevation (shadow) added to element when using the **solo** or **solo-inverted** props",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "full-width",
"description": "Designates input type as full-width",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "height",
"description": "Sets the height of the input",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"number",
"string"
]
}
},
{
"name": "hide-details",
"description": "Hides hint and validation errors. When set to `auto` messages will be rendered only if there's a message (hint, error message, counter value etc) to display",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "undefined",
"value": {
"kind": "expression",
"type": [
"boolean",
"string"
]
}
},
{
"name": "hide-no-data",
"description": "Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open.",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "hide-selected",
"description": "Do not display in the select menu items that are already selected",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"default": "false",
"value": {
"kind": "expression",
"type": "boolean"
},
"type": "boolean"
},
{
"name": "hint",
"description": "Hint text",
"doc-url": "https://www.vuetifyjs.com/api/v-autocomplete#props",
"defa