--- 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) 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. Advanced integrations can make use of the component working with [custom builds created from source](#using-ckeditor-from-source) after some [configuration](#configuring-vueconfigjs). The component is compatible with Vue.js 2.x. ## Quick start Install the [CKEditor 5 rich text editor component for Vue.js](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue) and the 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 ``` ### 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 using the [`Vue.use()`](https://vuejs.org/v2/api/#Vue-use) method, specifying the editor build you want to use: ```js Vue.use( CKEditor, { editors: { classic: ClassicEditor } } ); ``` Check out the [component configuration](#component-configuration) section to learn more about the available options. You can always configure the component locally if you do not want to [specify editor builds](#local-configuration) at that point or just to [avoid using `Vue.use()`](#local-component-registration). 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: { editorData: '

Content of the editor.

', editorConfig: { // Configuration of the editor. } } } ); ``` 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, specifying the editor builds you want to use: ```js import Vue from 'vue'; import CKEditor from '@ckeditor/ckeditor5-vue'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; Vue.use( CKEditor, { editors: { classic: ClassicEditor } } ); ``` Check out the [component configuration](#component-configuration) section to learn more. You can always configure the component locally if you do not want to [specify editor builds](#local-configuration) at that point or just to [avoid using `Vue.use()`](#local-component-registration). 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 [`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 the component locally #### Local configuration If a per–view editor configuration is what suits you best, you can skip the [`editors`](#editors) option in `Vue.use()`: ```js Vue.use( CKEditor ); ``` and then pass the editor of your choice in the [`editor`](#editor) directive: ```html ``` #### Local component registration If you do not want the CKEditor component to be enabled globally, you can entirely skip the `Vue.use( CKEditor, { ... } )` part. Instead, configure it in the `components` property of your view: ```html ``` ## Using CKEditor from source Integrating the rich text editor from source allows you to use the full power of the {@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-dev-webpack-plugin \ @ckeditor/ckeditor5-dev-utils \ postcss-loader \ raw-loader ``` 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 node_modules directory is not transpiled, so we 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' } ) ] }, css: { loaderOptions: { // Various modules in the CKEditor source code import .css files. // These files must be transpiled using PostCSS in order to load properly. postcss: styles.getPostCssConfig( { themeImporter: { themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) }, minify: true } ) } }, chainWebpack: config => { // Vue CLI would normally use own loader to load .svg files. The icons used by // CKEditor should be loaded using the raw-loader instead. config.module .rule( 'svg' ) .test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ ) .use( 'file-loader' ) .loader( 'raw-loader' ); } }; ``` ### Configuring 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-basic-styles \ @ckeditor/ckeditor5-link \ @ckeditor/ckeditor5-paragraph ``` You can use more packages, depending on which feature are needed in your application. Create a separate `ckeditor.js` file that will combine editor features (`BoldPlugin`, `ItalicPlugin`, etc.) with the base editor (`ClassicEditorBase`) and export it as your custom editor (`MyEditor`): You can use the same methodology to integrate multiple CKEditor builds in your application as an optimized {@link builds/guides/integration/advanced-setup#scenario-3-using-two-different-editors "super build"}, e.g. when you need both `ClassicEditor` and `BalloonEditor`. ```js import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'; import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'; import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'; import LinkPlugin from '@ckeditor/ckeditor5-link/src/link'; import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'; export default class MyEditor extends ClassicEditorBase {} MyEditor.builtinPlugins = [ EssentialsPlugin, BoldPlugin, ItalicPlugin, LinkPlugin, ParagraphPlugin ]; MyEditor.defaultConfig = { toolbar: { items: [ 'bold', 'italic', 'link', 'undo', 'redo' ] }, language: 'en' }; ``` ### Using the editor from source Make sure your editor is [available to the component](#editors) (e.g. in `main.js`): ```js import CKEditor from '@ckeditor/ckeditor5-vue'; import MyEditor from './ckeditor'; Vue.use( CKEditor, { editors: { myEditor: MyEditor } } ); ``` You can always configure the component locally if you do not want to [specify the editors](#local-configuration) at that point or just to [avoid using `Vue.use()`](#local-component-registration). Now all you need to do is specify `myEditor` in the [`editor`](#editor) directive to get your CKEditor instance use `MyEditor`: ```html ``` ## Component configuration You can entirely skip the configuration part if you decide to [configure the component locally](#local-component-registration-and-configuration). ### `editors` This configuration specifies editors available to the component. You can use {@link builds/guides/overview ready-to-use builds} or [editors from source](#using-ckeditor-from-source): ```js import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; Vue.use( CKEditor, { editors: { classic: ClassicEditor, // ... } } ); ``` Use the [name of the editor](#editor) in your template to create the editor instance of your choice: ```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"}. You can skip this configuration and [pass the editor directly](#local-configuration) in the [`editor`](#editor) directive. ### `componentName` You can change the name of the CKEditor component using the `componentName` property (by default ``): ```js Vue.use( CKEditor, { componentName: 'myEditor' } ); ``` Use the new component name in the template to create editor instances: ```html ``` ## Component directives ### `editor` This directive specifies the editor to be used by the component. It should either: * correspond to one of [registered editors](#editors): ```js import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; Vue.use( CKEditor, { editors: { classic: ClassicEditor, // ... } } ); ``` ```html ``` * [directly reference](#local-configuration) the editor 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/classiceditor~ClassicEditor#element `ClassicEditor#element`}). The element can be configured, e.g. to create a `