Category: Vue Answers

Sometimes, we want to redirect to requested page after login using Vue Router.

In this article, we’ll look at how to redirect to requested page after login using Vue Router.

How to redirect to requested page after login using Vue Router?

To redirect to requested page after login using Vue Router, we can use the this.$router.push method in our components.

For instance, we write

<script>
//...
export default {
  //...
  submitForm() {
    await authService.login(this.credentials);
    this.$router.push(this.$route.query.redirect || "/");
  },
  //...
};
</script>

to add the submitForm method that calls the authService.login method to authenticate the credentials data stored in this.credentials.

And if authentication is succcesful, we call this.$router.push with this.$route.query.redirect || "/" to redirect to the redirect URL we get from the redirect query parameter.

If redirect query parameter doesn’t exist, then we redirect to /.

Conclusion

To redirect to requested page after login using Vue Router, we can use the this.$router.push method in our components.

Sometimes, we want to file input value change in Vue.js.

In this article, we’ll look at how to file input value change in Vue.js.

How to file input value change in Vue.js?

To file input value change in Vue.js, we can add the @change directive to our file input.

For instance, we write

<template>
  <div>
    <input type="file" @change="previewFiles" multiple />
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    previewFiles(event) {
      console.log(event.target.files);
    },
  },
  //...
};
</script>

to add the file input with

<input type="file" @change="previewFiles" multiple />

The previewFiles method runs when we select files with the file input because we added @change="previewFiles".

In previewFiles, we get the selected files with the event.target.files property.

Conclusion

To file input value change in Vue.js, we can add the @change directive to our file input.

Sometimes, we want to get route by name and parameters with Vue Router.

In this article, we’ll look at how to get route by name and parameters with Vue Router.

How to get route by name and parameters with Vue Router?

To get route by name and parameters with Vue Router, we can use the this.$router.resolve method.

For instance, we write

const props = this.$router.resolve({
  name: "ProductDetail",
  params: { id, slug },
});
console.log(props.href);

to call this.$router.resolve with an object that has the route name and the query string params key-value pairs in it.

Then we get the resolved URL string from the props.href property.

Conclusion

To get route by name and parameters with Vue Router, we can use the this.$router.resolve method.

Sometimes, we want to implement Google Login API in Vue.js.

In this article, we’ll look at how to implement Google Login API in Vue.js.

How to implement Google Login API in Vue.js?

To implement Google Login API in Vue.js, we can use the gap.signin2.render method.

For instance, we write

<template>
  <div id="google-signin-button"></div>
</template>

<script>
//...
export default {
  mounted() {
    gapi.signin2.render("google-signin-button", {
      onsuccess: this.onSignIn,
    });
  },
  methods: {
    onSignIn(user) {
      const profile = user.getBasicProfile();
    },
  },
};
</script>

to call gapi.signin2.render to render the sign in page contents in the div with ID google-signin-button.

We set onsuccess to this.onSignIn to call it when sign in is successful.

Conclusion

To implement Google Login API in Vue.js, we can use the gap.signin2.render method.

Sometimes, we want to pass styles to child component and use it as scoped style in Vue.js.

In this article, we’ll look at how to pass styles to child component and use it as scoped style in Vue.js.

How to pass styles to child component and use it as scoped style in Vue.js?

To pass styles to child component and use it as scoped style in Vue.js, we can use the deep selector.

For instance, we write

a >>> b {
  color: red;
}
/deep/ a b {
  color: red;
}
a::v-deep b {
  color: red;
}

to add the deep select with >>>, /deep/ or ::v-deep.

They all select the b select in a.

Conclusion

To pass styles to child component and use it as scoped style in Vue.js, we can use the deep selector.