CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Getting started

Integrate CKEditor 5 with Nuxt using 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.

CKEditor 5 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.

CKEditor 5 Builder

In our interactive Builder you can 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. You can easily select:

  • The editor type.
  • The features you need.
  • Preferred framework (React, Angular, Vue or Vanilla JS).
  • Preferred distribution method.

At the end you get ready-to-use code tailored to your needs!

Check out our interactive Builder

# Setting up the project

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

# Installing from npm

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.

Starting from version 44.0.0, the licenseKey property is required to use the editor. If you use a self-hosted editor from npm:

You can set up a free trial to test the editor and evaluate the self-hosting.

<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.