In the eWizard.js framework, you can use the nested components in the same way as in Vue.js. To use the component within another component, import it to the component you develop.
Consider this example of the wiz-button component available when you initialize the default e-Detailer template.
// ./node_modules/wiz-button/index.vue<template>
<div class="wiz-button" @click="onClick">
<wiz-text: text="text"></wiz-text>
</div>
</template><script>
import wizText from 'wiz-text';
import config from './ewizard.config.js';export default {
name: 'wiz-button',
components: {
wizText,
},
};
</script>Here, you're importing the wiz-text component within the wiz-button component. As a result, in eWizard Editor, your button text will be editable. For information about installing the eWizard.js components, see individual components, for example wiz-button.
TIP: Make sure all the installed components are in the package.json dependencies. For example, the wiz-button component includes the wiz-text dependency.
// ./node_modules/wiz-button/package.json
{
"dependencies": {
"component-types": "git+https://git.qapint.com/ewizardjs/core/component-types.git#1.3.0",
"wiz-text": "git+https://git.qapint.com/ewizardjs/edetailer/components/wiz-text.git#v1.3.2"
},
}