# Integrating CKEditor 5 with Nuxt from npm

You can integrate CKEditor 5 with [Nuxt](https://nuxt.com/) using the official [CKEditor 5 Vue component](vue/vue-default-npm.md). Because CKEditor 5 relies on browser APIs, it cannot be pre-rendered with server-side rendering (SSR) or static site generation (SSG); instead, you load it on the client side (client-side rendering, CSR). You will need a [Nuxt project](https://nuxt.com/docs/getting-started/installation).

> **Create your own CKEditor 5**
>
> Check out our interactive Builder to 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.
>
> * editor type,
> * the features you need,
> * the preferred framework (React, Angular, Vue or Vanilla JS),
> * the preferred distribution method.
>
> You get ready-to-use code tailored to your needs!
>
> [Check out our interactive Builder](https://builder.ckeditor.com/?redirect=docs)

<a id="setting-up-the-project">

## Setting up the project

This guide assumes you already have a Nuxt project. To create such a project, follow the [Nuxt installation guide](https://nuxt.com/docs/getting-started/installation).

<a id="installing-from-npm">

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

```bash
npm install ckeditor5 ckeditor5-premium-features
```

Nuxt is based on Vue.js, so install the [CKEditor 5 WYSIWYG editor component for Vue.js](https://www.npmjs.com/package/@ckeditor/ckeditor5-vue), too:

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

> **Note**
>
> 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 must either comply with the GPL or
> * Obtain a license for [self-hosting distribution](../../licensing/license-key-and-activation.md).
>
> You can set up [a free trial](https://portal.ckeditor.com/checkout?plan=free) to test the editor and evaluate the self-hosting.

```html
<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>',
		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.

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

> **Note**
>
> In the example above, we only used basic features of the `<ckeditor>` component. To learn more about additional features and configuration options – including inline editors – refer to the [Vue.js integration guide](vue/vue-default-npm.md).

<a id="next-steps">

## Next steps

* See how to manipulate the editor’s data in the [Getting and setting data](../../setup/getting-and-setting-data.md) guide.
* Refer to further guides in the [setup section](../../setup/configuration.md) to see how to customize your editor further.
* Check the [features category](../../../features/index.md) to learn more about individual features.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../../llms.txt)