Vuetify is a popular UI framework for Vue apps.

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

Extended Toolbar

A toolbar can be extended with the extension slot:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card color="grey lighten-4" flat height="200px" tile>
          <v-toolbar extended>
            <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-toolbar>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template><script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

Extension Height

The extension height can be changed with the extension-height prop:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card color="grey lighten-4" flat height="200px" tile>
          <v-toolbar extended extension-height="150">…

Vuetify is a popular UI framework for Vue apps.

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

Buttons

We can add buttons with the v-btn component.

For instance, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <div class="my-2">
          <v-btn text small color="primary">Primary</v-btn>
        </div>
      </v-col>
    </v-row>
  </v-container>
</template><script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to add a button.

The small prop makes it small.

And the color prop changes the color.

The text prop removes the raised style.

Raised Button

A raised button is the default style.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <div class="my-2">
          <v-btn small color="primary">Primary</v-btn>
        </div>
      </v-col>
    </v-row>
  </v-container>…

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at some basic coding and design patterns.

Privileged Methods

Privilege methods is a term coined by Douglas Crockford.

These are public methods that can access private methods and properties.

They act as a bridge to make some private functionality available in a controlled manner.

For instance, we can write:

let APP = {};
APP.dom = (() => {
  const setStyle = function(el, prop, value) {
    console.log('setStyle');
  };  const getStyle = function(el, prop) {
    console.log('getStyle');
  };  return {
    setStyle,
    getStyle,
    //... …

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at the DOM.

DOM Access Shortcuts

Using childNodes, parentNode, nodeName, nodeValue, and attributes properties let us traverse the DOM.

However, they’re very inconvenient to use if we have any complex document.

Deeper nodes are hard to access and there’s no easy way to search for the items we want.

We have various shortcut methods that let us find the DOM element we want in an easier way.

The methods include getElementsByTagName(), getElementsByName(), getElementById() , querySelector() , and querySelectorAll() .

The getElementsByTagName method lets us get all the elements with a given tag name. …

Vuetify is a popular UI framework for Vue apps.

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

Breadcrumbs

The v-breadcrumbs component lets us display a navigation helper on pages.

It can accept a Material Icons icon or text characters as a divider.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-breadcrumbs :items="items"></v-breadcrumbs>
      </v-col>
    </v-row>
  </v-container>
</template><script>
export default {
  name: "HelloWorld",
  data: () => ({
    items: [
      {
        text: "Dashboard",
        disabled: false,
        href: "breadcrumbs_dashboard",
      },
      {
        text: "Foo",
        disabled: false,
        href: "foo",
      },
      {
        text: "Bar",
        disabled: true,
        href: "bar",
      },
    ],
  }),
}…

Vuetify is a popular UI framework for Vue apps.

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

Toolbars

We can add toolbars with the v-toolbar component.

For example, we can write:

<template>
  <v-container>
    <v-row class="text-center">
      <v-col col="12">
        <v-card color="grey lighten-4" flat height="200px" tile>
          <v-toolbar prominent extended>
            <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-toolbar>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template><script>
export default {
  name: "HelloWorld",
  data: () => ({}),
};
</script>

to add a toolbar with the v-toolbar component. …

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at some basic coding and design patterns.

Lazy Definition

The lazy definition pattern is where we assign the function to a property when we run it.

For instance, we can write:

const APP = {};
APP.click = {
  addListener(el, type, fn) {
    if (el.addEventListener) {
      APP.click.addListener = function(el, type, fn) {
        el.addEventListener(type, fn, false);
      };
    } else if (el.attachEvent) {
      APP.click.addListener = function(el, type, fn) {
        el.attachEvent(`on${type}`, fn);
      };
    } else {
      APP.click.addListener = function(el, type, fn) {
        el[`on${type}`] = fn;
      };
    }
    APP.click.addListener(el, …

Vuetify is a popular UI framework for Vue apps.

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

Prominent App Bar with Scroll Shrink and Image, Fading on Scroll

We can add the fade-img-on-scroll prop to v-app-bar to make the background image of our app bar disappear on scroll.

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="green"
            dark
            shrink-on-scroll
            prominent
            src="https://picsum.photos/1920/1080?random"
            fade-img-on-scroll
            scroll-target="#scrolling"
          >
            <template v-slot:img="{ props }">
              <v-img
                v-bind="props"
                gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
              ></v-img>
            </template>            <v-app-bar-nav-icon></v-app-bar-nav-icon>            <v-toolbar-title>Title</v-toolbar-title>…