Skip to main content

Integrate CreativeEditor SDK with Vue.js

In this example, we will show you how to integrate CreativeEditor SDK with Vue.js.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

Prerequisites#

No trial license key required.#

The trial of CreativeEditor SDK works without a license key. A commercial license key is required for use in a production environment. Get a license key at Pricing

Setup#

In this example, we will use the SDK directly via our CDN. For use in a production environment we recommend serving assets from your own servers.

1. Add CE.SDK to your Project#

Install the @cesdk/cesdk-js dependency via

npm install --save @cesdk/cesdk-js.

The SDK is served entirely via CDN, so we just need to import the CE.SDK module.

JavaScript
import CreativeEditorSDK from '@cesdk/cesdk-js';

2. Create an empty Container#

We need to add an empty <div> as a container for the SDK. We configure the <div> element to fully fill the browser window.

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

3. Create a CreativeEditorSDK component#

We setup a basic component that'll encapsulate the SDK. The component is configured to fill the browser window and creates a CreativeEditorSDK instance when mounted.

JavaScript
export default {
name: 'CreativeEditorSDK',
props: { config: Object },
_cesdk: null,
mounted: function mounted() {
CreativeEditorSDK.init('#cesdk_container', this.config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
this._cesdk = instance;
});
},
methods: {},
watch: {},
beforeDestroy: function beforeDestroy() {
if (this._cesdk) {
this._cesdk.dipose();
this._cesdk = null;
}
}
};

4. Loading the CreativeEditorSDK instance#

In the components onMount we instantiate the SDK. To allow configuration of the SDK from outside the component, we pass a config object from the component's props. As all our assets are served through our CDN, that's all we need for now.

JavaScript
mounted: function mounted() {
CreativeEditorSDK.init('#cesdk_container', this.config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
this._cesdk = instance;
});
},

5. Serving locally#

In order to use the editor we need to run our project via npm.

npm run serve will spin up a development server at http://localhost:8080

Congratulations!#

You've got CE.SDK up and running. Get to know the SDK and dive into the next steps, when you're ready:


<template>
<div id="cesdk_container" style="height: 100vh; width: 100vw"></div>
</template>
<script>
import CreativeEditorSDK from '@cesdk/cesdk-js';
export default {
name: 'CreativeEditorSDK',
props: { config: Object },
_cesdk: null,
mounted: function mounted() {
CreativeEditorSDK.init('#cesdk_container', this.config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
this._cesdk = instance;
});
},
methods: {},
watch: {},
beforeDestroy: function beforeDestroy() {
if (this._cesdk) {
this._cesdk.dipose();
this._cesdk = null;
}
}
};
</script>