In this tutorial, we will see chips using vuetifyjs 3 in Vue.js 3 . We will see outlined chips, chips with closable, chips with icon, Before we begin, you need to install and configure Vuetify 3 in Vue 3.
How to Install Vuetify 3 in Vue 3
Vuetify 3 Vue 3 Chips Example
1. Vuetify 3 vue 3 basic chips using v-chip component.
Vue
<template>
<div>
<v-chip>
Chip
</v-chip>
<v-chip variant="outlined">
Chip
</v-chip>
<v-chip variant="elevated">
Chip
</v-chip>
<v-chip variant="text">
Chip
</v-chip>
<v-chip variant="plain">
Chip
</v-chip>
</div>
</template>
2. Vuetify 3 vue 3 Closable chip.
Vue
<template>
<div class="text-center">
<v-chip
v-if="chip"
class="ma-2"
closable
@click:close="chip = false"
>
Closable
</v-chip>
<v-btn
v-if="!chip"
close
color="primary"
dark
@click="chip = true"
>
Reset Chip
</v-btn>
</div>
</template>
<script>
export default {
data () {
return {
chip: true,
}
},
}
</script>
3. Vuetify 3 vue 3 chip with color.
Vue
<template>
<div class="text-center">
<v-chip
class="ma-2"
>
Default
</v-chip>
<v-chip
class="ma-2"
color="primary"
>
Primary
</v-chip>
<v-chip
class="ma-2"
color="secondary"
>
Secondary
</v-chip>
<v-chip
class="ma-2"
color="red"
text-color="white"
>
Red Chip
</v-chip>
<v-chip
class="ma-2"
color="green"
text-color="white"
>
Green Chip
</v-chip>
</div>
</template>
4. .Vuetify 3 vue 3 Draggable chip.
Vue
<template>
<v-row justify="center" align="center">
<v-chip draggable>
Default
</v-chip>
</v-row>
</template>5. Vuetify 3 vue 3 chip with label.
Vue
<template>
<div class="text-center">
<v-chip class="ma-2" label>
Label
</v-chip>
<v-chip class="ma-2" color="pink" label text-color="white">
<v-icon start icon="mdi-label"></v-icon>
Tags
</v-chip>
<v-chip class="ma-2" color="primary" label>
<v-icon start icon="mdi-account-circle-outline"></v-icon>
John Leider
</v-chip>
<v-chip class="ma-2" closable color="cyan" label>
<v-icon start icon="mdi-twitter"></v-icon>
New Tweets
</v-chip>
</div>
</template>
6. Vuetify 3 vue 3 outlined chip with icon.
Vue
<template>
<div class="text-center">
<v-chip
class="ma-2"
color="success"
variant="outlined"
>
<v-icon start icon="mdi-server-plus"></v-icon>
Server Status
</v-chip>
<v-chip
class="ma-2"
color="primary"
variant="outlined"
>
User Account
<v-icon end icon="mdi-account-outline"></v-icon>
</v-chip>
</div>
</template>
7. Vuetify 3 vue 3 chip with size small, medium, large.
Vue
<template>
<div class="text-center">
<v-chip class="ma-2" size="x-small">
x-small chip
</v-chip>
<v-chip class="ma-2" size="small">
small chip
</v-chip>
<v-chip class="ma-2">
Default
</v-chip>
<v-chip class="ma-2" size="large">
large chip
</v-chip>
<v-chip class="ma-2" size="x-large">
x-large chip
</v-chip>
</div>
</template>
8. Vuetify 3 vue 3 chip with icons.
Vue
<template>
<div class="text-center">
<v-chip class="ma-2" color="indigo" text-color="white" prepend-icon="mdi-account-circle">
Mike
</v-chip>
<v-chip class="ma-2" color="orange" text-color="white" append-icon="mdi-star">
Premium
</v-chip>
<v-chip class="ma-2" color="primary" text-color="white" append-icon="mdi-cake-variant">
1 Year
</v-chip>
<v-chip class="ma-2" color="green" text-color="white">
<template v-slot:prepend>
<v-avatar class="green-darken-4">
1
</v-avatar>
</template>
Years
</v-chip>
<v-chip class="ma-2" closable color="teal" text-color="white" prepend-icon="mdi-checkbox-marked-circle"
:model-value="true">
Confirmed
</v-chip>
<v-chip class="ma-2" closable color="teal" text-color="white" close-icon="mdi-delete"
prepend-icon="mdi-checkbox-marked-circle" :model-value="true">
Confirmed
</v-chip>
</div>
</template>
9. Vuetify 3 vue 3 card with chip.
Vue
<template>
<v-card class="mx-auto" max-width="450">
<v-img src="https://cdn.vuetifyjs.com/images/cards/house.jpg" cover :aspect-ratio="16 / 9">
</v-img>
<v-card-title class="flex-column align-start">
<div class="text-h4 mb-2">
Welcome Home...
</div>
<div class="text-h6 font-weight-regular text-grey">
Monday, 12:30 PM, Mostly Sunny
</div>
<div class="d-flex align-center">
<v-avatar size="24" class="me-4">
<v-img src="https://cdn.vuetifyjs.com/images/weather/part-cloud-48px.png" contain></v-img>
</v-avatar>
<span class="text-body-2 text-grey">81° / 62°</span>
</div>
</v-card-title>
<v-divider class="mx-4"></v-divider>
<v-card-text class="d-flex justify-space-between">
<v-chip prepend-icon="mdi-brightness-5">
Turn on lights
</v-chip>
<v-chip prepend-icon="mdi-alarm-check">
Set alarm
</v-chip>
<v-chip icon="mdi-blinds">
Close blinds
</v-chip>
</v-card-text>
</v-card>
</template>
Javed sheikh
Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,
