Category: Vue

Sometimes, we want to set background color with Vuetify

In this article, we’ll look at how to set background color with Vuetify.

How to set background color with Vuetify?

To set background color with Vuetify, we can add our own theme colors.

For instance, we write

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

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
        background: colors.indigo.lighten5,
        //...
      },
      dark: {
        primary: colors.blue.lighten3,
        background: colors.indigo.base,
        //...
      },
    },
  },
});
//...

to add the background color in addition to the existing theme colors.

Then we can apply the background color by writing

<template>
  <v-app
    id="main"
    :style="{ background: $vuetify.theme.themes[theme].background }"
  >
    <v-content> ... </v-content>
  </v-app>
</template>

where theme is the property key that we have in themes.

Conclusion

To set background color with Vuetify, we can add our own theme colors.

Sometimes, we want to handle errors in Vue.js with Vuex and Axios.

In this article, we’ll look at how to handle errors in Vue.js with Vuex and Axios.

How to handle errors in Vue.js with Vuex and Axios?

To handle errors in Vue.js with Vuex and Axios, we can add a response interceptor.

For instance, we write

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    store.commit("ERROR", error);
    return Promise.reject(error);
  }
);

to call axios.interceptors.response.use with the error handler in the 2nd argument.

In it, we call store.commit to put the error data in the Vuex store by committing the ERROR mutation.

And then we return a rejected promise with the error as the rejection reason.

Then we can catch any request errors with a catch block:

try {
  await axios.get("...");
} catch (e) {
  console.log(e);
}

Conclusion

To handle errors in Vue.js with Vuex and Axios, we can add a response interceptor.

Sometimes, we want to include global functions in Vue.js.

In this article, we’ll look at how to include global functions in Vue.js.

How to include global functions in Vue.js?

To include global functions in Vue.js, we can create our own plugin.

For instance, we write

MyPlugin.install = (Vue, options) => {
  Vue.myGlobalMethod = () => {
    //...
  };

  Vue.directive("my-directive", {});

  Vue.prototype.$myMethod = function () {
    //...
  };
};

to create the MyPlugin plugin.

We set its install method to a function that adds a global static method with

Vue.myGlobalMethod = () => {
  //...
};

We add a directive with

Vue.directive("my-directive", {});

And we add an instance method with

Vue.prototype.$myMethod = function () {
  //...
};

Then we register the plugin with Vue.use by writing

Vue.use(MyPlugin)

We can call global static methods with

Vue.myGlobalMethod(parameters);

And we call component instance methods with

this.$myMethod 

in a component.

Conclusion

To include global functions in Vue.js, we can create our own plugin.

Sometimes, we want to show element when input has focus with Vue.js.

In this article, we’ll look at how to show element when input has focus with Vue.js.

How to show element when input has focus with Vue.js?

To show element when input has focus with Vue.js, we can add a flag that’s updated when we focus on and away from the input.

For instance, we write

<template>
  <div id="app">
    <input
      type="search"
      v-model="query"
      @focus="showDiv = true"
      @blur="showDiv = false"
    />
    <div v-if="showDiv">...</div>
  </div>
</template>

to add the showDiv flag and set it to true when we focus on the input with @focus="showDiv = true".

Likewise, we set showDiv to false when we focus away from the input with @blur="showDiv = false".

Then we showDiv to control when the div below the input is shown with v-if="showDiv".

Conclusion

To show element when input has focus with Vue.js, we can add a flag that’s updated when we focus on and away from the input.

Sometimes, we want to direct Vue CLI to put built project files in different directories.

In this article, we’ll look at how to direct Vue CLI to put built project files in different directories.

How to direct Vue CLI to put built project files in different directories?

To direct Vue CLI to put built project files in different directories, we can set the outputDir and assetsDir options in vue.config.js.

For instance, we write

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "../backend/templates/dist"),
  assetsDir: "../../static/assets",
};

to set the outputDir to a path that’s different from the default to put the built files in that path.

And we set the assetDir option to a path that we want to put the asset files that goes with the app into a folder that’s different from the default.

Conclusion

To direct Vue CLI to put built project files in different directories, we can set the outputDir and assetsDir options in vue.config.js.