New Vue.js Project Without UI

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:

Node.js (v20 or later)
npm or yarn
A valid CE.SDK license key (Get a free trial)
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>
  <CreativeEditor
    :config="config"
    :init="init"
    width="100vw"
    height="100vh"
  />
</template>

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

export default {
  name: 'CreativeEditorWrapper',
  components: {
    CreativeEditor
  },
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      init: async (cesdk) => {
        await cesdk.addDefaultAssetSources();
        await cesdk.addDemoAssetSources({ sceneMode: 'Design' });
        await cesdk.createDesignScene();
      }
    };
  }
};
</script>

Step 4: Use the Component in App.vue#

Replace your template/script in App.vue:

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

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

export default {
  name: 'App',
  components: { CreativeEditorWrapper },
  data() {
    return {
      editorConfig: {
        license: 'YOUR_LICENSE_KEY',
        baseURL:
          'https://cdn.img.ly/packages/imgly/cesdk-js/1.59.1/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 5: 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