Vue Quick Actions is a Vue.js library that provides a fast and easy-to-use action menu component.
npm install vue-quick-actionsVue Quick Actions is a Vue.js library that provides a fast and easy-to-use action menu component.
- Simple and intuitive interface for easy usage
- Dynamic search and filtering of items
- Navigation and selection functionalities with keyboard shortcuts
- Customizable design and styling options
``bash`
npm install vue-quick-actions
or pnpmbash`
pnpm install vue-quick-actions
or if you are using yarn:bash`
yarn add vue-quick-actions
items is where you give the array containing your items.
`html`
`js
import { Item } from 'vue-quick-actions';
const items: Item[] = [
{
key: 'console-write', // Key should be unique
label: "Log 'hey' to console",
onSelect() {
console.log('hey');
}
}
]
`
You can set loading to true when you're lazy loading some items. For example, the code below is a simple example of how you can use loading to show a loading indicator while you're fetching items from an API.
`html
:loading="loading"
@search="handleSearch"
/>
`
search event is triggered when the user searchs, it gives the current query as a parameter.
`html
`
prop is typed as below:`ts
import { Component } from 'vue';interface BaseItem {
key: string;
}
interface NormalItem extends BaseItem {
label?: string;
alias?: string | string[];
icon?: string | Component;
role?: string;
children?: Item[]
onSelect?: () => void;
}
interface SeparatorItem extends BaseItem {
separator: boolean;
label?: string;
}
type Item = NormalItem | SeparatorItem;
`
- Type:
- Required: true
- A unique key representing the current element, __must be unique across all items__.
- Type:
- Default:
- Required for all items except line separators.
- Type:
- Default: Alias is used to match the item when the user types in the search bar. If the user types in the search bar the alias of the item, the item will be selected.
- Type:
- Default: The icon of the item, can be an image src or a component.
- Type:
- Default: The role of the item that will be displayed on the right side of it.
- Type:
- Default: The children of the item. If the item has children, they will only display when the user selects the item or searchs accordingly.
- Type:
- Default: The function that will be called when the user selects the item.
- Type:
- Default: If set to
, the item will be displayed as a line separator. If the label` is also set, the separator will be converted to a small sized label. A separator can't trigger any interactions, it is only meant to separate the content.