# Guide

# Installation

# Using CDN

The plugin will automatically install itself as a Vue plugin.

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-editor/dist/vue2-editor.umd.min.js"></script>

# NPM

npm install vue2-editor

# Yarn

yarn add vue2-editor

# Usage

There are two ways setup and use Vue2Editor. You can either set it up globally as a Vue plugin or import the VueEditor component to locally register and use it. Examples of both way are below.

# Globally

import Vue from "vue";
import Vue2Editor from "vue2-editor";

Vue.use(Vue2Editor);

# Local Import

// Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor";

// Advanced Use - Hook into Quill's API for Custom Functionality
import { VueEditor, Quill } from "vue2-editor";

# Modular Version 2.9.0+

As of version 2.9, you can use the modular version which includes only the JavaScript. This allows for more control and customization. Also, this allows for other Quill themes to be used such as Bubble.

<script>
import { VueEditor } from "vue2-editor/dist/vue2-editor.core.js";

export default {
  components: { VueEditor }
};
</script>

<style lang="css">
@import "~vue2-editor/dist/vue2-editor.css";

/* Import the Quill styles you want */
@import '~quill/dist/quill.core.css';
@import '~quill/dist/quill.bubble.css';
@import '~quill/dist/quill.snow.css';
</style>

# Nuxt.js

Add vue2-editor/nuxt to modules section of nuxt.config.js

{
  modules: ["vue2-editor/nuxt"];
}

To avoid seeing warnings from Vue about a mismatch in content, you'll need to wrap the VueEditor component with the client-only component Nuxt provides as shown here:

<client-only>
  <VueEditor />
</client-only>