Search
Loading...
Skip to content

Clone GitHub Nuxt Project

This guide walks you through cloning and running a prebuilt CreativeEditor SDK (CE.SDK) Nuxt.js integration project from GitHub. That’s the fastest way to get up and running with CE.SDK, as you don’t need to build everything from scratch.

Who Is This Guide For?#

This walkthrough is ideal for developers who:

  • Want to try out CE.SDK without setting up a custom environment.
  • Prefer working with a preconfigured Nuxt.js sample project.
  • Are comfortable using Git and Node.js to manage local development environments.

What You’ll Achieve#

  • Clone the CE.SDK Nuxt.js integration project from GitHub.
  • Install all required dependencies and launch the project locally.
  • Access a fully functional image and video editor directly in your browser.

Prerequisites#

Make sure the following ready:

  • Git: Used to clone the project repository. Download Git.
  • The latest LTS version of Node.js and npm: Required for installing dependencies and starting the development server. Download Node.js.
  • A valid CE.SDK license key (Get a free trial).

Step 1: Clone the GitHub Repository#

First, clone the CE.SDK examples repository from GitHub:

Terminal window
git clone https://github.com/imgly/cesdk-web-examples.git

Then navigate to the Nuxt.js integration folder:

Terminal window
cd cesdk-web-examples/integrate-with-nuxt

Step 2: Install the Dependencies#

Install all necessary dependencies using npm:

Terminal window
npm install

Step 3: Set Your CE.SDK License Key#

Open the editor component file (located at components/CreativeEditor.vue) and update the configuration with your actual CE.SDK license key:

const config = {
  license: '<YOUR_CE_SDK_LICENSE>', // replace this with your CE.SDL license key
  // ...
};

Step 4: Run the Project#

Start the Nuxt.js development server by running:

Terminal window
npm run dev

By default, the app will be served at your localhost on http://localhost:3000/. Open that URL in your browser to access the fully functional image and video editor.

Troubleshooting & Common Issues#

❌ Error: 'nuxt' is not recognized as an internal or external command, operable program or batch file.

  • Ensure you’ve run npm install successfully before trying npm run dev.

❌ Error: Editor engine could not be loaded: The License Key (API Key) you are using to access CE.SDK is invalid

  • Double-check that your CE.SDK license key is valid, hasn’t expired, and is correctly configured in the config object.

❌ Issue: The editor doesn’t appear

  • Look at your terminal output for any backend/server-side errors.
  • Open your browser’s developer console to review client-side error messages that may point to the root cause.

Next Steps#

Congratulations! You’ve successfully integrated CE.SDK with Nuxt.js. When you’re ready, dive deeper into the SDK and proceed with the next steps: