Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at the best packages for adding charts, unique IDs, sliders, and scroll lock.

vue-unique-id

vue-unique-id lets us add a unique ID to our Vue component.

To use it, we run:

npm i vue-unique-id

to install it.

Then we write:

main.js

import Vue from "vue";
import App from "./App.vue";
import UniqueId from "vue-unique-id";
Vue.use(UniqueId);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div id="app"></div>
</template>

<script>
export default {
  created() {
    console.log(this.uid);
  }
};
</script>

We register the plugin and use the this.uid property to get the unique ID.

Also, we can get the ID with the $id method.

For instance, we can write:

<template>
  <div id="app"></div>
</template>

<script>
export default {
  created() {
    console.log(this.$id("foo"));
  }
};
</script>

to get an ID with the 'foo' suffix added to it.

VueVisible

VueVisible is a directive that lets us display something conditionally.

To use it, we run:

npm i vue-visible

to install it.

Then we use it by writing:

<template>
  <div id="app">
    <div v-visible="isVisible">I'm visible</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

We just use the v-visible directive like the v-show directive to conditionally display something.

#javascript #software-development #programming #web-development #vue #vue.js