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 .
v-selectpage
v-selectpage is a package that lets us add a UI component to lets users select items.
To install it, we run:
npm i v-selectpage
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import vSelectPage from "v-selectpage";
Vue.use(vSelectPage, {});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<v-selectpage
:data="list"
key-field="id"
show-field="name"
placeholder="choose a fruit"
language="en"
></v-selectpage>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: "apple", desc: "apple" },
{ id: 2, name: "orange", desc: "orange" }
]
};
}
};
</script>
We use the v-selectpage component with the data prop to populate the selections.
key-field is the unique ID for each entry.
show-field is the property name of the field to show,.
placeholder has the placeholder.
language is the language.
It also supports multiple selections, pagination, right to left languages, and more.
vue-json-viewer
The vue-json-viewer package provides us with a JSON viewer that we can use in our Vue app.
To use it, we run:
npm i vue-json-viewer
Then we use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import JsonViewer from "vue-json-viewer";
Vue.use(JsonViewer);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<json-viewer :value="jsonData"></json-viewer>
</template>
<script>
export default {
data() {
return {
jsonData: { foo: { bar: 2 } }
};
}
};
</script>
We register the plugin and use the json-viewer component.
The value prop has the JSON we want to display.
We can make it copyable with the copyable prop.
boxed makes a box.
expand-depth will collapse the blocks under the given depth.
It also has a slot for adding a copy button.
@toast-ui/vue-editor
We can use @toast-ui/vue-editor package to add a text editor to a Vue app.
To install it, we run:
npm i @toast-ui/vue-editor
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import "codemirror/lib/codemirror.css";
import "@toast-ui/editor/dist/toastui-editor.css";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<editor
:initialValue="editorText"
:options="editorOptions"
height="500px"
initialEditType="wysiwyg"
previewStyle="vertical"
/>
</template>
<script>
import "codemirror/lib/codemirror.css";
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/vue-editor";
export default {
components: {
editor: Editor
},
data() {
return {
editorText: "hello world.",
editorOptions: {
hideModeSwitch: true
}
};
}
};
</script>
We set the initialValue to the text we want.
Also, we can set the options bu passing an object to the options prop.
initialEditType is set to wysiwyg to enable WYSIWYG editing.
Conclusion
@toast-ui/vue-editor is a text editor that we can use for viewing content.
vue-cryptojs lets us add crypto JS to our Vue app.
vue-swatches lets us add the color picker.
vue-json-viewer lets us add a JSON viewer.
v-selectpage lets us add an item selector.
