Category: Vue

Sometimes, we want to hide Vue.js template before it is rendered.

In this article, we’ll look at how to hide Vue.js template before it is rendered.

How to hide Vue.js template before it is rendered?

To hide Vue.js template before it is rendered, we add the v-cloak directive and set its style.

For instance, we write

<template>
  <div id="app">
    <div v-cloak>
      {{ message }}
    </div>
  </div>
</template>

to add the v-cloak directive.

Then we hide the content of the div before it’s rendered with

<style>
[v-cloak] {
  display: none;
}
</style>

Conclusion

To hide Vue.js template before it is rendered, we add the v-cloak directive and set its style.

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.