Vuetify — Transition, Alert, and Scrolling

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Custom Transition

We can create our own transition by using the createSimpleTransition function to create our transition.

First, we define the component in vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import { createSimpleTransition } from 'vuetify/lib/components/transitions/createTransition'

const fadeTransition = createSimpleTransition('v-fade-transition')
Vue.component('v-fade-transition', fadeTransition)
Vue.use(Vuetify);

export default new Vuetify({
});

Then we write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-btn class="ma-2" color="primary" @click="expand = !expand">Expand Transition</v-btn>

        <v-fade-transition>
          <v-card v-show="expand" height="100" width="100" class="mx-auto"></v-card>
        </v-fade-transition>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    expand: false,
  }),
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

We defined the v-fade-transition component with:

const fadeTransition = createSimpleTransition('v-fade-transition')
Vue.component('v-fade-transition', fadeTransition)

Then we defined the classes for it with:

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

The prefix fade should be the same one as the word between v- and -transition so that the transition styles will be applied.

Programmatic Scrolling

We can scroll our page programmatically with Vuetify.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-btn ref="button" block color="primary" @click="$vuetify.goTo('#num-100')">scroll</v-btn>

        <p v-for='n in 100' :key='n' :id="`num-${n}`">{{n}}</p>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the p elements with some IDs.

And we call $vuetify.goTo to scroll to the element with the given selector.

goTo also takes a second argument with some options.

The option object can have the duration , offset , and easing properties.

We can set the options by writing:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-btn ref="button" block color="primary" @click="$vuetify.goTo('#num-100', options)">scroll</v-btn>

        <p v-for="n in 100" :key="n" :id="`num-${n}`">{{n}}</p>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({
    options: {
      duration: 1300,
      offset: 0,
      easing: "easeInOutCubic",
    },
  }),
};
</script>

And we set the option for scrolling.

Alerts

We can add an alert with the v-alert component.

It comes with 4 default styles, which are success , info , warning , and error .

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert type="success">success alert.</v-alert>

        <v-alert type="info">info alert.</v-alert>

        <v-alert type="warning">warning alert.</v-alert>

        <v-alert type="error">error alert.</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

We have the v-alert component with the alerts.

Conclusion

We can scroll programmatically and add alerts with Vuetify.

Also, we can create our own transition components with one function.