Category: Vue

Sometimes, we want to import Vue.js components with Webpack.

In this article, we’ll look at how to import Vue.js components with Webpack.

How to import Vue.js components with Webpack?

To import Vue.js components with Webpack, we should register it by putting it into the components property object.

For instance, we write

<template>
  <top-bar></top-bar>
  <div class="message">{{ message }}</div>
</template>

<script>
import TopBar from "./top-bar";

export default {
  components: {
    TopBar,
  },
  data() {
    return {
      message: "Hello World",
    };
  },
};
</script>

to import the TopBar component with

import TopBar from "./top-bar";

Then we register the TopBar component with

components: {
  TopBar,
}

And then we can use it in our template with

<top-bar></top-bar>

Conclusion

To import Vue.js components with Webpack, we should register it by putting it into the components property object.

Sometimes, we want to disable source maps in production for a Vue.js app.

In this article, we’ll look at how to disable source maps in production for a Vue.js app.

How to disable source maps in production for a Vue.js app?

To disable source maps in production for a Vue.js app, we can set the productionSourceMap option to false in vue.config.js.

For instance, we write

module.exports = {
  productionSourceMap: false,
};

to set productionSourceMap to false.

Conclusion

To disable source maps in production for a Vue.js app, we can set the productionSourceMap option to false in vue.config.js.

Sometimes, we want to fix ‘Vue is not defined’ with Vue.js.

In this article, we’ll look at how to fix ‘Vue is not defined’ with Vue.js.

How to fix ‘Vue is not defined’ with Vue.js?

To fix ‘Vue is not defined’ with Vue.js, we add the Vue script before we create Vue instance.

For instance, we write

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Then we write

<script>
  const demo = new Vue({
    el: "#app",
    data: {
      message: "Hello!",
    },
  });
</script>

to create a Vue instance after the Vue script tag.

Conclusion

To fix ‘Vue is not defined’ with Vue.js, we add the Vue script before we create Vue instance.

Sometimes, we want to use 2 instances of Axios with different base URL in the same app with Vue.js.

In this article, we’ll look at how to use 2 instances of Axios with different base URL in the same app with Vue.js.

How to use 2 instances of Axios with different base URL in the same app with Vue.js?

To use 2 instances of Axios with different base URL in the same app with Vue.js, we create 2 axios instances.

For instance, we write

const instance = axios.create({
  baseURL: "https://example.com/api/",
  timeout: 1000,
  headers: { "X-Custom-Header": "foobar" },
});

to call axios.create to create an axios instance with a baseURL set.

We just repeat this with a different baseURL to create a new instance with the 2nd base URL.

Conclusion

To use 2 instances of Axios with different base URL in the same app with Vue.js, we create 2 axios instances.

Sometimes, we want to fix pushing to Vuex store array not working in Vue.js.

In this article, we’ll look at how to fix pushing to Vuex store array not working in Vue.js.

How to fix pushing to Vuex store array not working in Vue.js?

To fix pushing to Vuex store array not working in Vue.js, we should commit the mutation to change the array state.

For instance, we write

const store = new Vuex.Store({
  state: {
    customers: [{ id: 1, name: "user 1" }],
  },
  mutations: {
    addCustomer(state, customer) {
      state.customers.push(customer);
    },
  },
});

to add the addCustomer mutation that calls state.customers.push to add an entry to the customers state.

And then in our component, we write

<script>
//...
export default {
  //...
  methods: {
    addCustomer() {
      store.commit("addCustomer", { id: 2, name: "User 2" });
    },
  },
  //...
};
</script>

to call store.commit with 'addCustomer' and the item to add to commit the addCustomer mutation.

Conclusion

To fix pushing to Vuex store array not working in Vue.js, we should commit the mutation to change the array state.