# Ckeditor 5 Nuxt integration

> Guide on Implementing the default CKEditor build for Nuxt 2 and Nuxt 3

BlowStack blog, published 2020-12-08, updated 2022-10-16, 2 min read. Page: https://blowstack.com/blog/ckeditor-5-nuxt-integration

## Installing the Necessary Packages

To incorporate CKEditor 5 into your Nuxt application, you need to install the right packages. The choice of packages depends on whether you're using Nuxt 2 or Nuxt 3, as they rely on different versions of Vue.

- **For Nuxt 2 (Vue 2):** Use `**@ckeditor/ckeditor5-vue2**`, which is tailored for Vue 2.

- **For Nuxt 3 (Vue 3):** Use `**@ckeditor/ckeditor5-vue**`, designed for Vue 3 integration.

### Installation Commands

**If you're working with Nuxt 2**, install the Vue 2 compatible version of CKEditor along with the classic build using:

```plaintext
npm install --save @ckeditor/ckeditor5-vue2 @ckeditor/ckeditor5-build-classic
```

**For Nuxt 3 projects**, the command to install the Vue 3 compatible version of CKEditor and the classic build is:

```plaintext
npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic
```

Choose the command based on the version of Nuxt and Vue you are using in your project.

## Implementing CKEditor 5 in a Component

Create a new component to incorporate CKEditor into your project. The implementation should account for server-side rendering considerations, such as the absence of the `**window**` object during server-side execution. The following example demonstrates how to conditionally import and use CKEditor only on the client side, avoiding server-side rendering issues.

### **Create the CKEditor component (**`**components/CkeditorNuxt.vue**`**):**

```javascript
<template>
  <ckeditor :editor="editor" :value="value" :config="config" :tagName="tagName" :disabled="disabled" @input="event => $emit('input', event)" />
</template>

<script>
let ClassicEditor;
let CKEditor;

if (process.client) {
  ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
  CKEditor = require('@ckeditor/ckeditor5-vue2');
} else {
  CKEditor = { component: { template: '<div></div>' } };
}

export default {
  components: {
    ckeditor: CKEditor.component,
  },
  props: {
    value: String,
    tagName: {
      type: String,
      default: 'div',
    },
    disabled: Boolean,
    uploadUrl: String,
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      editor: ClassicEditor,
    };
  },
};
</script>
```

### **Use the component in your application (e.g.,** `**pages/index.vue**`**)**

```javascript
template>
  <div class="container">
    <ckeditor-nuxt v-model="content" />
    <button @click="saveContent">Save</button>
  </div>
</template>

<script>
import CkeditorNuxt from '@/components/CkeditorNuxt';

export default {
  components: { CkeditorNuxt },
  data() {
    return {
      content: '',
    };
  },
  methods: {
    saveContent() {
      alert(this.content);
    },
  },
};
</script>
```

## Integrating a Custom Build

The standard editions of CKEditor 5 may lack certain features, prompting the need for additional plugins to enhance functionality. Often, integrating new plugins directly into the standard setup is not feasible, necessitating the creation of a custom build.

To create a custom build with your chosen plugins, follow the guidelines provided in the [create CKEditor 5 custom build post](https://blowstack.com/blog/create-ckeditor-5-custom-build). It's advisable to verify the performance of the default build before proceeding with a custom version. Once your custom build is ready, replace the standard build with your custom one in the CKEditorNuxt component  

```javascript
// components/ckeditornuxt

if (process.client) {
  ClassicEditor = require('./NewCustomBuild')
  CKEditor = require('@ckeditor/ckeditor5-vue2')
} else {
  CKEditor = { component : {template:'<div></div>'}}
}
```

---

BlowStack: AWS practice exams and courses, https://blowstack.com/practice-exams