Category: Vuetify

Vuetify is a popular UI framework for Vue apps.

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

Toggle Navigation Drawers

We can toggle the navigation drawer by using the v-app-bar-nav-icon component.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card class="mx-auto overflow-hidden" height="400">
          <v-app-bar color="deep-purple" dark>
            <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>

             <v-toolbar-title>Title</v-toolbar-title>
          </v-app-bar>

          <v-navigation-drawer v-model="drawer" absolute temporary>
            <v-list nav dense>
              <v-list-item-group v-model="group" active-class="deep-purple--text text--accent-4">
                <v-list-item>
                  <v-list-item-icon>
                    <v-icon>mdi-home</v-icon>
                  </v-list-item-icon>
                  <v-list-item-title>Home</v-list-item-title>
                </v-list-item>

<v-list-item>
                  <v-list-item-icon>
                    <v-icon>mdi-account</v-icon>
                  </v-list-item-icon>
                  <v-list-item-title>Account</v-list-item-title>
                </v-list-item>
              </v-list-item-group>
            </v-list>
          </v-navigation-drawer>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We have the v-navigation-drawer to display a menu on the left side.

When it’s displayed depends on the drawer state.

If it’s true , then it’ll be displayed.

When we click on the v-app-ba-nav-icon , then we make it true .

Scroll Threshold

We can set a scroll threshold on the v-app-bar .

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card class="overflow-hidden">
          <v-app-bar
            absolute
            color="#43a047"
            dark
            shrink-on-scroll
            prominent
            src="https://picsum.photos/1920/1080?random"
            fade-img-on-scroll
            scroll-target="#scrolling"
            scroll-threshold="500"
          >
            <template v-slot:img="{ props }">
              <v-img v-bind="props" gradient="to top right, rgba(55,236,186,.7), lightblue"></v-img>
            </template>

            <v-app-bar-nav-icon></v-app-bar-nav-icon>

            <v-toolbar-title>Title</v-toolbar-title>

            <v-spacer></v-spacer>

            <v-btn icon>
              <v-icon>mdi-magnify</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>

            <v-btn icon>
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </v-app-bar>
          <v-sheet id="scrolling" class="overflow-y-auto" max-height="600">
            <v-container style="height: 1500px;"></v-container>
          </v-sheet>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We added the scroll-threshold prop to make the toolbar change from a taller toolbar with a background image to one with that has a solid background without an image.

The fade-img-on-scroll prop lets us make the image on the app bar disappear when we scroll.

Also, we’ve to set the scroll-target to the selector of the div we’re watching for scrolling.

Conclusion

We can add a navigation drawer to our app bar.

Also, we can make the app bar display differently when we scroll.

Vuetify is a popular UI framework for Vue apps.

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

Badges

The v-badge component lets us add an avatar-like icon or text onto the component to highlight information to the user.

They appear as superscripts or subscripts.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-toolbar>
          <v-tabs dark background-color="primary" grow>
            <v-tab>
              <v-badge color="pink" dot>One</v-badge>
            </v-tab>

            <v-tab>
              <v-badge color="green" content="6">Two</v-badge>
            </v-tab>

            <v-tab>
              <v-badge color="deep-purple accent-4" icon="mdi-vuetify">Three</v-badge>
            </v-tab>
          </v-tabs>
        </v-toolbar>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We add badges to tab links with the v-tab component.

The color can be changed with the color prop.

icon lets us change the icon.

Show Badge on Hover

We can make a badge shows on hover with the v-hover component.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-badge
          :value="hover"
          color="deep-purple accent-4"
          content="1000"
          left
          transition="slide-x-transition"
        >
          <v-hover v-model="hover">
            <v-icon color="grey lighten-1" large>mdi-account-circle</v-icon>
          </v-hover>
        </v-badge>
      </v-col>
    </v-row>
  </v-container>
</template>

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

to add a badge that shows on hover.

The hover state is controlled by the hover state.

v-model son the v-hover component sets the hover state.

Dynamic Notifications

We can create dynamic notifications with badges.

The content can be controlled with the content prop.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <div>
          <v-btn class="mx-1" color="primary" @click="messages++">Send Message</v-btn>

          <v-btn class="mx-1" color="error" @click="messages = 0">Clear Notifications</v-btn>
        </div>

        <v-badge :content="messages" :value="messages" color="green" overlap>
          <v-icon large>mdi-email</v-icon>
        </v-badge>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We have the Send Message button that increments the message state.

This causes the content to update with the latest message value.

Banners

The v-banner component is used as a message for users with 1 to 2 actions.

