Category: Vue

Sometimes, we want to render a newline character in Vue.js.

In this article, we’ll look at how to render a newline character in Vue.js.

How to render a newline character in Vue.js?

To render a newline character in Vue.js, we add the white-space: pre CSS style.

For instance, we write

<template>
  <div id="app">
    <span style="white-space: pre">Some whitespaced content</span>
  </div>
</template>

to add the white-space: pre style to the span to render the newline characters in the span text content.

Conclusion

To render a newline character in Vue.js, we add the white-space: pre CSS style.

Sometimes, we want to add optional parameters with Vue Router.

In this article, we’ll look at how to add optional parameters with Vue Router.

How to add optional parameters with Vue Router?

To add optional parameters with Vue Router, we can append a ? after the route parameter placeholder.

For instance, we write

const routes = [
  {
    path: "/offers/:member?",
    //...
  },
];

//...

to make the member URL parameter optional.

Conclusion

To add optional parameters with Vue Router, we can append a ? after the route parameter placeholder.

Sometimes, we want to use setTimeout in Vue.js.

In this article, we’ll look at how to use setTimeout in Vue.js.

How to use setTimeout in Vue.js?

To use setTimeout in Vue.js, we just call it directly.

For instance, we write

<script>
export default {
  methods: {
    addToBasket() {
      const item = this.photo;
      this.$http.post("/api/buy/addToBasket", item);
      this.basketAddSuccess = true;
      setTimeout(() => (this.basketAddSuccess = false), 2000);
    },
  },
};
</script>

to call setTimeout in addToBasket to run

this.basketAddSuccess = false

after 2000 milliseconds.

Conclusion

To use setTimeout in Vue.js, we just call it directly.

Sometimes, we want to reload a page with Vue Router

In this article, we’ll look at how to reload a page with Vue Router.

How to reload a page with Vue Router?

To reload a page with Vue Router, we can call this.$router.go().

For instance, we write

this.$router.go()

to reload the page.

this.$router.go() calls window.history.go to reload the page.

Conclusion

To reload a page with Vue Router, we can call this.$router.go().

Sometimes, we want to retry original request and access original promise with Axios request interceptors.

In this article, we’ll look at how to retry original request and access original promise with Axios request interceptors.

How to retry original request and access original promise with Axios request interceptors?

To retry original request and access original promise with Axios request interceptors, we can call axios.request with the error.config object.

For instance, we write

axios.interceptors.response.use(
  (response) => response,
  async (error) => {
    const status = error?.response?.status;
    if (status === 401) {
      await refreshToken(store);
      error.config.headers[
        "Authorization"
      ] = `Bearer ${store.state.auth.token}`;
      error.config.baseURL = undefined;
      return axios.request(error.config);
    }

    return Promise.reject(error);
  }
);

to check if the response status is 401 with

status === 401

Then we call refreshToken and then get the token from the store and set it as the value of the Authorization request header.

And then we call axios.request with the error.config and return the returned promise to retry the request.

Conclusion

To retry original request and access original promise with Axios request interceptors, we can call axios.request with the error.config object.