Slatjs is Editor library which enable developers to use rich customizable editor capability in web apps. The library come to Reactjs first approach. So how do I use it in a Vuejs app ?

Slatejs is customizable editor, comment sections in a web app. It is one of the alternative for Draftjs which was used in Facebook comment.

slate-vue

slate-vue is react alternative library for slatejs, you can download and use the plugin in Vuejs. Almost every slatejs feature which available in react can use in Vuejs too.

yarn add salte-vue 
or
npm i -s slate-vue

Usage

Plugin

In the main.js include the plugin

import Vue from "vue";
import App from "./App.vue";
import { SlatePlugin } from 'slate-vue';
​
Vue.config.productionTip = false;
Vue.use(SlatePlugin)
new Vue({
  render: (h) => h(App),
}).$mount("#app");
​

Component usage

In the component import the Slate and Editable with Initial values as nodes. You can find detailed usage of Slatejs in official docs and in the slate-vue docs.

<template>
  <div id="app">
  <Slate :value="value">
    <Editable  placeholder="Enter some plain text..."></Editable>
  </Slate>
  </div>
</template>
​
<script>
​
  import {Slate, Editable} from 'slate-vue'
  const initialValue = [
    {
      children: [
        { text: 'This is editable plain text, just like a <textarea>!' },
      ],
    },
  ]
export default {
  name: "App",
    components: {
      Slate,
      Editable
    },
    data() {
      return {
        value: JSON.stringify(initialValue)
      }
    }
};
</script>

​

The editable component allow us to use interactive Ritch text editor in our application which is a child component to the Slate component.

 This free site is ad-supported. Learn more
​