Existing Vue.js Project

This guide walks you through integrating the CreativeEditor SDK (CE.SDK) into an existing Vue.js application. By the end, you’ll have a functional editor rendered within a Vue component — ready for editing, templating, or further customization.

Who is This Guide For?

This guide is for developers who:

Are already working with a Vue 2 or 3 project (Vue CLI or Vite).
Want to embed a powerful creative editor directly into their app.
Prefer a component-based integration without starting from scratch.

What You’ll Achieve

Add CE.SDK to your existing Vue project.
Render the editor inside a reusable component.
Configure basic asset sources and scene loading.

Prerequisites

Ensure you have:

An existing Vue.js project.
Node.js v20+
npm or yarn

Step 1: Install CE.SDK

In your project root, run:

npm install --save @cesdk/cesdk-js

Step 2: Create the Editor Component

Create a file at src/components/CreativeEditor.vue:

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

<script>
import CreativeEditorSDK from '@cesdk/cesdk-js';

export default {
  name: 'CreativeEditor',
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      cesdkInstance: null
    };
  },
  async mounted() {
    this.cesdkInstance = await CreativeEditorSDK.create('#cesdk_container', this.config);
    await this.cesdkInstance.addDefaultAssetSources();
    await this.cesdkInstance.addDemoAssetSources({ sceneMode: 'Design' });
    await this.cesdkInstance.createDesignScene();
  },
  beforeUnmount() {
    if (this.cesdkInstance) {
      this.cesdkInstance.dispose();
      this.cesdkInstance = null;
    }
  }
};
</script>

Step 3: Use the Component in App.vue

Open App.vue (or any parent view), and replace or extend the template/script like so:

<template>
  <CreativeEditor :config="editorConfig" />
</template>

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

export default {
  name: 'App',
  components: { CreativeEditor },
  data() {
    return {
      editorConfig: {
        license: 'YOUR_LICENSE_KEY',
        baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets',
        callbacks: {
          onUpload: 'local'
        }
      }
    };
  }
};
</script>

Editor Setup Disclaimer

Note: CE.SDK serves all assets (images, fonts, templates) from IMG.LY’s CDN by default. In production, you should serve assets from your own servers.

Step 4: Run Your Project

If using Vue CLI:

npm run serve

Then visit http://localhost:8080/ to see the editor.

Troubleshooting & Common Errors

❌ CE.SDK not visible

Ensure the container <div> is full screen and styled correctly.

❌ Invalid license key

Check that your license key is correct and not expired. You can get a free trial here.

❌ Runtime error: Cannot read private member #e

This is caused by Babel transpiling CE.SDK code, which uses modern JS features like #privateFields.

Fix this by excluding CE.SDK from Babel transpilation:

Create or update vue.config.js in your project root:

const path = require('path');

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set(
        '@cesdk/engine',
        path.resolve(__dirname, 'node_modules/@cesdk/engine'),
      )
      .set(
        '@cesdk/cesdk-js',
        path.resolve(__dirname, 'node_modules/@cesdk/cesdk-js'),
      );

    config.module
      .rule('js')
      .exclude.add(path.resolve(__dirname, 'node_modules/@cesdk/engine'))
      .add(path.resolve(__dirname, 'node_modules/@cesdk/cesdk-js'))
      .end();
  },
};

Then clean and reinstall:

rm -rf node_modules
npm install

And restart:

npm run serve