Vuetify — Resizing 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.

Resize Directive

We can use the v-resize directive to call a function when the window resizes.

For example, we can use it by writing:

<template>
  <v-row v-resize="onResize" align="center" justify="center">
    <v-subheader>Window Size</v-subheader>
    {{ windowSize }}
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    windowSize: {
      x: 0,
      y: 0,
    },
  }),

  mounted() {
    this.onResize();
  },

  methods: {
    onResize() {
      this.windowSize = { x: window.innerWidth, y: window.innerHeight };
    },
  },
};
</script>

We add the v-resize directive on the v-row so that we can run the onResize method when the window resizes.

Then we’ll see the value of the this.windowSize state on the template.

Ripple Directive

The v-ripple directive lets us show action from a user.

It can be applied to any block-level element.

For example, we can write:

<template>
  <div v-ripple class="text-center elevation-2 pa-12 headline">v-ripple</div>
</template>
<script>
export default {
  name: "HelloWorld",
};
</script>

Then when we click on the div, we’ll see a ripple effect shown because of the v-ripple directive.

Custom Ripple Color

The ripple’s color can be changed.

For instance, we can write:

<template>
  <v-list>
    <v-list-item
      v-for="color in ['primary', 'secondary', 'info', 'success', 'warning', 'error']"
      :key="color"
      v-ripple="{ class: `${color}--text` }"
    >
      <v-list-item-title>{{ color }}</v-list-item-title>
    </v-list-item>
  </v-list>
</template>
<script>
export default {
  name: "HelloWorld",
};
</script>

We have the v-ripple directive with the class option with the `${color} — text` class to set the ripple color.

Centered Ripple

The ripple effect can be centered.

We can do this with the center property:

<template>
  <div v-ripple="{ center: true }" class="text-center elevation-2 pa-12 headline">centered ripple</div>
</template>
<script>
export default {
  name: "HelloWorld",
};
</script>

Ripple in Components

The ripple prop lets us control the ripple effect.

For instance, we can write:

<template>
  <v-row class="py-12" justify="space-around">
    <v-btn color="primary">default ripple</v-btn>
    <v-btn :ripple="false" color="primary">no ripple</v-btn>
    <v-btn :ripple="{ center: true }" color="primary">centered ripple</v-btn>
    <v-btn :ripple="{ class: 'red--text' }" text>red ripple</v-btn>
  </v-row>
</template>
<script>
export default {
  name: "HelloWorld",
};
</script>

to change the ripple options with the ripple prop on the v-btn .

Scrolling Directive

The v-scroll directive lets us provide callbacks when the window, target or the element itself is scrolled.

For example, we can write:

<template>
  <div>
    <v-row justify="center" align="center">
      <v-subheader>Offset Top</v-subheader>
      {{ offsetTop }}
    </v-row>
    <v-container id="scroll-target" style="max-height: 400px" class="overflow-y-auto">
      <v-row
        v-scroll:#scroll-target="onScroll"
        align="center"
        justify="center"
        style="height: 1000px"
      ></v-row>
    </v-container>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data: () => ({
    offsetTop: 0,
  }),

  methods: {
    onScroll(e) {
      this.offsetTop = e.target.scrollTop;
    },
  },
};
</script>

We have the v-scroll directive with the #scroll-target argument to watch the scrolling of the element with ID scroll-target .

Then when we scroll the container, we see the latest offsetTop value displayed.

Conclusion

Vuetify provides us with various directives to watch resizing and scrolling.