Different design is integrated for login page & Text editor is added with Editor1 component

package.json

@@ -11,6 +11,8 @@
     "geni18n": "gulp geni18n"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-build-classic": "^16.0.0",
+    "@ckeditor/ckeditor5-vue": "^1.0.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "^0.1.8",
@@ -45,6 +47,8 @@
     "vue-sweetalert2": "^2.1.5",
     "vue-toasted": "^1.1.26",
     "vue2-dropzone": "^3.6.0",
+    "vue2-editor": "^2.10.2",
+    "vuebar": "0.0.20",
     "vuejs-datepicker": "^1.6.2",
     "vuejs-dialog": "^1.4.0",
     "vuejs-logger": "1.5.3",

src/main.js

@@ -26,9 +26,11 @@ import '../public/assets/plugins/materialdesignicons/css/materialdesignicons.min
 import 'vue-select/dist/vue-select.css'
 import '../public/assets/css/template.scss'
 import VueTimepicker from 'vuejs-timepicker'
+import CKEditor from '@ckeditor/ckeditor5-vue';
 import { getCountries, getStates, getCities } from 'cities-states-countries';
 
 
+
 Vue.config.productionTip = false
 const isProduction = process.env.NODE_ENV === 'production'
 
@@ -50,6 +52,7 @@ Vue.use(Toasted)
 Vue.use(VueFormWizard)
 Vue.use(VueSweetalert2)
 Vue.use(Vuebar);
+Vue.use(CKEditor);
 Vue.component('apexchart', VueApexCharts)
 var baseURL = 'http://localhost:8080/server'
 var cdnBaseURL = 'http://localhost:8080/cdnserver'

src/router.js

@@ -315,6 +315,15 @@ export default new Router({
      meta: {
        title: 'Registration2'
      }
-   }
+   },
+  
+    {
+      path: '/editor1',
+      name: 'Editor1',
+      component: loadView('theme/Editor1'),
+      meta: {
+        title: 'Editor1'
+      }
+    }
   ]
 })
\ No newline at end of file

src/views/theme/Editor1.vue

+<template>
+  <main>
+     <div class="card">
+      <div class="card-body">
+        <h3>Vue2 Editor</h3>
+        For documentation <a href="https://www.npmjs.com/package/vue2-editor">click here</a>
+        <vue-editor v-model="content"></vue-editor>
+      </div>
+     </div>
+  </main>
+</template>
+
+<script>
+// @ is an alias to /src
+ import { VueEditor } from "vue2-editor"; 
+export default {
+  name: "Editor2",
+  components: {
+    VueEditor
+  },
+   data() {
+            return {
+            content: "<h1>Some initial content</h1>"
+            };
+        }
+};
+</script>