Category: Vue Answers

Sometimes, we want to get the window size in Vue.js.

In this article, we’ll look at how to get the window size in Vue.js.

How to get the window size in Vue.js?

To get the window size in Vue.js, we can listen to the resize event.

For instance, we write

<script>
//...
export default {
  //...
  mounted() {
    window.addEventListener("resize", () => {
      this.windowHeight = window.innerHeight;
    });
  },
  //...
};
</script>

to call window.addEventListener with 'resize' to listen to the window resize event.

In the event handler callback, we get the window’s height with window.innerHeight.

Conclusion

To get the window size in Vue.js, we can listen to the resize event.

Sometimes, we want to trigger events using Vue.js.

In this article, we’ll look at how to trigger events using Vue.js.

How to trigger events using Vue.js?

To trigger events using Vue.js, we can assign a ref to the element we want to trigger the element from.

And then we can use the element’s methods to trigger the event.

For instance, we write

<template>
  <div>
    <button type="button" @click="myClickEvent" ref="myBtn">Click Me!</button>
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    myClickEvent($event) {
      const elem = this.$refs.myBtn;
      elem.click();
    },
  },
  //...
};
</script>

to assign the myBtn ref to the button.

We set @click to the myClickEvent method to call it when we click on the button.

Then in the myClickEvent method, we get the button element with this.$refs.myBtn and assign it to elem.

Finally, we call elem.click to trigger the click event on the button.

Conclusion

To trigger events using Vue.js, we can assign a ref to the element we want to trigger the element from.

And then we can use the element’s methods to trigger the event.

Sometimes, we want to set a checkbox as checked with Vue.js.

In this article, we’ll look at how to set a checkbox as checked with Vue.js.

How to set a checkbox as checked with Vue.js?

To set a checkbox as checked with Vue.js, we can add the checked attribute to our checkbox.

For instance, we write

<template>
  <div>
    <input type="checkbox" v-model="checked" checked />
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      checked: true,
    };
  },
  //...
};
</script>

to add the checked attribute to make the checkbox input checked by default.

Also, we set v-model to checked to bind the check value after we manipulate the checkbox.

Conclusion

To set a checkbox as checked with Vue.js, we can add the checked attribute to our checkbox.

Sometimes, we want to share a method between components in Vue.js.

In this article, we’ll look at how to share a method between components in Vue.js.

How to share a method between components in Vue.js?

To share a method between components in Vue.js, we can use mixins.

For instance, we write

mixins/cartMixin.js

export default {
  methods: {
    addToCart() {
      //...
    },
  },
};

to create the cartMixin.js module that exports an object with the addToCart method inside.

Then we use the mixin in our component by writing

<script>
import cartMixin from "./mixins/cartMixin.js";
//...

export default {
  //...
  mixins: [cartMixin],
  //...
};
</script>

We set mixins to an array with the cartMixin inside to incorporate the addToCart method from the mixin into our component.

Conclusion

To share a method between components in Vue.js, we can use mixins.

Sometimes, we want to authenticate a Vue.js app with Azure AD.

In this article, we’ll look at how to authenticate a Vue.js app with Azure AD.

How to authenticate a Vue.js app with Azure AD?

To authenticate a Vue.js app with Azure AD, we can use the vue-adal package.

To install it, we run

npm install vue-adal

Then we can use it by writing

import Adal from 'vue-adal'

Vue.use(Adal, {
  config: {
    tenant: '<guid>',
    clientId: '<guid>',
    redirectUri: '<host addr>',
    cacheLocation: 'localStorage'
  },
  requireAuthOnInitialize: true,
  router
})

to call Vue.use with Adal to add the Adal plugin into our Vue app.

tenant is the multi-tenant gateway or Azure AD Tenant ID.

clientId is the app ID.

requireAuthOnInitialize is true if we need auth on startup.

And router is the Vue Router instance.

Conclusion

To authenticate a Vue.js app with Azure AD, we can use the vue-adal package.