--- menu-title: Vue.js component category: builds-integration-frameworks order: 40 --- # Rich text editor component for Vue.js [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-vue.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue) CKEditor 5 consists of {@link builds/guides/overview ready-to-use editor builds} and {@link framework/guides/overview CKEditor 5 Framework} upon which the builds are based. The [easiest way](#quick-start) to use CKEditor 5 in your Vue.js application is by choosing one of the {@link builds/guides/overview#available-builds rich text editor builds} and simply passing it to the configuration of the Vue.js component. Read more about this solution in the [Quick start](#quick-start) section. Additionally, you can [integrate CKEditor 5 from source](#using-ckeditor-from-source) which is a much more flexible and powerful solution, but requires some additional configuration. The component is compatible with Vue.js 2.x. ## Quick start Install the [CKEditor 5 WYSIWYG editor component for Vue.js](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue) and the {@link builds/guides/overview#available-builds editor build of your choice}. Assuming that you picked [`@ckeditor/ckeditor5-build-classic`](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-classic): ```bash npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic ``` You now need to enable the CKEditor component in your application. There are 2 ways to do so: * [via a direct script include](#direct-script-include), * [by using ES6 module imports](#using-es6-modules). Optionally, you can [use the component locally](#using-component-locally). ### Direct script include This is the quickest way to start using CKEditor in your project. Assuming [Vue is installed](https://vuejs.org/v2/guide/installation.html), include the ` ``` Enable the component in your application by using the [`Vue.use()`](https://vuejs.org/v2/api/#Vue-use) method: ```js Vue.use( CKEditor ); ``` Instead of calling `Vue.use()`, you can always [use the component locally](#using-component-locally). Use the `` component in your template: * The [`editor`](#editor) directive specifies the editor build. * The [`v-model`](#v-model) directive enables an out–of–the–box two–way data binding. * The [`config`](#config) directive helps you pass the configuration to the editor instance. ```html
``` ```js const app = new Vue( { el: '#app', data: { editor: ClassicEditor, editorData: '

Content of the editor.

', editorConfig: { // The configuration of the editor. } } } ); ``` Voilà! You should see CKEditor 5 running in your Vue.js app. See the list of supported [directives](#component-directives) and [events](#component-events) that will help you configure the component. ### Using ES6 modules The editor component comes as a [UMD module](https://github.com/umdjs/umd), which makes it possible to use in various environments, for instance, applications generated by [Vue CLI 3](https://cli.vuejs.org/), built using [webpack](https://webpack.js.org), etc. To create an editor instance, you must first import the editor build and the component modules into the root file of your application (e.g. `main.js` when generated by Vue CLI). Then, enable the component using the [`Vue.use()`](https://vuejs.org/v2/api/#Vue-use) method: ```js import Vue from 'vue'; import CKEditor from '@ckeditor/ckeditor5-vue'; Vue.use( CKEditor ); ``` Instead of calling `Vue.use()`, you can always [use the component locally](#using-component-locally). The following example showcases a single–file component of the application. Use the `` component in your template: * The [`editor`](#editor) directive specifies the editor build (the editor constructor). * The [`v-model`](#v-model) directive enables an out–of–the–box two–way data binding. * The [`config`](#config) directive helps you pass the configuration to the editor instance. ```html ``` See the list of supported [directives](#component-directives) and [events](#component-events) that will help you configure the component. ## Using component locally If you do not want the CKEditor component to be enabled globally, you can skip the `Vue.use( CKEditor )` part entirely. Instead, configure it in the `components` property of your view. Make sure `CKEditor` and `ClassicEditor` are accessible depending on the integration scenario: as [direct script includes](#direct-script-include) or [ES6 module imports](#using-es6-modules). ```html ``` ## Using CKEditor from source Integrating the rich text editor from source allows you to use the full power of {@link framework/guides/overview CKEditor 5 Framework}. This guide assumes that you are using [Vue CLI 3+](https://cli.vuejs.org) as your boilerplate and your application has been created using the [`vue create`](https://cli.vuejs.org/guide/creating-a-project.html#vue-create) command. Learn more about building CKEditor from source in the {@link builds/guides/integration/advanced-setup Advanced setup} guide. ### Configuring `vue.config.js` To build CKEditor with your application, certain changes must be made to the default project configuration. First, install the necessary dependencies: ```bash npm install --save \ @ckeditor/ckeditor5-vue \ @ckeditor/ckeditor5-dev-webpack-plugin \ @ckeditor/ckeditor5-dev-utils \ postcss-loader \ raw-loader@0.5.1 ``` Edit the `vue.config.js` file and use the following configuration. If the file is not present, create it in the root of the application (i.e. next to `package.json`): ```js const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' ); const { styles } = require( '@ckeditor/ckeditor5-dev-utils' ); module.exports = { // The source of CKEditor is encapsulated in ES6 modules. By default, the code // from the node_modules directory is not transpiled, so you must explicitly tell // the CLI tools to transpile JavaScript files in all ckeditor5-* modules. transpileDependencies: [ /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/, ], configureWebpack: { plugins: [ // CKEditor needs its own plugin to be built using webpack. new CKEditorWebpackPlugin( { // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html language: 'en' } ) ] }, chainWebpack: config => { // Vue CLI would normally use its own loader to load .svg and .css files. The icons // used by CKEditor should be loaded using raw-loader instead. //Add the ability to build the CSS files config.module .rule('cke-css') .test(/(.*)ckeditor5-(.*).css/) .use('postcss-loader') .loader('postcss-loader') .tap(() => { return styles.getPostCssConfig({ themeImporter: { themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), }, minify: true, }); }); // Get the default rule for *.svg files. const svgRule = config.module.rule( 'svg' ); // Then you can either: // // * clear all loaders for existing 'svg' rule: // // svgRule.uses.clear(); // // * or exclude ckeditor directory from node_modules: svgRule.exclude.add( __dirname + '/node_modules/@ckeditor' ); // Add an entry for *.svg files belonging to CKEditor. You can either: // // * modify the existing 'svg' rule: // // svgRule.use( 'raw-loader' ).loader( 'raw-loader' ); // // * or add a new one: config.module .rule( 'cke-svg' ) .test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ ) .use( 'raw-loader' ) .loader( 'raw-loader' ); } }; ``` By default, the Vue CLI uses [`file-loader`](https://webpack.js.org/loaders/file-loader/) for all SVG files. The `file-loader` copies the file to the output directory and resolves imports into URLs. The CKEditor's UI components use SVG {@link module:ui/icon/iconview~IconView#content source directly} so the theme icons must be loaded using [`raw-loader`](https://webpack.js.org/loaders/raw-loader). If your project uses different approach then CKEditor's UI library you must create different webpack loader rules for your project SVG files and CKEditor's ones. ### Using the editor from source Having configured `vue.config.js`, you can choose the building blocks of your editor. Install the packages necessary for your integration: ```bash npm install --save \ @ckeditor/ckeditor5-editor-classic \ @ckeditor/ckeditor5-essentials \ @ckeditor/ckeditor5-basic-styles \ @ckeditor/ckeditor5-link \ @ckeditor/ckeditor5-paragraph \ @ckeditor/ckeditor5-theme-lark ``` You can use more packages, depending on which features are needed in your application. ```js import CKEditor from '@ckeditor/ckeditor5-vue'; Vue.use( CKEditor ); ``` Instead of calling `Vue.use()`, you can always [use the component locally](#using-component-locally). Now all you need to do is specify the list of rich text editor options (**including plugins**) in the `editorConfig` data property: ```html ``` ## Using the Document editor build If you use the {@link framework/guides/document-editor Document editor} in your application, you need to {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create manually add the editor toolbar to the DOM}. Since accessing the editor toolbar is not possible until after the editor instance is {@link module:core/editor/editor~Editor#event:ready ready}, put your toolbar insertion code in a method executed upon the [`ready`](#ready) event of the component, like in the following example: ```html ``` ## Component directives ### `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. ```html ``` To use more than one rich text editor build in your application, you will need to configure it [from source](#using-ckeditor-from-source) or use a {@link builds/guides/integration/advanced-setup#scenario-3-using-two-different-editors "super build"}. ### `tag-name` By default, the editor component creates a `
` container which is used as an element passed to the editor (e.g. {@link module:editor-classic/classiceditorui~ClassicEditorUI#element `ClassicEditor#element`}). The element can be configured, so for example to create a `