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 a waterfall grid, adding WYSIWYG editors, charts, and embedding YouTube videos.
vue-waterfall
vue-waterfall lets us add a waterfall component to our Vue app.
To use it, we run:
npm i vue-waterfall
Then we can use it by writing:
<template>
<div id="app">
<waterfall :line-gap="200" :watch="items">
<waterfall-slot v-for="n in 100" :width="50" :height="200" :key="n">{{n}}</waterfall-slot>
</waterfall>
</div>
</template>
<script>
import Waterfall from "vue-waterfall/lib/waterfall";
import WaterfallSlot from "vue-waterfall/lib/waterfall-slot";
export default {
components: {
Waterfall,
WaterfallSlot
}
};
</script>
We use the waterfall component to add the component.
The items are populated with the waterfall-slot component.
The items’ width and height are set.
Vue JS Froala WYSIWYG Editor
Vue JS Froala WYSIWYG Editor is a rich text editor that’s made for Vue apps.
To use it, we run:
npm i vue-froala-wysiwyg
to install it.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import "froala-editor/js/plugins.pkgd.min.js";
import "froala-editor/js/third_party/embedly.min";
import "froala-editor/js/third_party/font_awesome.min";
import "froala-editor/js/third_party/spell_checker.min";
import "froala-editor/js/third_party/image_tui.min";
import "froala-editor/css/froala_editor.pkgd.min.css";
import VueFroala from "vue-froala-wysiwyg";
Vue.use(VueFroala);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<froala :tag="'textarea'" :config="config" v-model="model"></froala>
</div>
</template>
<script>
import VueFroala from "vue-froala-wysiwyg";
export default {
name: "app",
data() {
return {
config: {
events: {
initialized() {
console.log("initialized");
}
}
},
model: "hello!"
};
}
};
</script>
We use the froala component to render the text area.
The tag is set as 'textarea' to render it as such.
Then we should see a text editor with some basic functionality like bold, italics, and underline with the text editor.
Vue YouTube Embed
Vue YouTube Embed lets us embed YouTube videos in our app.
To use it, we run:
npm i vue-youtube-embed
to install it.
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueYouTubeEmbed from "vue-youtube-embed";
Vue.use(VueYouTubeEmbed);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<youtube video-id="NNfGvwqfrBY"></youtube>
</div>
</template>
<script>
export default {};
</script>
We use the youtube component and set the video-id prop to embed the video.
We can also get the video ID from the full URL with the start time.
It emits various events that we can listen to.
Vue Chartkick
Vue Chartkick is a chart library that’s based on chart.js
We install it by running:
npm i vue-chartkick chart.js
to use it.
Chart.js is a required dependency.
Then we write:
main.js
import Vue from "vue";
import App from "./App.vue";
import Chartkick from "vue-chartkick";
import Chart from "chart.js";
Vue.use(Chartkick.use(Chart));
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<line-chart :data="{'2020-01-01': 11, '2020-01-02': 6}"></line-chart>
</div>
</template>
<script>
export default {};
</script>
We just register the plugin and use the line-chart component.
To populate the data, we pass in an object to the data prop with the chart data.
The key is the x-axis values, and the values are the y-axis values.
It also supports other charts.
We can add a pie chart with the pie-chart component:
<template>
<div id="app">
<pie-chart :data="[['apple', 43], ['orange', 23]]"></pie-chart>
</div>
</template>
<script>
export default {};
</script>
It supports many other charts.
vue-wysiwyg
vue-wysiwyg is an easy to use rich text editor for Vue apps.
To install it, we run:
npm i vue-wysiwyg
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import wysiwyg from "vue-wysiwyg";
Vue.use(wysiwyg, {});
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<wysiwyg v-model="content"/>
<p>{{content}}</p>
</div>
</template>
<script>
import "vue-wysiwyg/dist/vueWysiwyg.css";
export default {
data() {
return {
content: ""
};
}
};
</script>
We use the wysiwyg component to add the rich text editor.
v-model binds the inputted value to the content prop.
We also have to remember to import the CSS to make it look properly.
Conclusion
vue-waterfall lets us add a waterfall grid to our Vue app.
Vue JS Froala WYSIWYG Editor and vue-wysiwyg are 2 easy to use rich text editors that we can use in our Vue app.
Vue YouTube Embed lets us embed YouTube videos easily.
Vue Chartkick is an easy to use chart library.
