Guidelines

In addition to using and customizing pre-made components in your eWizard content items, you can also implement Vue components from scratch specifically for your eWizard.js projects.

To develop a Vue.js component compatible with eWizard.js framework, consider these guidelines:

• Initialize a scaffolding component template with eWizard CLI.

• Put a dedicated class on the root element of your component. We recommend matching your component class with its name, for example the wiz-text class for the wiz-text component.

• Configure component properties.
  Refer to the Components section under your required content item type for details

Directory structure

After initialization, a scaffolding component template is created. Its structure is as follows:

.
└─
  └─.ewizard/              # Project settings and plugins for eWizard.js
    └─ settings.json       # Main configuration with eWizard.js settings
  ├─ demo/                 # Demo e-Detailer project for testing your component
  ├─ dist/                 # Output directory for built components
    └─ build.js            # Component builder script
  ├─ .gitignore
  ├─ .npmignore            # The list of files to be excluded during publishing
  ├─ index.vue             # Component entrypoint
  ├─ package.json          # npm manifest for dependency management
  └─ settings.json         # Component-specific configuration

Demo e-Detailer

The demo directory contains the default e-Detailer template you can use for testing and demonstrating your component.

The demo e-Detailer includes a symlink to the main component project directory. It ensures any changes you make to index.vue in your project root automatically appear in ./demo/node_modules/[your-component]/index.vue to update your component in runtime.

Once the component is complete, it is imported into the default slide instance within the demo e-Detailer.

<template>
  <wiz-slide>
    <MyComponent></MyComponent> <!-- Using the component in the default slide -->
  </wiz-slide>
</template>

<script>
import MyComponent from 'my-component';

export default {
  components: {
    MyComponent,
  },
};
</script>

<style scoped></style>