Skip to content

New Nuxt.js Project

This guide walks you through integrating the CreativeEditor SDK (CE.SDK) into a Nuxt.js app. You’ll create a client-only component that loads CE.SDK after hydration to avoid SSR issues.

Who is This Guide For?

This guide is for developers who:

  • Are building with Nuxt.js (v2 or v3).
  • Want to embed CE.SDK in a page, layout, or app view.
  • Need a browser-only (client-side) editor integration.

What You’ll Achieve

  • Set up a Nuxt.js app (v2 or v3).
  • Install and load CE.SDK from the CDN.
  • Render CE.SDK inside a fully responsive editor container.
  • Avoid server-side rendering issues with client-only loading.

Step 1: Set Up a Nuxt.js Project

For Nuxt 3

Terminal window
npx nuxi init cesdk-nuxt-app
cd cesdk-nuxt-app
npm install
npm run dev

Learn more: Nuxt 3 docs

For Nuxt 2

Terminal window
npx create-nuxt-app cesdk-nuxt2-app
cd cesdk-nuxt2-app
npm run dev

Choose appropriate options during setup.

Step 2: Install CE.SDK

Even though we’re using the CDN for loading, it’s helpful to install the npm package:

Terminal window
npm install @cesdk/cesdk-js

Step 3: Create a Client-Only Editor Component

Create 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

CE.SDK assets (fonts, templates, images) are loaded from IMG.LY’s CDN by default. For production, you can host your own assets.

Step 4: Use the Component in a Page

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>
  • client-only (Nuxt 2) and ClientOnly (Nuxt 3) ensure CE.SDK loads only on the client.
  • These tags are crucial to prevent hydration errors.

Troubleshooting & Common Errors

❌ ReferenceError: window is not defined

You’re rendering CE.SDK on the server. Use <client-only> or <ClientOnly> to restrict to client-side rendering.

❌ create is not a function

Make sure you’re using dynamic import() — not require() — to load CE.SDK from the CDN.

❌ Editor does not load

  • Check your license key.
  • Ensure the container div is visible and styled correctly.
  • Inspect console logs for CORS issues when loading from CDN.

Next Steps