Import and register components

eWizard.js streamlines component development and usage in eWizard content items. For this, you can install pre-made eWizard.js components or implement custom components from scratch following Vue.js guidelines.

Pre-made eWizard.js components are available in the following ways:

• Installing from eWizard.js component GitLab repositories:

  • e-Detailer

  • Email

  • Site

  • Messenger ad

• Installing from the CodeArtifact repository

After installation, the latest versions of the components appear in /node_modules/ of your project.

CodeArtifact

You can install components from the CodeArtifact private and global repositories.

• The private repository contains components specific for an eWizard instance

• The global repository contains basic components that you can install from any instance

Access to the global repository

Access to the global repository is configured on the Admin panel.

To install a component from a private CodeArtifact repository, run the following command:

wiz install @[SCOPE]/[COMPONENT_NAME]

• [SCOPE] is the CodeArtifact scope of your project.
  For example, the Viseven CodeArtifact repository uses the item types as scopes: edetailer, email, site.

• [COMPONENT_NAME] is the name of your required component, like wiz-text.

For example, to install the e-Detailer wiz-text component, run the following:

wiz install @edetailer/wiz-text

If the component isn't available in the private repository, eWizard installs the component from the global repository.

To install a component directly from the global CodeArtifact repository while skipping the private repository check, use the wiz install command with the --repository global (-r global) option.

By default, wiz install installs components from the private repository. You can change the default repository to global in the .wizrc configuration file. Install components from the global repository to enable component installation from different instances within the same project.

To change the default repository to global:

1. Remove package-lock.json in your project.

2. Add the ./.wizrc configuration file to the project.

3. Set the codeartifact_repository value to global.

4. Run wiz install.

The .wizrc file can't be archived with wiz archive.

As a result, when running wiz install, you install components from the global repository.

Component availability in eWizard Editor

To make your component available for selection in the elements panel of eWizard Editor, add it to the ./common/components/components.js file.

If components are registered in components.js and described in components.json simultaneously, only the components from components.js are displayed on the Components tab in eWizard Editor.

For example, wiz-accordion, wiz-carousel, and wiz-checkbox components:

// ./common/components/components.json

{
  "components": [
    {
      "id": "wiz-accordion",
      "name": {
        "eng": "Accordion"
      },
      "icon": "node_modules/@edetailer/wiz-accordion/icon.png"
    },
    {
      "id": "wiz-carousel",
      "name": {
        "eng": "Carousel"
      },
      "icon": "node_modules/@edetailer/wiz-carousel/icon.png"
    },
    {
      "id": "wiz-checkbox",
      "name": {
        "eng": "Checkbox"
      },
      "icon": "node_modules/@edetailer/wiz-checkbox/icon.png"
    }
  ]
}

Key	Description
name	Component name displayed in eWizard Editor
id	Component ID in your eWizard.js project
icon	The relative path to a component icon image in the root directory, used as the component icon in the Components tab in eWizard Editor

Register components

To ensure that files used in component props are included in the production build:

• the component must be registered with the same name as its folder

• the template mustn't contain several different components with the same name (for example, @edetailer/wiz-menu and a local common/components/wiz-menu).

If you need to register a component under a different name, install it into a separate directory using package aliasing:

wiz install <ALIAS_NAME>@npm:<REAL_PACKAGE>@<PACKAGE_VERSION>

For example, wiz install @email/wiz-custom-image@npm:@email/wiz-image.

You can register components globally, so they're available for the entire project, or locally, to make it available within a specific slide, page, or layout.

Best practice recommendation

• We recommend registering components in the components.js file for eWizard.js version 5.25.0.

• For older versions, you can use any JS file within the ./extensions/ directory to register components, for example, globalComponents.js (e-Detailers) or common.js (other content item types).

• For proper operation, avoid registering your component in several locations.

Read more about component management with component.js and extensions.

To register a component in your project:

• Globally: import the components in the App.vue of your project.

• Locally: import the components in the index.vue of your required slides, pages, etc.
  For local import, place your components within the <script> tag.