Category: Vue

Sometimes, we want to add a Google Font to a Vue.js Component.

In this article, we’ll look at how to add a Google Font to a Vue.js Component.

How to add a Google Font to a Vue.js Component?

To add a Google Font to a Vue.js Component, we use the @import directive.

For instance, we write

<style>
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");

html,
body {
  font-family: "Roboto", sans-serif;
}

#app {
  font-family: "Roboto", sans-serif;
}
</style>

to import the Roboto Google font with @import.

Then we can set font-family to that to use it.

Conclusion

To add a Google Font to a Vue.js Component, we use the @import directive.

Sometimes, we want to use onfocusout function in Vue.js.

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

How to use onfocusout function in Vue.js?

To use onfocusout function in Vue.js, we listen for the blur event.

For instance, we write

<template>
  <input @blur="handleBlur" />
</template>

to set the handleBlur method as the blur event handler function.

handleBlur is called when we move focus away from the input.

Conclusion

To use onfocusout function in Vue.js, we listen for the blur event.

Sometimes, we want to set static image src in Vue.js template with JavaScript.

In this article, we’ll look at how to set static image src in Vue.js template with JavaScript.

How to set static image src in Vue.js template with JavaScript?

To set static image src in Vue.js template with JavaScript, we set the path relative to the src folder.

For instance, we write

<template>
  <img src="/static/img/clear.gif" />
</template>

to add an img element with src set to a path relative to the src folder to load the image.

Conclusion

To set static image src in Vue.js template with JavaScript, we set the path relative to the src folder.

Sometimes, we want to use local storage with Vue.js.

In this article, we’ll look at how to use local storage with Vue.js.

How to use local storage with Vue.js?

To use local storage with Vue.js, we call the localStorage methods.

For instance, we write

localStorage.setItem("item", response.data);

to call localStorage.setItem with the key and value of the item.

We get the item by the key by writing

localStorage.getItem("item");

We call getItem with the key of the item.

And we remove an item from local storage by writing

localStorage.removeItem("item");

to call removeItem to remove the item with the key.

Conclusion

To use local storage with Vue.js, we call the localStorage methods.

Sometimes, we want to import functions from different JavaScript file in a Vue Webpack project.

In this article, we’ll look at how to import functions from different JavaScript file in a Vue Webpack project.

How to import functions from different JavaScript file in a Vue Webpack project?

To import functions from different JavaScript file in a Vue Webpack project, we use import.

For instance, we write

<script>
import test from "@/mylib";

console.log(test.foo());
//...
</script>

to import the mylib module’s default export as test.

Then we call the test.foo method.

@ is the alias for the src folder in the Vue project.

Conclusion

To import functions from different JavaScript file in a Vue Webpack project, we use import.