Category: Vue Answers

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.

Sometimes, we want to add global CSS in Vue.js.

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

How to add global CSS in Vue.js?

To add global CSS in Vue.js, we can import our global CSS file in main.js.

For instance, in main.js, we write

import "./assets/css/main.css";

to import the styles in ./assets/css/main.css globally.

Conclusion

To add global CSS in Vue.js, we can import our global CSS file in main.js.