Handy Tricks in Vue.js

If you are using Vue, then you probably use many tricks that make your life easier. These tricks not only help you solve problems but also allow you to work faster and more efficiently on your web projects. I have collected some of the most useful tricks for Vue in this article.

How to get the height of the modal

You can get the height of your modal using the getBoundingClientRect method.

This method returns an object that contains the height and width of an element. The object is relative to the current coordinate system in use for layout (the frame in this case).

For example:

document.getElementById("modal").getBoundingClientRect();

Output
{
  top: 450,
  left: 400,
  right: 825,
  bottom: 500,
  x: 400,  
  y: 450,  
  width: 425,
  height: 50
}

Performance tracing

Vue allows you to do performance tracing to help you debug performance issue

const app = createApp( {} );
app.config.performance = true ;

How to declare global variables in Vue.js?

Global variables can be declared as static properties of the Vue instance:

var counter = 0;

this.$root.counter = counter;

This will make the global variable accessible from anywhere in your project: var counter = this.$root.counter;

You can also store global methods and events in Vuex store.

Shorthand for Named Slots

Instead of writing this:

<table>
    <template  v-slot:header>
        <header/>
    </template>
</table>

You can write this :

<table>
    <template  #header>
        <header/>
    </template>
</table>

Override CSS of a child component

Override CSS of a child component while keeping styles scoped by using ::v-deep selector

<style scoped>

 ::v-deep .child-component {
  font-size: 24px;
}
</style>

There are many tricks that you can use in Vue js and it is important to know these as they will help you solve your current problems, if you have any other vue tip please write it in a comment :)