Vuetify is a popular UI framework for Vue apps.
In this article, we’ll look at how to work with the Vuetify framework.
Intersection Observer
We can add the v-intersect directive to use the Intersection Observer API.
It’s used to detect whether an element is visible within the user’s viewport.
For example, we can use it by writing:
<template>
<div>
<div class="d-flex align-center text-center justify-center">
<v-avatar
:color="isIntersecting ? 'green' : 'red'"
class="mr-3 swing-transition"
size="32"
></v-avatar>
</div>
<v-responsive class="overflow-y-auto" max-height="400">
<v-responsive height="200vh" class="d-flex align-center text-center pa-2">
<v-card
v-intersect="{
handler: onIntersect,
options: {
threshold: [0, 0.5, 1.0]
}
}"
class="mx-auto"
max-width="336"
>
<v-card-title>Title</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet.
</v-card-text>
</v-card>
</v-responsive>
</v-responsive>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
isIntersecting: false,
}),
methods: {
onIntersect(entries, observer) {
this.isIntersecting = entries[0].intersectionRatio >= 0.5;
},
},
};
</script>
We have the v-card inside the v-responsive component.
The overflow-y-auto class lets us scroll the content inside it up and down.
We have another v-responsive component inside it which is taller than the 400px of the outer v-responsive component.
Therefore, we’ll scroll whatever we have inside.
We use the v-intersect directive to let us run a callback when we scroll to check for intersection of the viewport and the card.
The threshold is the portion of the card that’s in the viewport.
The onIntersect method when these thresholds are met.
Now when we scroll, we’ll see the dot change color when the card goes in and out of the viewport.
If we’re using Vuetify with IE11, then we need to add the Intersection Observer API polyfill in order to use this directive.
Mutation Observer
The v-mutate directive uses the Mutation Observer API.
It lets us detect whether an element is updated.
For example, we can write:
<template>
<div>
<div>
<div class="text-center">
<v-btn [@click](http://twitter.com/click "Twitter profile for @click")="content = !content">Change Content</v-btn>
</div>
<v-container>
<v-row>
<v-col cols="12" md="6">
<v-card>
<v-card-title>Card 1</v-card-title>
<div class="title text-center pb-3">Times Mutated: {{ card1 }}</div>
<v-card-text v-mutate="() => onMutate('card1')">
<p
v-for="n in +content + 2"
:key="n"
:class="n === +content + 2 && 'mb-0'"
>Phasellus nec sem in justo pellentesque facilisis.</p>
</v-card-text>
</v-card>
</v-col>
<v-col cols="12" md="6">
<v-card>
<v-card-title>Card 2</v-card-title>
<div class="title text-center pb-3">Times Mutated: {{ card2 }}</div>
<v-card-text v-mutate.once="() => onMutate('card2')">
<p
v-for="n in +content + 2"
:key="n"
:class="n === +content + 2 && 'mb-0'"
>Suspendisse enim turpis.</p>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data: () => ({
content: false,
card1: 0,
card2: 0,
}),
methods: {
onMutate(card) {
this[card]++;
},
},
};
</script>
to detect changes in the cards.
We have the Change Content button to toggle the content state.
In the v-card-text components, we have the v-mutate directive to let us run the onMutate method when we click on the Change Content button.
This is because when the button is clicked, the content value changes.
The card1 and card2 will increment when we click on the Change Content button.
The 2nd card has the once modifier on the v-mutate directive, so card2 will only be incremented once.
Conclusion
We can add the intersection and mutation observers on components with Vuetify directives.
