Category: Vue

Vuetify is a popular UI framework for Vue apps.

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

Flex align-content

We can add the align-content classes to change the alignment of flexbox content.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card
          class="d-flex align-content-start flex-wrap"
          color="grey lighten-2"
          flat
          tile
          min-height="200"
        >
          <v-card v-for="n in 10" :key="n" class="pa-2" outlined tile>item</v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

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

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

We have the align-content-start class to align the content to the left.

There are other classes for other alignments.

Flex Grow and Shrink

Vuetify has the flex-{condition}-{value} classes to grow and shrink the items.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="2" class="flex-grow-0 flex-shrink-0">
        <v-card class="pa-2" outlined tile>2 column wide</v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

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

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

to create a column 2 columns wide and use the flex-grow-0 and flex-shrink-0 classes to fill the container.

Float

We can apply a custom float with Vuetify classes.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <div>
          <div class="float-left">Float left</div>
          <br />
          <div class="float-right">Float right</div>
          <br />
          <div class="float-none">Don't float</div>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

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

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

We have float-left class to float left.

float-right floats right.

float-none disables float.

Responsive

Floats can be applied with some breakpoints.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <div>
          <div class="float-sm-left">sm</div>
          <br />
          <div class="float-md-left">md</div>
          <br />
          <div class="float-lg-left">lg</div>
          <br />
          <div class="float-xl-left">xl</div>
          <br />
        </div>
      </v-col>
    </v-row>
  </v-container>
</template>

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

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

We have the breakpoint in the class name to only apply the float if the breakpoint is the given one or wider.

Spacing

Spacing can be changed with classes in the following format:

{property}{direction}-{size}

property can be:

• m – applies margin
• p – applies padding

direction can be:

• t – applies the spacing for margin-top and padding-top
• b – applies the spacing for margin-bottom and padding-bottom
• l – applies the spacing for margin-left and padding-left
• r – applies the spacing for margin-right and padding-right
• s – applies the spacing for margin-left/padding-left (in LTR mode) and margin-right/padding-right (in RTL mode)
• e – applies the spacing for margin-right/padding-right (in LTR mode) and margin-left/padding-left (in RTL mode)
• x – applies the spacing for both *-left and *-right
• y – applies the spacing for both *-top and *-bottom
• a – applies the spacing for the property in all directions

size is 0 to 16 to set the size from 0 to 64px.

n1 to n16 set the margin to -4px to -64px.

We can use mx-auto to set the margin size automatically:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card class="mx-auto" color="white" width="200px">
          <v-card-text>Centered</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

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

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

We can change the padding by writing:

<template>
  <v-container>
    <v-row class="text-center">
      <v-card class="pa-md-4 mx-lg-auto" color="white" width="250px">
        <v-card-text>text</v-card-text>
      </v-card>
    </v-row>
  </v-container>
</template>

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

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

We have the pa-md-4 class to change the padding for md breakpoint and up to 16px.

Conclusion

Vuetify provides us with many classes for changing margins and padding.

Vuetify is a popular UI framework for Vue apps.

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

Flex Justify

We can justify-content in a flexbox container with the classes provided by Vuetify.

For example, we can write:

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

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

  data: () => ({
    justify: ["start", "end", "center", "space-between", "space-around"],
  }),
};
</script>

to set the justification of our content to what we want.

There are also responsive variants of the classes.

Flex Align

Vuetify also provides us with flex align classes to align content.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card
          v-for="a in align"
          :key="a"
          :class="`d-flex align-${a} mb-6`"
          flat
          height="100"
          tile
        >
          <v-card v-for="n in 3" :key="n" class="pa-2" outlined tile>item</v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

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

  data: () => ({
    align: ["start", "end", "center", "baseline", "stretch"],
  }),
};
</script>

to align our content our way.

We have the d-flex and align classes to align the containers in various ways.

Flex Align Self

We can use the align-self classes to apply the align-self property.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card
          v-for="j in justify"
          :key="j"
          class="d-flex mb-6"
          height="100"
        >
          <v-card
            v-for="n in 3"
            :key="n"
            class="pa-2"
            :class="[n === 1 && `align-self-${j}`]"
          >{{ n === 1 ? 'Aligned flex item' : 'Flex item' }}</v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

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

  data: () => ({
    justify: ["start", "end", "center", "baseline", "auto", "stretch"],
  }),
};
</script>

We have the align-self classes to align the classes our way.

Flex Wrap

Vuetify also provides the flex wrap classes.

For example, we can write:

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

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

  data: () => ({
    justify: ["start", "end", "center", "baseline", "auto", "stretch"],
  }),
};
</script>

We have the flex-nowrap to prevent wrapping.

The general format of the classes is flex-{breakpoint}-{condition} .

Flex Order

We can switch the visual order of the flex items with the order classes.

So we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <v-card class="d-flex flex-wrap-reverse" color="grey lighten-2" flat tile>
          <v-card class="order-3 pa-2" outlined tile>First</v-card>
          <v-card class="order-2 pa-2" outlined tile>Second</v-card>
          <v-card class="order-1 pa-2" outlined tile>Third</v-card>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

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

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

We flipped the order with the flex-wrap-reverse class.

Conclusion

Vuetify provides us with various flexbox utilities to lay out our items.

Vuetify is a popular UI framework for Vue apps.

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

Vue CLI Install

The easiest way to create a Vuetify Vue app is to use the Vue CLI.

We create a project directory, go into it, and run:

npx vue create .

We choose the options we want when prompted.

Once we did that, we run:

vue add vuetify

to add the Vuetify files.

We choose Default when prompted.

This is the recommended configuration.

It comes with all the components and assets we need to build an app with it.

Colors

Once we did that, we can set the colors by using the classes.

So we can write:

<div class="red">

or

<span class="red--text">

and to set the colors to red.

We can also change the colors in vuetify.js :

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.red.darken1,
        secondary: colors.red.lighten4,
        accent: colors.indigo.base
      },
    },
  },
});

We import the colors object and set the colors to what we want.

SASS Colors

We can also import SASS colors by writing:

@import '~vuetify/src/styles/main.sass';

They can also be imported in the src/index.js file writing;

import './src/sass/main.scss'
// OR
require('./src/sass/main.scss')

This works if we configured our Vue CLI to use SASS.

Content

We can create content with various elements.

Vuetify provides styles for them.

For instance, we can create a blockquote by writing:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <blockquote class="blockquote">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</blockquote>
      </v-col>
    </v-row>
  </v-container>
</template>

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

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

We just put them inside a component within the v-container to have the styling applied.

We can do the same for code:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
         <code>&lt;code&gt;</code>
      </v-col>
    </v-row>
  </v-container>
</template>

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

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

Also, we can apply styles to the kbd element:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <kbd>npm install vuetify</kbd>
      </v-col>
    </v-row>
  </v-container>
</template>

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

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

Display Helpers

We can add various classes to add padding, colors, set the display CSS property and more.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col cols="12">
        <div class="d-inline pa-3 deep-purple accent-4 white--text">foo</div>
        <div class="d-inline pa-3 black white--text">bar</div>
      </v-col>
    </v-row>
  </v-container>
</template>

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

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

We create a purple and black divs with some classes.

pa-3 created padding.

d-inline make the divs display inline.

deep-purple , accent-4 , white--text , and black are the color classes.

Conclusion

We can create a Vuetify app with a few commands.

It adds styles to elements and we can also add our own style with the classes it provides.