It can have a single line or multiple lines.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-banner single-line :sticky="sticky">
          Hello world.
          <template v-slot:actions>
            <v-btn text color="deep-purple accent-4">Get Online</v-btn>
          </template>
        </v-banner>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We have the v-banner component with the single-line prop to display a single line banner.

The sticky controls whether the banner is sticky or not.

Two-Line Banner

We can add a 2 line banner to store more data.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-banner>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus nec sem id malesuada.
          Curabitur lacinia sem et turpis euismod, eget elementum ex pretium.
          <template
            v-slot:actions
          >
            <v-btn text color="primary">Dismiss</v-btn>
            <v-btn text color="primary">Retry</v-btn>
          </template>
        </v-banner>
      </v-col>
    </v-row>
  </v-container>
</template>

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

to add a longer message.

The actions slot has the action buttons.

Conclusion

We can add badges and banners to our app with Vuetify.

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.

Vuetify is a popular UI framework for Vue apps.

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

Alerts

We create an alert with v-alert component.

To do that, we 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 can add a border with:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert border="top" color="red lighten-2" dark>red border</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We set the color to red to make a red border.

border is set to top to add the border to the top.

Colored Border

We can set the colored-border prop to add a colored border:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert border="left" colored-border color="deep-purple accent-4" elevation="2">lorem ipsum</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

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

Dense Alert

We can make the alert box smaller with the dense prop.

For example, we can write:

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

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

to make it denser with the dense prop.

Icon

We can add an icon to it with the icon prop:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert color="#2A3B4D" dark icon="mdi-firework" dense>icon alert</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We add a firework icon to the left with the icon prop.

Outlined

We can make the alert displayed as an outline version with:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert outlined color="purple">
          <div class="title">Lorem Ipsum</div>
          <div>outlined alert.</div>
        </v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

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

Then outlined prop makes the outline.

Prominent

The prominent prop provides a more pronounced alert by increasing the height and adding a halo to the icon:”

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert
          color="blue-grey"
          dark
          dense
          icon="mdi-school"
          prominent
        >Sed augue ipsum, egestas nec</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We added the prominent prop and everything else will be applied automatically.

Text

We can add the text prop to create a simple alert variant with only text.

It can be combined with the dense , prominent and outlined props:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-alert text outlined color="deep-orange" icon="mdi-fire">Nullam tincidunt adipiscing enim</v-alert>
      </v-col>
    </v-row>
  </v-container>
</template>

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

We only have text in our alert.

Conclusion

We can create alerts with various styles provided by Vuetify.

Vuetify is a popular UI framework for Vue apps.

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

Visibility

Vuetify provides us with some visibility classes.

They include:

• Hidden on all .d-none
• Hidden only on xs .d-none .d-sm-flex
• Hidden only on sm .d-sm-none .d-md-flex
• Hidden only on md .d-md-none .d-lg-flex
• Hidden only on lg .d-lg-none .d-xl-flex
• Hidden only on xl .d-xl-none
• Visible on all Visible only on xs .d-flex .d-sm-none
• Visible only on sm .d-none .d-sm-flex .d-md-none
• Visible only on md .d-none .d-md-flex .d-lg-none
• Visible only on lg .d-none .d-lg-flex .d-xl-none
• Visible only on xl .d-none .d-xl-flex

Display in Print

Vuetify also provides classes for display stuff in print. They are:

• .d-print-none
• .d-print-inline
• .d-print-inline-block
• .d-print-block
• .d-print-table
• .d-print-table-row
• .d-print-table-cell
• .d-print-flex
• .d-print-inline-flex

Elevation Helpers

We can change the depth of an element with the elevation helpers.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card :elevation="10" height="100" width="100">
          <v-row class="fill-height" align="center" justify="center" v-text="'foo'"></v-row>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We have the v-card component with the elevation prop to set the elevation.

Now we’ll see a shadow in an element.

Flexbox

Vuetify supports flexbox for layout.

To use it, we can use the classes that it provides.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card class="d-flex pa-2" outlined tile>
          <div>flexbox</div>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We added the v-card with the d-flex class to make the card have a flex layout.

Flexbox classes include:

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex

Flex Direction

We can change the flex-direction with the provides classes.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card class="d-flex flex-row mb-6" color="grey lighten-2" flat tile>
          <v-card v-for="n in 3" :key="n" class="pa-2" outlined tile>item {{ n }}</v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "HelloWorld",

  data: () => ({}),
};
</script>

We have the flex-row class to show the divs in a row.

Vuetify also provides the flex-column-reverse classes to change the orientation of the flexbox container.

Conclusion

We can change the visibility and layout of elements with Vuetify.