In the projects powered by the eWizard.js framework, the entry point of the Vue app (usually it's the app.js file) is moved to the eWizard.js engine. This approach allows the engine to dynamically expand the Vue app. Whenever the new version of eWizardj.js is released, you don't need to update app.js manually.
To use a common component or plugin as a global one, be sure to register it in the extensions directory. The eWizard.js engine imports all the .js files from the extensions directory and applies the registered components from these files as global to the Vue instance.
The .js files in the extensions directory may have different names depending on the item type. For example, they may be called globalComponents.js in e-Detailers or common.js in emails and sites. The .js files have the following syntax.
import myComponent from 'my-component';
import myPlugin from 'my-plugin';export default (Vue) => {
Vue.use(myPlugin);
Vue.component('my-component', myComponent);
}For example, when you initialize the e-Detailer project using a template, the globalComponents.js file has the following syntax.
// ./extensions/globalComponents.jsimport wizText from 'wiz-text';
import wizImage from 'wiz-image';
import wizButton from 'wiz-button';
import wizBlock from 'wiz-block';
import modulePlaceholder from '@blocks/module-placeholder';export default (Vue) => {
Vue.component('wiz-text', wizText);
Vue.component('wiz-image', wizImage);
Vue.component('wiz-button', wizButton);
Vue.component('wiz-block', wizBlock);
Vue.component('module-placeholder', modulePlaceholder);
};It means that wiz-text, wiz-image, wiz-button, and other components are registered globally. You can use these components on any slide of your e-Detailer.
Settings for plugins and mixins
Starting from eWizard.js 5.10.0, the .js files can have the settings parameter for the plugins and mixins registered globally in your project. This is an optional parameter. Use it for your custom plugins and mixins. Configure the settings for your plugin or mixin in the ./settings.json file.
// ./extensions/plugins.jsimport { ThemePlugin, DynamicThemePlugin } from 'ewizardjs';
export default (Vue, { settings }) => {
Vue.use(ThemePlugin);
Vue.use(DynamicThemePlugin, { settings });
};Global components registration
By default, running the wiz init edetailer command creates the extensions directory with the globalComponents.js and store.js files within.
TIP: The store.js file is created only if you select Yes for Use Vuex for state management? when you initialize the project.
The globalComponents.js is the file where common components are registered for use on any slide of your e-Detailer. You can use these components without local registration on any slide by adding the component to the template markup.
For example, use the wiz-text and wiz-image components in the slide template markup.
<!-- ./slides/default/index.vue --><template>
<div class="layout">
<wiz-text :text="$t('greetingsText')"></wiz-text>
<wiz-image :src="awesomeImage"></wiz-text>
</div>
</template>Global plugins registration
To register the required Vue plugins and mixins globally for use in your project, you can create a separate .js file within the extensions directory.
// ./extensions/plugins.jsimport MyPlugin from './common/modules/my-plugin';export default (Vue) => {
Vue.use(MyPlugin);
};TIP: You can also register plugins and mixins in the existing .js files in the extensions directory. But it's a good practice to define plugins, components, and extensions with options in different files to have a well-structured and robust app.
As a result, the plugin from the ./common/modules/my-plugin directory is installed for your project.
To improve your e-Detailer or email performance, don't register its mixins globally in the ./extensions/ directory. Instead, add them to the specific e-Detailer slides or the email App.vue file. As a result, all your Vue components and blocks don't process these mixins.
For example, you don't need to register the mobileContentIndents mixin globally. Use the mixins [] array to add the mixin in the App.vue file. Run the mixin one time for the email without running it for every Vue component or block in the email project.
Options
When the engine creates a Vue instance root, you can pass in an options object with the configurations within. To do so in the eWizard.js app, you can define this options object in the extension function and return it as the result.
// ./extensions/globalComponents.jsimport myCookiesPlugin from 'myCookiesPlugin';export default (Vue) => {
Vue.use(myCookiesPlugin);
let options = {
cookiesAmount: 1,
}return options
};Store registration
You can register the Vuex store as a global extension of any project type in the store.js file. The Vuex store retrieves the component state changes from your project and efficiently updates the store.js file.
Since this file servers for storing and managing different component states, it's reasonable to use it as a global extension of your e-Detailer project.
import Vuex from 'vuex';
import createStore from '../store';export default (Vue) => {
Vue.use(Vuex);const store = createStore();
return {
store,
};
};For more information about the Vuex store, read the Store article.