Category: JavaScript

Sometimes, we want to change the default font in Vuetify.

In this article, we’ll look at how to change the default font in Vuetify.

How to change the default font in Vuetify?

To change the default font in Vuetify, we can set the font-family CSS property in the global styles.

For instance, in main.scss we write

$font-family: "Ubuntu" 

.v-application {
  [class*="text-"] {
    color: #36405a;
    font-family: $font-family, sans-serif !important;
  }
  font-family: $font-family, sans-serif !important;
}

to set the font-family value to $font-family, which is set to 'Ubuntu'.

Now our Vuetify app will use Ubuntu as the default font.

Conclusion

To change the default font in Vuetify, we can set the font-family CSS property in the global styles.

Sometimes, we want to use document.getElementById in Vue.js.

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

How to use document.getElementById in Vue.js?

To use document.getElementById in Vue.js, we can assign a ref to the element we want to get.

And then we can use this.$refs to get the element.

For instance, we write

<template>
  <div>
    <div ref="myDiv">...</div>
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    showMyDiv() {
      console.log(this.$refs.myDiv);
    },
  },
  //...
};
</script>

to assign the myDiv ref to the div.

And then we can get the div in the showMyDiv method by using this.$refs.myDiv.

Conclusion

To use document.getElementById in Vue.js, we can assign a ref to the element we want to get.

Sometimes, we want to run code only after the component is fully loaded and initialized in Vue.js.

In this article, we’ll look at how to run code only after the component is fully loaded and initialized in Vue.js.

How to run code only after the component is fully loaded and initialized in Vue.js?

To run code only after the component is fully loaded and initialized in Vue.js, we can put the code in the mounted hook.

For instance, we write

<script>
//...
export default {
  //...
  mounted() {
    window.addEventListener("load", () => {
      // ...
    });
  },
  //...
};
</script>

to call window.addEventListener in the mounted hook to listen to the load event.

And then in the callback, we can run anything we want when the component is rendered.

Conclusion

To run code only after the component is fully loaded and initialized in Vue.js, we can put the code in the mounted hook.

Sometimes, we want to run code in mounted and again for restart functionality in Vue.js.

In this article, we’ll look at how to run code in mounted and again for restart functionality in Vue.js.

How to run code in mounted and again for restart functionality in Vue.js?

To run code in mounted and again for restart functionality in Vue.js, we can move our code in the mounted hook into its own method.

For instance, we write

<template>
  <div>
    <button v-if="playerWon" @click="init">Play Again</button>
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    init() {
      //...
    },
  },
  mounted() {
    this.init();
  },
  //...
};
</script>

to create the init method that we call in the mounted hook and if we click on the Play Again button.

Conclusion

To run code in mounted and again for restart functionality in Vue.js, we can move our code in the mounted hook into its own method.

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.