Category: Vue

Sometimes, we want to fix Vue Router return 404 when revisit to the URL.

In this article, we’ll look at how to fix Vue Router return 404 when revisit to the URL.

How to fix Vue Router return 404 when revisit to the URL?

To fix Vue Router return 404 when revisit to the URL, we should make sure we redirect all URLs to index.html.

For instance, if we host our Vue app in Apache, we can add the following into the .htaccess file.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</ifModule>

We match all URLs with

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

And then we redirect all the URLs to index.html with

RewriteRule . /index.html [L]

Conclusion

To fix Vue Router return 404 when revisit to the URL, we should make sure we redirect all URLs to index.html.

For instance, if we host our Vue app in Apache, we can add the following into the .htaccess file.

Sometimes, we want to update an array with Vue.js and Vue.set()

In this article, we’ll look at how to update an array with Vue.js and Vue.set().

How to update an array with Vue.js and Vue.set()?

To update an array with Vue.js and Vue.set(), we call Vue.set or this.$set with the array we want to update, the index of the array item we want to update, and the item we replace the existing item at the index with.

For instance, we write

new Vue({
  el: "#app",
  data: {
    items: ["10-03-2017", "12-03-2017"],
  },
  methods: {
    update() {
      this.$set(items, 1, "12-03-2022");
    },
  },
});

to call this.$set with the items array, index 1, and "12-03-2022" to update the 2nd items entry to "12-03-2022".

This change will be picked up by Vue, so re-rendering will happen.

We use Vue.set the same as this.$set.

Conclusion

To update an array with Vue.js and Vue.set(), we call Vue.set or this.$set with the array we want to update, the index of the array item we want to update, and the item we replace the existing item at the index with.

Sometimes, we want to watch for nested data with Vue.js.

In this article, we’ll look at how to watch for nested data with Vue.js.

How to watch for nested data with Vue.js?

To watch for nested data with Vue.js, we add a watcher with the deep option set to true.

For instance, we write

<script>
export default {
  watch: {
    item: {
      handler(val) {
        // ...
      },
      deep: true,
    },
  },
};
</script>

to add a watcher for the item reactive property.

We set the deep property to true to watch for changes in all nested properties of item.

Therefore, handler runs whenever the content of item changes.

Conclusion

To watch for nested data with Vue.js, we add a watcher with the deep option set to true.

Sometimes, we want to return promises from Vuex actions.

In this article, we’ll look at how to return promises from Vuex actions.

How to return promises from Vuex actions?

To return promises from Vuex actions, we can add async functions into the actions property.

For instance, we write

const store = {
  //...
  actions: {
    async getUser({ commit }) {
      try {
        const currentUser = await axios.get("/user/current");
        commit("setUser", currentUser);
        return currentUser;
      } catch (err) {
        commit("setUser", null);
        throw "Unable to fetch current user";
      }
    },
    //...
  },
};

to add the getUser actuion method that makes a GET request with axios.get.

And we return the a promise with the response data by returning currentUser.

Also, we call commit to commit the setUser mutation.

Conclusion

To return promises from Vuex actions, we can add async functions into the actions property.

Sometimes, we want to detect click outside element with Vue.js.

In this article, we’ll look at how to detect click outside element with Vue.js.

How to detect click outside element with Vue.js?

To detect click outside element with Vue.js, we can add a directive to detect the clicks.

For instance, we write

Vue.directive("click-outside", {
  bind(el, binding, vnode) {
    el.clickOutsideEvent = (event) => {
      if (!(el == event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener("click", el.clickOutsideEvent);
  },
  unbind(el) {
    document.body.removeEventListener("click", el.clickOutsideEvent);
  },
});

to call Vue.directive to create the click-outside directive.

In the bind method, we check if the click is outside an element with !(el == event.target || el.contains(event.target)).

And if it’s outside, we call the event handler we set as the value of the directive with vnode.context[binding.expression](event).

We listen for clicks by calling document.body.addEventListener with 'click'.

And we unbind the event listener with document.body.removeEventListener.

Conclusion

To detect click outside element with Vue.js, we can add a directive to detect the clicks.