Category: Vue Answers

Sometimes, we want to use constants in Vue.js component templates.

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

Use Constants in Vue.js Component Templates

To use constants in Vue.js component templates, we can expose them to the template by putting them in the object returned by the data method.

For instance, we can write:

<template>
  <p>{{ CREATE_ACTION }}</p>
  <p>{{ UPDATE_ACTION }}</p>
</template>

<script>
const CREATE_ACTION = "create";
const UPDATE_ACTION = "update";

export default {
  name: "App",
  data() {
    return {
      CREATE_ACTION,
      UPDATE_ACTION,
    };
  },
};
</script>

to add the constants we want to use in the template with:

const CREATE_ACTION = "create";
const UPDATE_ACTION = "update";

Then we put them both in the object we return in the data method.

Finally, we use the in the template by putting them in between their own curly braces.

Now we see:

create

update

displayed.

Conclusion

To use constants in Vue.js component templates, we can expose them to the template by putting them in the object returned by the data method.

Sometimes, we want to get the window size whenever it changes in a Vue.js app.

In this article, we’ll look at how to get the window size whenever it changes in a Vue.js app.

Get the Window Size Whenever it Changes in a Vue.js App

To get the window size whenever it changes in a Vue.js app, we can add resize event listener to window when the component is mounting.

For instance, we write:

<template>
  <div id="app">{{ width }} x {{ height }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { width: window.innerWidth, height: window.innerHeight };
  },
  created() {
    window.addEventListener("resize", this.onResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    onResize(e) {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
    },
  },
};
</script>

to call window.addEventListener in the created hook.

We use the onResize method as the resize event listener.

In the destroyed hook, we call window.removeEventListener to remove the event listener.

In onResize and the data methods, we get the width of the window with window.innerWidth .

And we get the height of the window with window.innerHeight .

Now when we resize the window, we should see the numbers change on the screen since we added width and height to the template.

Conclusion

To get the window size whenever it changes in a Vue.js app, we can add resize event listener to window when the component is mounting.

To download a file in the browser with Vue.js, we can make a GET request to get the file response data.

Then we can create a link from it and click on it programmatically to download the file.

For instance, we can write:

<template>
  <div id="app">
    <a
      href="#"
      @click.prevent="
        downloadItem({
          url:
            'https://test.cors.workers.dev/?https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
          label: 'example.pdf',
        })
      "
    >
      download
    </a>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "App",
  methods: {
    async downloadItem({ url, label }) {
      const response = await axios.get(url, { responseType: "blob" });
      const blob = new Blob([response.data], { type: "application/pdf" });
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = label;
      link.click();
      URL.revokeObjectURL(link.href);
    },
  },
};
</script>

We have the downloadItem method that takes an object with the file url to download, and the label property which has the file name.

In the method, we call axios.get to get the data from the url .

We set responseType to 'blob' to let us download the data.

Next, we create a Blob instance with the response.data which has the file contents.

type is set to the MIME type of the file.

Next, we use document.createElement to create the a element which we click to download the file.

We set its href to the URL created by URL.createObjectURL with the blob .

And then we set the download property to the label file name.

Then we call click to click on the a element to do the download.

And finally, we call URL.revokeObjectURL to clear the URL resources.

Sometimes, we want to listen for right clicks and do something when the user right-clicks on an element with Vue.js.

In this article, we’ll look at how to listen for right clicks and do something when the user right-clicks on an element with Vue.js.

Listen for Right Clicks with Vue.js

To listen for right clicks and do something when the user right-clicks on an element with Vue.js, we can use the @contextmenu directive to listen for contextmenu events, which are emitted on right-click.

For instance, we can write:

<template>  
  <div id="app">  
    <button @contextmenu.prevent="onRightClick">right click me</button>  
  </div>  
</template>  
<script>  
export default {  
  name: "App",  
  methods: {  
    onRightClick() {  
      console.log("right clicked");  
    },  
  },  
};  
</script>

We add the prevent modifier to prevent the default right-click menu from showing, and instead the onRightClick method will be run when we right click on the button.

Now when we right-click on the button, we see 'right clicked' logged.

Conclusion

To listen for right clicks and do something when the user right-clicks on an element with Vue.js, we can use the @contextmenu directive to listen for contextmenu events, which are emitted on right-click.

Sometimes, we want to get an element’s height with Vue.js.

In this article, we’ll look at how to get an element’s height with Vue.js.

Get an Element’s Height with Vue.js

To get an element’s height with Vue.js, we can assign a ref to the element we want to get the height for.

Then we can get the height with the clientHeight property of the element that’s been assigned the ref.

For instance, we can write:

<template>  
  <div id="app">  
    <div ref="infoBox">hello world</div>  
  </div>  
</template>  
<script>  
export default {  
  name: "App",  
  mounted() {  
    console.log(this.$refs.infoBox.clientHeight);  
  },  
};  
</script>

We assigned the ref with the ref prop set to a name.

Then we can use the this.$refs property to get the element with thos.$refs.infoBox which returns the div element.

And then we can use clientHeight to get the div’s height.

Conclusion

To get an element’s height with Vue.js, we can assign a ref to the element we want to get the height for.