Integrating CKEditor 5 with Nuxt from npm

Nuxt is a Vue.js meta-framework for creating full-stack web applications. It offers everything you would expect from a modern framework, including various rendering modes, file-based routing, automatic code splitting, a large ecosystem of plugins and hosting integrations, and more.

The CKEditor 5 HTML editor does not support server-side rendering, but you can integrate it with the Nuxt framework. In this guide, you will add the editor to a Nuxt project. For this purpose, you will need a Nuxt project and the official CKEditor 5 Vue component.

This guide assumes you already have a Nuxt project. To create such a project, follow the Nuxt installation guide.

First, install the CKEditor 5 packages:

• ckeditor5 – package with open-source plugins and features.
• ckeditor5-premium-features – package with premium plugins and features.

Depending on your configuration and chosen plugins, you may need to install the first or both packages.

npm install ckeditor5 ckeditor5-premium-features

Nuxt is based on Vue.js, so install the CKEditor 5 WYSIWYG editor component for Vue.js, too:

npm install @ckeditor/ckeditor5-vue

Next, you will use the installed dependencies in a Vue.js component. Create a new component in the components directory, for example, components/Editor.vue. It will use the <ckeditor> component to run the editor. The following example shows a single file component with open-source and premium CKEditor 5 plugins.

<template>
    <ckeditor
        v-model="data"
        :editor="ClassicEditor"
        :config="config"
    />
</template>

<script setup>
import { ref, computed } from 'vue';
import { ClassicEditor, Essentials, Paragraph, Bold, Italic } from 'ckeditor5';
import { FormatPainter } from 'ckeditor5-premium-features';
import { Ckeditor } from '@ckeditor/ckeditor5-vue';

import 'ckeditor5/ckeditor5.css';
import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

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

const config = computed( () => {
    return {
        licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
        plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
        toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ]
    };
} );
</script>

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

<template>
    <ClientOnly>
        <Editor />
    </ClientOnly>
</template>

Notice that the <Editor> component is wrapped in a <ClientOnly> component. It is required because CKEditor 5 does not support server-side rendering. The <ClientOnly> component ensures that the editor is rendered only on the client side.

You can run your project now using the npm run dev command to see your application in the browser.

In the example above, we only used basic features of the <ckeditor> component. To learn more about additional features and configuration options, refer to the Vue.js integration guide.

• See how to manipulate the editor’s data in the Getting and setting data guide.
• Refer to further guides in the setup section to see how to customize your editor further.
• Check the features category to learn more about individual features.