Create a new extension with create-remote-component

Use @zoovu/create-remote-component to quickly generate a new extension for Experience Designer. The command-line tool helps you set up everything you need to start building, testing and deploying your extension.

The tool scaffolds a ready-to-use project based on a template you choose. You get a standard file structure with example code, configuration files and metadata. Each template includes best practices to help you get started faster.

INFO: Note that extensions are refered to as (remote) components in the code.

Before you start

• Make sure you have node@20 installed. You can use Node Version Manager on Windows or Linux
• You need to be familiar with frontend development using Vue2.
• Run npm install -g yarn to install Yarn.

You don’t need to install the package globally. Just run:

npx @zoovu/create-remote-component

This will launch a CLI that walks you through the process of setting up your extension. You will be asked to choose a template and enter a name.

If you prefer, you can install it globally:

npm install -g @zoovu/create-remote-component
# or
yarn global add @zoovu/create-remote-component

Available templates

Once installed, you can create a new extension by running:

npx @zoovu/create-remote-component

This will prompt you to select a template and a name for your component. Choose from the following templates based on what you want to build:

• button - A customizable navigation button (next, back, restart).
• flow-step - A page for questions or input from the user.
• recommendations - A layout for showing product recommendations.
• tutorial - A simple starter for learning how extensions work.

Folder structure

After generating your extension, you'll see a folder like this:

my-component/
├── package.json
├── zoovu.manifest.js
└── src/
    ├── index.ts
    ├── my-component.component.vue
    ├── my-component.configuration.ts
    ├── my-component.style.ts
    └── my-component.preset.ts

• .component.vue – main logic and UI of your extension
• .configuration.ts – defines the config values passed into your component
• .preset.ts – defines which properties appear in the Experience Designer right panel
• zoovu.manifest.js – metadata for Experience Designer (name, icon, location)

Development

Go to your new extension’s folder and install dependencies:

cd my-extension
yarn install

Run the development server:

yarn dev

While it’s running, open Experience Designer for developers at https://orca-experience.zoovu.com/developer.

Refresh the page once after starting the dev script. You can then drag and drop your extension onto the canvas and see live changes.

Build for upload

When you’re ready to test or deploy, run:

yarn build

The build will appear in the /build folder as a .zip archive. You can upload it directly into Experience Designer.