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.

:::tip 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.