Grammarly Text Editor SDK for Vue

Installation

npm install @grammarly/editor-sdk-vue

Usage

To add the Grammarly Text Editor Plugin, wrap editor components with GrammarlyEditorPlugin.

Only editor components powered by the following HTML elements are supported: <input type='text'>, <textarea> and contenteditable="true" that are not readonly or disabled.

If your app has multiple text editors where you want to add the plugin, use the Grammarly wrapper to pass clientId and other configuration once.

Vue 3

<script setup>
import { GrammarlyEditorPlugin } from "@grammarly/editor-sdk-vue";
</script>

<template>
  <GrammarlyEditorPlugin clientId="YOUR_CLIENT_ID">
    <textarea />
  </GrammarlyEditorPlugin>
</template>

Vue 2

<script>
import { GrammarlyEditorPlugin } from "@grammarly/editor-sdk-vue/v2";

export default {
  components: { GrammarlyEditorPlugin },
};
</script>

<template>
  <GrammarlyEditorPlugin clientId="YOUR_CLIENT_ID">
    <textarea />
  </GrammarlyEditorPlugin>
</template>

API

For additional configuration details, please visit the API reference for Vue 2 and Vue 3.

Example

Check it out on CodeSandboxopen in new window.

Integrating with rich text editor frameworks

We regularly test the Text Editor SDK for Vue for compatibility with TinyMCE 5 & 6 and CKEditor 5.

As described above, wrap rich text editor elements with <GrammarlyEditorPlugin>. Set any configuration options using the Grammarly wrapper or the GrammarlyEditorPlugin component.

Here is sample code to get started:

• CKEditor exampleopen in new window
• TinyMCE exampleopen in new window

Support

The Text Editor SDK supports Vue 2 and Vue 3, the latest major version of Vue.

Preparing for production

Before making your app available in a production environment, please take note of the recommendations in Securing Your Integration.