Category: Vue Answers

Sometimes, we want to add a Bootstrap tooltip inside Vue.js.

in this article, we’ll look at how to add a Bootstrap tooltip inside Vue.js.

How to add a Bootstrap tooltip inside Vue.js?

To add a Bootstrap tooltip inside Vue.js, we can create a directive.

For instance, we write

Vue.directive("tooltip", (el, binding) => {
  $(el).tooltip({
    title: binding.value,
    placement: binding.arg,
    trigger: "hover",
  });
});

to create the tooltip directive that calls Bootstrap’s tooltip jQuery method to create the tooltip with the tiyle and placement.

Then we can use the directive with

<span class="label label-default" v-tooltip:bottom="'Your tooltip text'"></span>

by setting the bottom placement modifier and the 'Your tooltip text' as the tooltip title text.

Conclusion

To add a Bootstrap tooltip inside Vue.js, we can create a directive.

Sometimes, we want to anchor to div within the same Vue.js component.

In this article, we’ll look at how to anchor to div within the same Vue.js component.

How to anchor to div within the same Vue.js component?

To anchor to div within the same Vue.js component, we can create a method that calls scrollTo to scroll to the element’s position.

For instance, we write

<template>
  <div id="app">
    <a @click="scrollMeTo('porto')">Porto, Portugal</a>
    ...
    <div ref="porto">...</div>
    ..
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    scrollMeTo(refName) {
      const element = this.$refs[refName];
      const top = element.offsetTop;
      window.scrollTo(0, top);
    },
  },
  //...
};
</script>

to add an anchor element that calls the scrollMeTo method with the ref name of the element we want to scroll to on click.

Then in the scrollMeTo method, we get the refName parameter value and use that to get the element from this.$refs.

And then we get the top of the element with element.offsetTop.

Finally, we call window.scrollTo with 0 and top to scroll to the top of the element.

Conclusion

To anchor to div within the same Vue.js component, we can create a method that calls scrollTo to scroll to the element’s position.

Sometimes, we want to create a 404 component in Vue.js and Vue Router.

In this article, we’ll look at how to create a 404 component in Vue.js and Vue Router.

How to create a 404 component in Vue.js and Vue Router?

To create a 404 component in Vue.js and Vue Router, we add a catch all route in our routes declaration.

For instance, we write

const routes = [
  //...
  { path: "/404", component: NotFound },
  { path: "*", redirect: "/404" },
  //...
];

to add a /404 route which renders the NotFound component.

Then we add the catch all route by adding an entry with path set to '*' and redirect that to /404.

Conclsuion

To create a 404 component in Vue.js and Vue Router, we add a catch all route in our routes declaration.

Sometimes, we want to concatenate img src variable and text with Vue.js.

In this article, we’ll look at how to concatenate img src variable and text with Vue.js.

How to concatenate img src variable and text with Vue.js?

To concatenate img src variable and text with Vue.js, we can use template literals.

For instance, we write

<template>
  <div id="app">
    <img :src="`${imgPreUrl()}img/logo.png`" />
  </div>
</template>

to set the src prop to ${imgPreUrl()}img/logo.png.

We combine the string returned by imgPreUrl() with the rest of the string with the template literal.

Conclusion

To concatenate img src variable and text with Vue.js, we can use template literals.

Sometimes, we want to access external JSON file objects in a Vue.js app.

In this article, we’ll look at how to access external JSON file objects in a Vue.js app.

How to access external JSON file objects in a Vue.js app?

To access external JSON file objects in a Vue.js app, we can import the JSON file directly.

For instance, we write

data.json.

[
  {
    firstname: "toto",
    lastname: "jones",
  },
  {
    firstname: "toto2",
    lastname: "jones2",
  },
];

Then we can use it in a component by writing

<script>
import json from "./data.json";

//...
export default {
  //...
  mounted() {
    json.forEach((x) => {
      console.log(x.firstname, x.lastname);
    });
  },
  //...
};
</script>

We import the JSON array with

import json from "./data.json";

And then we call json.forEach to loop through it since json is an array.

Conclusion

To access external JSON file objects in a Vue.js app, we can import the JSON file directly.