https://github.com/marsprince/slate-vue

slate.js implement for Vue2 and Vue3
https://github.com/marsprince/slate-vue

javascript slatejs typescript vue vuejs

Last synced: 2 days ago
JSON representation

slate.js implement for Vue2 and Vue3

• Host: GitHub
• URL: https://github.com/marsprince/slate-vue
• Owner: marsprince
• License: mit
• Created: 2020-04-08T03:00:55.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2025-02-09T14:36:27.000Z (12 days ago)
• Last Synced: 2025-02-18T14:04:48.895Z (3 days ago)
• Topics: javascript, slatejs, typescript, vue, vuejs
• Language: TypeScript
• Homepage: https://marsprince.github.io/slate-vue
• Size: 1.41 MB
• Stars: 142
• Watchers: 7
• Forks: 19
• Open Issues: 46
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Slate-vue

[![Build Status](https://img.shields.io/github/workflow/status/marsprince/slate-vue/Test)](https://github.com/marsprince/slate-vue/actions?query=workflow%3ATest)

[![NPM Version](https://img.shields.io/npm/v/slate-vue?color=brightgreen)](https://www.npmjs.com/package/slate-vue)

[![NPM Size](https://img.shields.io/badge/gzip-36kb-brightgreen)](https://unpkg.com/slate-vue/dist/index.es.js)

An implement for [slate](https://github.com/ianstormtaylor/slate) supported vue2 and vue3（in development）. Most of the slate-react's components can be easily migrated by no code change.

All slate-react's example is supported now.

For principles's question, Please read slate's [docs](https://docs.slatejs.org/) first!

## Install

in npm

```javascript

npm install slate-vue

```

in yarn

```javascript

yarn add slate-vue

```

## Usage

import

```javascript

import Vue from 'vue'

import { SlatePlugin } from 'slate-vue';

Vue.use(SlatePlugin)

```

use

```vue

  

    

  

  import {Slate, Editable} from 'slate-vue'

  // this value is for editor

  const initialValue = [

    {

      children: [

        { text: 'This is editable plain text, just like a <textarea>!' },

      ],

    },

  ]

  export default {

    name: 'index',

    components: {

      Slate,

      Editable

    },

    data() {

      return {

        value: JSON.stringify(initialValue)

      }

    }

  };

```

See full vue2.x document in [slate-vue](https://github.com/marsprince/slate-vue/tree/master/packages/slate-vue)

## Examples

See all examples in [online example](https://marsprince.github.io/slate-vue).

See all example code in [pages](https://github.com/marsprince/slate-vue/tree/master/site/pages)

## Issues

You can use this [codesandbox template](https://codesandbox.io/s/2984l) to reproduce problems.

## Environment Support

| [](http://godban.github.io/browsers-support-badges/)
IE / Edge | [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome | [](http://godban.github.io/browsers-support-badges/)
Safari |

| --- | --- | --- | --- |

| testing | testing | 86.0+ | testing |

## License

[MIT](LICENSE) © marsprince