Migration from vue-engine to eWizard.js

If your existing emails are built with the vue-engine framework, you need to migrate your projects to the eWizard.js framework to use the advantages of the eWizard platform. After migration, you can view and edit the emails in eWizard Classic.

Migration steps

To migrate your email built with the vue-engine framework to eWizard.js:

Remove the vue-engine dependencies from the package.json.

json

// ./package.json

{
  "dependencies": {
    "folktale": "^2.0.1",
    "lodash.uniqueid": "^4.0.1",
    "vue": "^2.4.2",
    "vue-engine": "git+ssh://git@git.qapint.com:cobalt-dev/vue-engine.git#develop",
    "vue-i18n": "^7.2.0"
  }
}

Install eWizard.js dependencies of the latest versions.

json

// ./package.json

{
  "dependencies": {
    "@dynamic-template-mixins/buttons-width": "git+ssh://git@git.qapint.com:dcf/viseven/emails/mixins/buttons-width.git#0.3.0",
    "component-types": "git+https://git.qapint.com/ewizardjs/core/component-types.git#1.2.0",
    "ewizardjs": "git+https://git@git.qapint.com/ewizardjs/ewizardjs.git#5.15.0",
    "wiz-agenda": "git+https://git.qapint.com/ewizardjs/email/components/wiz-agenda.git#v2.0.1",
    "wiz-button": "git+https://git.qapint.com/ewizardjs/email/components/wiz-button.git#v2.2.1"
  }
}

Remove these directories and files:
- ./modules
- ./typings
- ./index.js
- ./index-server.js
- ./init.sh
- ./tsconfig.json

Add the ./extensions and ./mixins directories with the following files:

./extensions/common.js

// ./extensions/common.js

import { ThemePlugin } from 'ewizardjs';

export default function (Vue) {
  Vue.use(ThemePlugin);

}

./extensions/globalComponents.js

./mixins/buttons-width/index.js

// ./mixins/buttons-width/index.js

import getButtonsWidthMixin from '@dynamic-template-mixins/buttons-width';

const buttonsWidth = getButtonsWidthMixin({ minWidth: 87 });

export default {
  mixins: [
    buttonsWidth,
  ],
};

./mixins/buttons-width/style.css

Change the <div> tag to <wiz-root> tag within the <template> tag of the ./App.vue file.
html
```


<template>
  <wiz-root></wiz-root>
</template>
```

Add the app.js and index.js scripts to the <body> tag in the ./index.html file:

html

<!-- ./index.html  -->

<body ewizardjs-content>
    <div id="app"></div>
    <script src="./build/dev/app.js"></script>
    <script src="./build/dev/index.js"></script>
</body>

Change the ./themes/[YOUR_THEME_NAME]/index.js theme file:

Declare the template, links, collectionsColors, mainColors, or other constants.

// ./themes/Deprelax/index.js

const collectionColors = {
  color01: "#009b78",
};
const mainColors = {
  color01: "#ffffff",
};
const template = {
  type: settings.templateType ? settings.templateType : "Broadcast",
  theme: settings.theme,
  product: "Deprelax",
};

const links = {
  defaultWebSite: "https://www.viseven.com",
};

Export the declared constants to the export default object.

// ./themes/Deprelax/index.js

export default {
  theme,
  template,
  links,
  collectionColors,
  mainColors,
};

Add the min-width: 600px style attribute and the m-mw-auto class to the <wiz-layout> tag in the template of the ./App.vue file.

html

<!-- ./App.vue -->

<template>
<wiz-root>
  <wiz-layout style="min-width: 600px;" class="m-mw-auto">
  </wiz-layout>
</wiz-root>
</template>

As a result, you can develop the migrated email project with eWizard CLI, upload the archived projects to eWizard Classic to view and edit them.

Migration from vue-engine to eWizard.js ​

Migration steps ​

Migration from vue-engine to eWizard.js

Migration steps