Existing Nuxt.js Project

This guide shows you how to add the CreativeEditor SDK (CE.SDK) to your current Nuxt.js app. You’ll create a client-only component to safely load CE.SDK after hydration and avoid SSR issues.

Who is This Guide For?

This guide is for developers who:

Already have a working Nuxt.js (v2 or v3) project.
Want to embed CE.SDK in an existing page, layout, or component.
Need a client-only (browser-side) editor integration.

What You’ll Achieve

Install CE.SDK and load it from the CDN.
Create a responsive editor component for CE.SDK.
Integrate the component using client-only rendering to avoid SSR issues.

Step 1: Install CE.SDK

While you’ll load CE.SDK from the CDN, installing the npm package provides better compatibility and editor support.

npm install @cesdk/cesdk-js

Step 2: Create a Client-Only Editor Component

Inside your existing project, add a new file: components/CreativeEditor.vue.

<template>
  <div id="cesdk_container" style="width: 100vw; height: 100vh;"></div>
</template>

<script>
export default {
  name: 'CreativeEditor',
  mounted() {
    import('https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js')
      .then(async ({ default: CreativeEditorSDK }) => {
        const config = {
          license: 'YOUR_LICENSE_KEY',
          baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets',
          callbacks: { onUpload: 'local' }
        };

        const instance = await CreativeEditorSDK.create('#cesdk_container', config);
        await instance.addDefaultAssetSources();
        await instance.addDemoAssetSources({ sceneMode: 'Design' });
        await instance.createDesignScene();
      });
  }
};
</script>

Editor Setup Disclaimer

By default, CE.SDK assets like fonts, templates, and images are loaded from the IMG.LY CDN. For production use, consider self-hosting assets.

Step 3: Use the Component in Your App

Update an existing page or layout where you want to embed CE.SDK.

Nuxt 2 – Example `pages/index.vue`

<template>
  <client-only>
    <CreativeEditor />
  </client-only>
</template>

<script>
import CreativeEditor from '~/components/CreativeEditor.vue';

export default {
  components: {
    CreativeEditor
  }
};
</script>

Nuxt 3 – Example `pages/index.vue`

<template>
  <ClientOnly>
    <CreativeEditor />
  </ClientOnly>
</template>

<script setup>
  import CreativeEditor from '~/components/CreativeEditor.vue';
</script>

Use <client-only> (Nuxt 2) or <ClientOnly> (Nuxt 3) to prevent CE.SDK from running on the server.
These wrappers are required to avoid hydration errors.

Troubleshooting & Common Errors

❌ ReferenceError: window is not defined

CE.SDK is being rendered on the server. Wrap the component in <client-only> (Nuxt 2) or <ClientOnly> (Nuxt 3).

❌ create is not a function

Ensure CE.SDK is loaded using dynamic import() syntax — not require().

❌ Editor does not load

Check the console for errors.
Confirm the container div is styled and visible.
Make sure your license key is valid and assets are accessible.