New Vue.js Project

This guide walks you through integrating the CreativeEditor SDK (CE.SDK) into a new 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 using Vue 2 or 3 (Vue CLI or Vite).
Want to embed a powerful creative editor directly into a web app.
Prefer a component-based approach for SDK initialization and teardown.

What You’ll Achieve

Create a Vue.js project with CE.SDK installed.
Load the editor via CDN or npm.
Add default assets and templates to get started quickly.

Prerequisites

Make sure you have the following installed:

Node.js (v20 or later)
npm or yarn
Vue CLI (for Vue 2/3) Install with:
Terminal window
```
npm install -g @vue/cli
```

Step 1: Create a New Vue Project

vue create cesdk-vue-app

Choose the default preset or manually select Babel, Router, etc.
Navigate to your project folder:
Terminal window
```
cd cesdk-vue-app
```

Step 2: Install CE.SDK

npm install --save @cesdk/cesdk-js

Step 3: Create the Editor Component

Create 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 4: Use the Component in App.vue

Replace your template/script in App.vue:

<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: For convenience, CE.SDK serves assets (e.g., images, stickers, fonts) from IMG.LY’s CDN by default. In production, you should serve assets from your own server

Step 6: Run the Project

npm run serve

Go to http://localhost:8080/ to see CE.SDK running in your Vue app.

Troubleshooting & Common Errors

❌ CE.SDK not visible

Ensure the #cesdk_container element is full-screen and not obstructed by parent layout.

❌ Invalid license key

Use a valid trial or production license key.

❌ Runtime error: Cannot read private member #e

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

Fix this by excluding CE.SDK modules from Babel:

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

Restart your dev server with:

npm run serve