# Integrating CKEditor 5 with Vue.js 3+ from CDN

CKEditor 5 has an official Vue integration that you can use to add a rich text editor to your application. It provides a `<ckeditor>` component with two-way data binding through `v-model`. The component works with multiple editor types, including classic and decoupled (document). For the multi-root editor, use the dedicated [multi-root editor component](vue-multiroot-cdn.md). This guide will help you install and configure it to use the CDN distribution of CKEditor 5.

> **Create your own CKEditor 5**
>
> Check out our interactive Builder to quickly get a taste of CKEditor 5. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs.
>
> * editor type,
> * the features you need,
> * the preferred framework (React, Angular, Vue or Vanilla JS),
> * the preferred distribution method.
>
> You get ready-to-use code tailored to your needs!
>
> [Check out our interactive Builder](https://builder.ckeditor.com/?redirect=docs)

<a id="quick-start">

## Quick start

This guide assumes that you already have a Vue project. If you do not have one, see the [Vue documentation](https://vuejs.org/guide/quick-start) to learn how to create it.

> **Note**
>
> To use our Cloud CDN services, [create a free account](https://portal.ckeditor.com/checkout?plan=free). Learn more about [license key activation](../../../licensing/license-key-and-activation.md).

Start by installing the Vue integration for CKEditor 5 from npm:

```bash
npm install @ckeditor/ckeditor5-vue
```

Once the integration is installed, create a new Vue component called `Editor.vue`. It will use the `useCKEditorCloud` helper to load the editor code from the CDN and the `<ckeditor>` component to run it, both of which come from the above package. The following example shows a single file component with open source and premium CKEditor 5 plugins.

```vue
<template>
	<ckeditor
		v-if="editor"
		v-model="data"
		:editor="editor"
		:config="config"
	/>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Ckeditor, useCKEditorCloud } from '@ckeditor/ckeditor5-vue';

const cloud = useCKEditorCloud( {
	version: '48.5.2',
	premium: true
} );

const data = ref( '<p>Hello world!</p>' );

const editor = computed( () => {
	if ( !cloud.data.value ) {
		return null;
	}

	return cloud.data.value.CKEditor.ClassicEditor;
} );

const config = computed( () => {
		if ( !cloud.data.value ) {
		return null;
	}

	const { Essentials, Paragraph, Bold, Italic } = cloud.data.value.CKEditor;
	const { FormatPainter } = cloud.data.value.CKEditorPremiumFeatures;

	return {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
		toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ]
	};
} );
</script>
```

In the above example, the `useCKEditorCloud` helper is used to load the editor code and plugins from CDN. The `premium` option is set to also load premium plugins. For more information about the `useCKEditorCloud` helper, see the [Loading CDN resources](../../../setup/loading-cdn-resources.md) guide.

Now, you can import and use the `Editor.vue` component anywhere in your application.

```vue
<template>
	<Editor />
</template>
```

If you use Nuxt.js with server-side rendering enabled, remember to wrap the `<Editor>` component in the `<ClientOnly>` component to avoid issues with the editor calling browser-specific APIs on the server.

```vue
<template>
	<ClientOnly>
		<Editor />
	</ClientOnly>
</template>
```

<a id="component-directives">

## Component directives

<a id="editor">

### `editor`

This directive specifies the editor to be used by the component. It must directly reference the editor constructor to be used in the template.

```vue
<template>
	<ckeditor :editor="editor" />
</template>
```

<a id="tag-name">

### `tag-name`

> **Warning**
>
> The `tag-name` directive is deprecated in favor of `config.root.element` (or `config.roots.main.element`). The new configuration option lets you customize the tag name, classes, inline styles, and HTML attributes of the editable element. See the [Using an inline editor](#using-an-inline-editor) section below for details.

By default, the editor component creates a `<div>` container which is used as an element passed to the editor (for example, [`ClassicEditor#element`](../../../../api/module_editor-classic_classiceditorui-ClassicEditorUI.md#member-element)). The element can be configured, so for example to create a `<textarea>`, use the following directive:

```vue
<ckeditor :editor="editor" tag-name="textarea" />
```

<a id="v-model">

### `v-model`

A [standard directive](https://v3.vuejs.org/guide/component-basics.html#using-v-model-on-components) for form inputs in Vue. Unlike [`model-value`](#model-value), it creates a two–way data binding, which:

* Sets the initial editor content.
* Automatically updates the state of the application as the editor content changes (for example, as the user types).
* Can be used to set the editor content when necessary.

```vue
<template>
	<ckeditor :editor="editor" v-model="data" />
	<button @click="emptyEditor">Empty the editor</button>

	<h2>Editor data</h2>
	<code>{{ data }}</code>
</template>

<script setup>
import { ref } from 'vue';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.

const data = ref( '<p>Hello world!</p>' );

function emptyEditor() {
	data.value = '';
}
</script>
```

In the above example, the `data` property will be updated automatically as the user types and the content changes. It can also be used to change (as in `emptyEditor()`) or set the initial content of the editor.

If you only want to execute an action when the editor data changes, use the [`input`](#input) event.

<a id="model-value">

### `model-value`

Allows a one–way data binding that sets the content of the editor. Unlike [`v-model`](#v-model), the value will not be updated when the content of the editor changes.

```vue
<template>
	<ckeditor :editor="editor" :model-value="data" />
</template>

<script setup>
import { ref } from 'vue';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.

const data = ref( '<p>Hello world!</p>' );
</script>
```

To execute an action when the editor data changes, use the [`input`](#input) event.

<a id="config">

### `config`

Specifies the [configuration](../../../../api/module_core_editor_editorconfig-EditorConfig.md) of the editor.

```vue
<template>
	<ckeditor :editor="editor" :config="config" />
</template>

<script setup>
import { computed } from 'vue';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.

const config = computed( () => {
	const { Essentials, Paragraph, Bold, Italic } = cloud.data.value.CKEditor;
	const { FormatPainter } = cloud.data.value.CKEditorPremiumFeatures;

	return {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
		toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ]
	};
} );
</script>
```

<a id="disabled">

### `disabled`

This directive controls the [`isReadOnly`](../../../../api/module_core_editor_editor-Editor.md#member-isReadOnly) property of the editor.

It sets the initial read–only state of the editor and changes it during its lifecycle.

```vue
<template>
	<ckeditor :editor="editor" :disabled="disabled" />
</template>

<script setup>
import { ref } from 'vue';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.

const disabled = ref( true );
</script>
```

<a id="disable-two-way-data-binding">

### `disable-two-way-data-binding`

Allows disabling the two-way data binding mechanism. The default value is `false`.

The reason for introducing this option is performance issues in large documents. After enabling this flag, the `v-model` directive will no longer update the connected value whenever the editor’s data is changed.

This option allows the integrator to disable the default behavior and only call the [`editor.getData()`](../../../../api/module_core_editor_editor-Editor.md#function-getData) method on demand, which prevents the slowdowns. You can read more in the [relevant issue](https://github.com/ckeditor/ckeditor5-vue/issues/246).

```vue
<template>
	<ckeditor
		:editor="editor"
		:disable-two-way-data-binding="disableTwoWayDataBinding"
	/>
</template>

<script setup>
import { ref } from 'vue';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.

const disableTwoWayDataBinding = ref( true );
</script>
```

<a id="watchdog-config">

### `watchdog-config`

Allows passing a configuration object to the underlying [`EditorWatchdog`](../../../../api/module_watchdog_editorwatchdog-EditorWatchdog.md). By default, the `<ckeditor>` component automatically wraps the editor with a watchdog that detects crashes and restarts the editor to recover lost content. Use this prop to customize the watchdog behavior, such as the number of allowed crashes before the watchdog gives up, or the minimum time between crashes.

```vue
<template>
	<ckeditor
		:editor="editor"
		:watchdog-config="watchdogConfig"
	/>
</template>

<script setup>
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.

const watchdogConfig = {
	crashNumberLimit: 5,
	minimumNonErrorTimePeriod: 2000
};
</script>
```

See the [`WatchdogConfig` API](../../../../api/module_watchdog_watchdog-WatchdogConfig.md) for the full list of available options.

This prop has no effect when [`disable-watchdog`](#disable-watchdog) is set to `true`.

<a id="disable-watchdog">

### `disable-watchdog`

Allows disabling the built-in watchdog. The default value is `false`.

By default, the `<ckeditor>` component wraps the editor with CKEditor 5’s [`EditorWatchdog`](../../../../api/module_watchdog_editorwatchdog-EditorWatchdog.md), which automatically detects and recovers from editor crashes. Setting `disable-watchdog` to `true` opts out of this behavior - the editor will run without crash recovery.

When the watchdog is disabled, the [`ready`](#ready) and [`destroy`](#destroy) events will each fire at most once during the component’s lifetime, and the [`error`](#error) event will never be emitted.

```vue
<template>
	<ckeditor :editor="editor" :disable-watchdog="true" />
</template>

<script setup>
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.
</script>
```

<a id="component-events">

## Component events

<a id="ready">

### `ready`

Corresponds to the [`ready`](../../../../api/module_core_editor_editor-Editor.md#event-ready) editor event.

```vue
<ckeditor :editor="editor" @ready="onEditorReady" />
```

> **Note**
>
> When the watchdog is active (the default), this event can fire **multiple times** during the component’s lifetime - once after the initial mount and again after each watchdog-triggered editor restart. If you need one-time initialization logic (for example, inserting a toolbar into the DOM for the Document editor type), make sure your handler is idempotent or guard it with a flag.

<a id="focus">

### `focus`

Corresponds to the [`focus`](../../../../api/module_engine_view_document-ViewDocument.md#event-focus) editor event.

```vue
<ckeditor :editor="editor" @focus="onEditorFocus" />
```

<a id="blur">

### `blur`

Corresponds to the [`blur`](../../../../api/module_engine_view_document-ViewDocument.md#event-blur) editor event.

```vue
<ckeditor :editor="editor" @blur="onEditorBlur" />
```

<a id="input">

### `input`

Corresponds to the [`change:data`](../../../../api/module_engine_model_document-ModelDocument.md#event-change:data) editor event.

```vue
<ckeditor :editor="editor" @input="onEditorInput" />
```

<a id="error">

### `error`

Fired when an error is detected by the watchdog - either during editor initialization or at runtime.

```vue
<ckeditor :editor="editor" @error="onEditorError" />
```

The event handler receives two arguments:

* `error` – the `Error` object describing what went wrong.

* `details` – an object with the following properties:

  * `phase: 'initialization' | 'runtime'` – `'initialization'` when the error occurred during `Editor.create()`, or `'runtime'` for errors caught during normal operation.
  * `causesRestart: boolean` – whether the watchdog will attempt to restart the editor. When `false`, no automatic restart is scheduled (for example, the crash limit was reached, or restarting does not apply to this error).

```vue
<template>
	<ckeditor :editor="editor" @error="onEditorError" />
</template>

<script setup>
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

// Editor loading and configuration is skipped for brevity.

function onEditorError( error, { phase, causesRestart } ) {
	if ( phase === 'runtime' && causesRestart ) {
		console.warn( 'Editor crashed: the watchdog is restarting it.', error );
	} else {
		console.error( 'Editor error: the watchdog will not restart the editor automatically.', error );
	}
}
</script>
```

This event is not emitted when [`disable-watchdog`](#disable-watchdog) is set to `true`.

<a id="destroy">

### `destroy`

Corresponds to the [`destroy`](../../../../api/module_core_editor_editor-Editor.md#event-destroy) editor event.

```vue
<ckeditor :editor="editor" @destroy="onEditorDestroy" />
```

> **Note**
>
> Because the destruction of the editor is promise–driven, this event can be fired before the actual promise resolves.

> **Note**
>
> When the watchdog is active (the default), this event can fire **multiple times** during the component’s lifetime - once for each editor instance destroyed during a watchdog restart. It is **not** fired when the component unmounts before the editor finishes initializing. If you need to react to component unmount, use Vue’s `onBeforeUnmount` lifecycle hook instead.

<a id="how-to">

## How to?

<a id="using-the-document-editor-type">

### Using the Document editor type

If you use the [Document (decoupled) editor](../../../../framework/deep-dive/ui/document-editor.md) in your application, you need to [manually add the editor toolbar to the DOM](../../../../api/module_editor-decoupled_decouplededitor-DecoupledEditor.md#static-function-create).

Since accessing the editor toolbar is not possible until after the editor instance is [ready](../../../../api/module_core_editor_editor-Editor.md#event-ready), put your toolbar insertion code in a method executed upon the [`ready`](#ready) event of the component, like in the following example:

```vue
<template>
	<ckeditor
		v-if="editor"
		v-model="data"
		:editor="editor"
		:config="config"
		@ready="onReady"
	/>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Ckeditor, useCKEditorCloud } from '@ckeditor/ckeditor5-vue';

const cloud = useCKEditorCloud( {
	version: '48.5.2'
} );

const data = ref( '<p>Hello world!</p>' );

const editor = computed( () => {
	if ( !cloud.data.value ) {
		return null;
	}

	return cloud.data.value.CKEditor.ClassicEditor;
} );

const config = computed( () => {
	if ( !cloud.data.value ) {
		return null;
	}

	const { Essentials, Paragraph, Bold, Italic, Mention } = cloud.data.value.CKEditor;
	const { SlashCommand } = cloud.data.value.CKEditorPremiumFeatures;

	return {
		licenseKey: '<YOUR_LICENSE_KEY>',
		toolbar: [ 'undo', 'redo', '|', 'bold', 'italic' ],
		plugins: [
			Essentials,
			Paragraph,
			Bold,
			Italic,
			Mention,
			SlashCommand
		]
	};
} );

function onReady( editor ) {
	// Insert the toolbar before the editable area.
	editor.ui.getEditableElement().parentElement.insertBefore(
		editor.ui.view.toolbar.element,
		editor.ui.getEditableElement()
	);
}
</script>
```

<a id="using-an-inline-editor">

### Using an inline editor

Single-root editors such as [`InlineEditor`](../../../../api/module_editor-inline_inlineeditor-InlineEditor.md), [`BalloonEditor`](../../../../api/module_editor-balloon_ballooneditor-BalloonEditor.md), and [`DecoupledEditor`](../../../../api/module_editor-decoupled_decouplededitor-DecoupledEditor.md) can be configured as inline editors that accept only inline content (text, bold, italic, links) instead of blocks. This is useful for short fields such as titles, captions, or single-line inputs.

Set [`root.modelElement`](../../../../api/module_core_editor_editorconfig-RootConfig.md#member-modelElement) to `'$inlineRoot'` to restrict the root to inline content. Optionally, provide a custom [`root.element`](../../../../api/module_core_editor_editorconfig-RootConfig.md#member-element) to render the editable host as a specific tag (for example, `<h1>` for a title) instead of the default `<div>`.

```vue
<template>
	<ckeditor
		v-if="editor"
		:editor="editor"
		:config="config"
	/>
</template>

<script setup>
import { computed } from 'vue';
import { Ckeditor, useCKEditorCloud } from '@ckeditor/ckeditor5-vue';

const cloud = useCKEditorCloud( {
	version: '48.5.2'
} );

const editor = computed( () => {
	if ( !cloud.data.value ) {
		return null;
	}

	return cloud.data.value.CKEditor.BalloonEditor;
} );

const config = computed( () => {
	if ( !cloud.data.value ) {
		return null;
	}

	const { Essentials, Bold, Italic } = cloud.data.value.CKEditor;

	return {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, Bold, Italic ],
		toolbar: [ 'bold', 'italic' ],
		root: {
			element: 'h1',
			modelElement: '$inlineRoot',
			initialData: 'Document title',
			placeholder: 'Enter title...'
		}
	};
} );
</script>
```

The `root.element` property accepts:

* A tag name string, for example `'h1'` or `'section'`.
* A descriptor object with `name`, `classes`, `styles`, and `attributes` fields.

Without `modelElement: '$inlineRoot'`, only the host tag changes – the schema still permits blocks inside the root.

> **Important**
>
> The `<ckeditor>` component always renders a `<div>` host for `ClassicEditor`, regardless of `root.element`. Classic editor wraps its toolbar and editable inside its own structure. Use `InlineEditor`, `BalloonEditor`, or `DecoupledEditor` to control the host element.

<a id="using-the-editor-with-collaboration-plugins">

### Using the editor with collaboration plugins

We provide a **ready-to-use integration** featuring collaborative editing in a Vue application:

* [CKEditor 5 with real-time collaboration features](https://github.com/ckeditor/ckeditor5-collaboration-samples/tree/master/real-time-collaboration-for-vue)

It is not mandatory to build applications on top of the above sample, however, it should help you get started.

<a id="localization">

### Localization

CKEditor 5 supports [multiple UI languages](../../../setup/ui-language.md), and so does the official Vue component. To translate the editor, pass the languages you need into the `translations` array inside the configuration of the `useCKEditorCloud` function.

```vue
<script setup>
import { useCKEditorCloud } from '@ckeditor/ckeditor5-vue';

const cloud = useCKEditorCloud( {
	version: '48.5.2',
	translations: [ 'es' ]
} );
</script>
```

<a id="typescript-support">

### TypeScript support

The CKEditor 5 Vue component is written in TypeScript and provides type definitions. If you use TypeScript in your project, you can take advantage of them. To do so, import the component and its types using an `import type` statement from a special package containing type definitions. Take a look at the following example:

```vue
<script setup>
import { useCKEditorCloud } from '@ckeditor/ckeditor5-vue';
import type { ClassicEditor } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts';

const cloud = useCKEditorCloud( {
	version: '48.5.2',
	translations: [ 'es' ]
} );

const TestEditor = computed<typeof ClassicEditor | null>( () => {
	if ( !cloud.data.value ) {
		return null;
	}

	const {
		ClassicEditor: BaseEditor,
		Paragraph,
		Essentials,
		Heading,
		Bold,
		Italic
	} = cloud.data.value.CKEditor;

	return class TestEditor extends BaseEditor {
		static builtinPlugins = [
			Essentials,
			Paragraph,
			Heading,
			Bold,
			Italic
		];
	};
} );
</script>
```

In the example above, the ClassicEditor type is imported from the `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` package, while the editor itself loads from the CDN. Note that `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` is not an actual URL to the CKEditor 5 types file but a synthetic TypeScript module providing type definitions for the editor. The `ckeditor5` package supplies the actual typings, which depend on the `@ckeditor/ckeditor5-react` package.

Although this setup might seem complex, it prevents users from directly importing anything from the `ckeditor5` package, which could lead to duplicated code issues.

<a id="type-definitions-for-premium-features">

#### Type definitions for premium features

If you want to use types for premium features, you can import them similarly to the base editor types. Remember that you need to install the `ckeditor5-premium-features` package to use them. You can do it by running the following command:

```bash
npm install --save-dev ckeditor5-premium-features
```

After installing the package, you can import the types in the following way:

```vue
<script setup>
// ...
import type { Mention } from 'https://cdn.ckeditor.com/typings/ckeditor5-premium-features.d.ts';
// ...
</script>
```

<a id="known-issues">

## Known issues

While type definitions for the base editor should be available out of the box, some bundlers do not install the `ckeditor5` package, which provides typing for the editor. If you encounter any issues with the type definitions, you can install the `ckeditor5` package manually:

```bash
npm install --save-dev ckeditor5
```

<a id="contributing-and-reporting-issues">

## Contributing and reporting issues

The source code of this component is available on GitHub in <https://github.com/ckeditor/ckeditor5-vue>.

<a id="next-steps">

## Next steps

* See how to manipulate the editor’s data in the [Getting and setting data](../../../setup/getting-and-setting-data.md) guide.
* Refer to further guides in the [setup section](../../../setup/configuration.md) to see how to customize your editor further.
* Check the [features category](../../../../features/index.md) to learn more about individual features.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../../../llms.txt)