open-index/open-npm huggingface dataset:
npm package: @grammarly/editor-sdk-vue
Description: Grammarly's writing SDK for Vue
Latest version: 2.5.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Grammarly Text Editor SDK for Vue

Add Grammarly's real-time writing support to your app with just a few lines of code.

![A code snippet shows how to add the Grammarly Text Editor Plugin to a textarea. Then an animation of a user accepting a Grammarly suggestion in a chat app appears.](https://github.com/grammarly/grammarly-for-developers/blob/main/docs/sdk_product_animation.gif?raw=true)

This package is designed for Vue apps. Visit [@grammarly/editor-sdk](https://www.npmjs.com/package/@grammarly/editor-sdk) for our package for vanilla JavaScript apps and [@grammarly/editor-sdk-react](https://www.npmjs.com/package/@grammarly/editor-sdk-react) for our package for React apps.

## Getting started

Here's how to get started:

1. Create a new [Grammarly for Developers app](https://developer.grammarly.com/apps?utm_source=npm&utm_medium=developer&utm_campaign=readme-vue&utm_term=grammarly-vue)

1. Install the Grammarly Text Editor SDK:

   ```bash
   npm install @grammarly/editor-sdk-vue
   ```

1. Add the Grammarly Text Editor Plugin to your text editors by wrapping them with the [GrammarlyEditorPlugin](https://developer.grammarly.com/docs/api/editor-sdk-vue/grammarlyeditorplugin?utm_source=npm&utm_medium=developer&utm_campaign=readme-vue&utm_term=grammarly-vue) component:

   Vue 3

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

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

   Vue 2

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

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

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

## Learn more

If you'd like to learn more about what you can do with the SDK and how you can customize the plugin for your app, visit:

- [Grammarly for Developers Documentation](https://developer.grammarly.com/docs/?utm_source=npm&utm_medium=developer&utm_campaign=readme-vue&utm_term=grammarly-vue)
- [Grammarly for Developers API Reference](https://developer.grammarly.com/docs/api/editor-sdk-vue/?utm_source=npm&utm_medium=developer&utm_campaign=readme-vue&utm_term=grammarly-vue)
- [Grammarly for Developers Code Examples on GitHub](https://github.com/grammarly/grammarly-for-developers)

## Ask a question

If you want to ask a question, share a suggestion, or chat about how you're using the Grammarly Text Editor SDK in your app, join us in the [Grammarly for Developers community on GitHub](https://github.com/grammarly/grammarly-for-developers/discussions).