DEV Community

loading...
Cover image for Vue3 Chip

Vue3 Chip

primetek profile image PrimeTek ・1 min read

Vue3 Chip represents entities using icons, labels and images.
It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Chip from 'primevue/chip';
Enter fullscreen mode Exit fullscreen mode

Getting Started

Chip can display labels, icons and images.

<Chip label="Text Only" />
<Chip label="Text with icon" icon="pi pi-check" />
<Chip label="Text with image" image="user.png" />
Enter fullscreen mode Exit fullscreen mode

Removable

Setting removable property displays an icon to close the chip, the optional remove event is available to get notified when a chip is hidden.

<Chip label="Text" removable />
Enter fullscreen mode Exit fullscreen mode

Templating

Content can easily be customized with the default slot instead of using the built-in modes.

<Chip>
   Content
</Chip>
Enter fullscreen mode Exit fullscreen mode

Theming

Chip supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Chip showcase for demos and documentation.

Discussion (0)

pic
Editor guide