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 adding text editors, animated numbers, and tag input.

@ckeditor/ckeditor5-vue

This package is the Vue version of CKEditor.

We can install it by running:

npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

Then we can use it by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import CKEditor from "@ckeditor/ckeditor5-vue";

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

App.vue

<template>
  <div id="app">
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</template>
<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
export default {
  name: "app",
  data() {
    return {
      editor: ClassicEditor,
      editorData: "<p>Content of the editor.</p>",
      editorConfig: {}
    };
  }
};
</script>

The ckeditor component binds to the editorData , which contains HTML content.

By default, the editor has buttons for bold, italic, formatting, links, images, and lists.

We can add plugins as we wish.

This can be done bu building from source.

#software-development #programming #web-development #javascript #technology