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 how the best packages for add encryption, text viewer, JSON viewer, and an item selector.

vue-cryptojs

vue-cryptojs lets us add encryption to our Vue app via a wrapper for crypto-js.

To install it, we run:

npm i vue-cryptojs

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueCryptojs from "vue-cryptojs";

Vue.use(VueCryptojs);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    const encryptedText = this.CryptoJS.AES.encrypt(
      "hello world",
      "secret"
    ).toString();
    console.log(encryptedText);
  }
};
</script>

We register the plugin so that we can call this.CryptoJS.AES.encrypt in our app.

Also, we can use:

Vue.CryptoJS
this.$CryptoJS

to get the same object.

vue-swatches

vue-swatches lets us add a color picker into our Vue app with a few lines code.

We can install it by running:

npm i vue-swatches

Now we can use it in our component:

<template>
  <div>
    <v-swatches v-model="color"></v-swatches>
  </div>
</template>
<script>
import VSwatches from "vue-swatches";
import "vue-swatches/dist/vue-swatches.css";
export default {
  components: { VSwatches },
  data() {
    return {
      color: "green"
    };
  }
};
</script>

v-swatches is the component for the color picker.

The color code string is bound to the component with v-model .

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