Category: Vue

Sometimes, we want to only show slot if it has content with Vue.js.

In this article, we’ll look at how to only show slot if it has content with Vue.js.

How to only show slot if it has content with Vue.js?

To only show slot if it has content with Vue.js, we can check the this.$slots property in our component.

For instance, we write

<template>
  <div id="app">
    <div class="panel-footer" v-if="hasFooterSlot">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
//...
export default {
  //...
  computed: {
    hasFooterSlot() {
      return !!this.$slots.footer;
    },
  },
  //...
};
</script>

to check if the footer slot is added with !!this.$slots.footer.

We put this in the hasFooterSlot computed property, so we can use that in our template with v-if to conditionally display the footer slot with

<div class="panel-footer" v-if="hasFooterSlot">
  <slot name="footer"></slot>
</div>

Conclusion

To only show slot if it has content with Vue.js, we can check the this.$slots property in our component.

Sometimes, we want to add a page transition fade effect with Vue Router and Vue.js.

In this article, we’ll look at how to add a page transition fade effect with Vue Router and Vue.js.

How to add a page transition fade effect with Vue Router and Vue.js?

To add a page transition fade effect with Vue Router and Vue.js, we wrap the transition component around the router-view component and add our transition styles.

For instance, we write

<template>
  <div id="app">
    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
//...
export default {
  //...
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition-property: opacity;
  transition-duration: 0.25s;
}

.fade-enter-active {
  transition-delay: 0.25s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>

to add the the transition component and set its name prop to 'fade'.

We wrap it around router-view so that we see the transition effect when we change routes.

And we add the transition effect styles in the style tag.

The name prop should be the prefix for the classes listed in the style tag so the transition styles would be applied.

Conclusion

To add a page transition fade effect with Vue Router and Vue.js, we wrap the transition component around the router-view component and add our transition styles.

In this article, we’ll look at what’s the difference between @click and v-on:click in Vue.js.

What’s the difference between @click and v-on:click in Vue.js?

There’re no difference between @click and v-on:click in Vue.js.

@ is a shorthand for v-on:.

So

<a v-on:click="doSomething"></a>

is the same as

<a @click="doSomething"></a>

They both call the doSomething method when we click on the anchor element.

Conclusion

There’re no difference between @click and v-on:click in Vue.js.

Sometimes, we want to preview an image before it is uploaded with Vue.js.

In this article, we’ll look at how to preview an image before it is uploaded with Vue.js.

How to preview an image before it is uploaded with Vue.js?

To preview an image before it is uploaded with Vue.js, we can convert the selected image file into a URL and then set the URL as the value of the img element src attribute.

For instance, we write

<template>
  <div id="app">
    <input type="file" @change="onFileChange" />

    <div>
      <img v-if="url" :src="url" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: null,
    };
  },
  methods: {
    onFileChange(e) {
      const [file] = e.target.files;
      this.url = URL.createObjectURL(file);
    },
  },
};
</script>

to add a file input and an img element for showing the preview.

Then we add the onFileChange method which is called when we select a file since we have

@change="onFileChange"

Then we get the selected file in the method with e.target.files.

And then we convert the image file to a URL with URL.createObjectURL and assign it to this.url.

Then we set :src to url in the img element to show the selected image file.

Conclusion

To preview an image before it is uploaded with Vue.js, we can convert the selected image file into a URL and then set the URL as the value of the img element src attribute.

Sometimes, we want to convert string to DOM elements in Vue.js.

In this article, we’ll look at how to convert string to DOM elements in Vue.js.

How to convert string to DOM elements in Vue.js?

To convert string to DOM elements in Vue.js, we can use the v-html directive.

For instance, we write

<template>
  <div>
    <div v-html="yourVariable"></div>
  </div>
</template>

to render the yourVariable HTML string into DOM elements with the v-html directive.

Conclusion

To convert string to DOM elements in Vue.js, we can use the v-html directive.