Community
Grammarly Text Editor SDK for Vue
This doc explains how to integrate the Grammarly Text Editor SDK with a Vue application.
For more guidance, you may also want to check out the following resources:
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>that are notreadonlyordisabledcontenteditable="true"that are notreadonlyordisabled
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>
You can view an interactive example on CodeSandboxopen in new window.
For additional configuration details, please visit the API reference for Vue 2 and Vue 3.
Integrating with rich text editor frameworks
We regularly test the Text Editor SDK for Vue for compatibility with TinyMCE 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:
Support
The Text Editor SDK supports Vue 2 versions 2.5 and later, and the SDK supports 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.