Integrating CKEditor 5 with Nuxt from CDN

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.

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

npm install @ckeditor/ckeditor5-vue

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-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: '46.1.0',
    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 hook loads the editor code and plugins from CDN. To use premium plugins, set the premium property to true and provide your license key in the configuration. For more information about the useCKEditorCloud helper, see the Loading CDN resources guide.

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.