1.0.4 • Public • Published



Status: release

🙏 Easy work with CLM presentations!

This is a vue-cli 3.x plugin to help developing with MI Touch, Pharma Touch and Veeva CRM systems.

⭐ Features:

  • Automatically generate file structure.
  • Multi language
    • One slide-instance in development
    • Automatic import necessary text data
  • Build for necessary CRM system
    • Using regular expressions for selectively build
    • Thumbs creating
    • Creating archives
  • Development
    • QR-code for opening external link
    • Opportunity for display CRM system elements
    • Included basic functionality
    • Understanding excel structure
    • Restricted Workspace (for big projects)
  • Project config

Table of contents

Getting started

⚠️ Make sure you have vue-cli 3.x.x, node 8.x.x and yarn.

  1. Create

    Create with preset:

    vue create --preset OptionParalysis/vue-preset-veeva my-project

    Or create manually new project with following features: router, vuex, babel, scss, and add plugin to your project.

    vue add clm-helper
  2. Complete the configuration file clm.config.json.

    Put Exсel File with valid structure in root-folder, and convert structure from the excel file to clm.config.json, and fill in the remaining fields where you need it:

    yarn excel

    Or, Fill the clm.config file manually.

  3. Generate the necessary files to the project structure:

    yarn generate
  4. Start your app:

    yarn dev

Plugin CLI Commands

Plugin generator inject generate, build and dev commands to package.json.

Plugin CLI commands can run with fully-named --clm veeva,mi-touch or short-named -c v,mt syntax.

ℹ️ For using standard vue build, just run yarn build-standard.


Convert valid structure from excel-file in root-folder to clm.config.json.

  • yarn excel


Generating slide-components to src/slides, assets folders for each slide to src/assets and all text data files to src/data by scheme bellow:

+-- src
|   +-- assets
|   |   +-- images
|   |   |   +-- <sl.path> // empty folders for unique images for a slide
|   +-- data
|   |   +-- <lang>
|   |   |   +-- <sl.path>.js // templates for text
|   +-- slides
|   |   +-- <sl.path>.vue // all slide-componens
  • yarn generate [lang]

    • lang - optional parameter, regular expression, must match one or more of languages key in src/clm.config.json

ℹ️ For correct passing regular expressions from terminal, please wrap it in double quotes.

yarn generate --lang "ua|ru" // will generated "ua" and "ru" templates


Running development server.

Actually, duplicates command yarn serve to customary command yarn dev and increase JavaScript heap of memory.

yarn dev


Build slides for necessary CLM"s. Each slide will be built with webpack, have the necessary CLM files and be archived.

  • yarn build <clm> [options] [filter] [lang]

    • clm - required parameter, can be: veeva, mi-touch and pharma-touch
    • options - optional, can be: no-screens, no-clear-js and no-clear-assets
    • filter - optional, regular expression for filtering around slide ID
    • lang - optional, regular expression for filtering around slide language

Fully-named syntax:

yarn build --clm mi-touch --options no-screens --filter "slide-1_1|slide-2_1" --lang ua

Short-named syntax:

yarn build -c mt -o ns -f "slide-1_1|slide-2_1" -l ua


Vue Config

Plugin generator create vue.config.js with necessary options.

See official documentation for full details.

Restricted Workspace

If you have a large project, you may have with the problem of too long compilation time.

So you can restrict your workspace by adding necessary filter to VUE_APP_RESTRICTED_WORKSPACE_REGEX in .env.development file;

For example:

VUE_APP_RESTRICTED_WORKSPACE_REGEX = slide-1_1$ // workking only with slide-1_1

CLM Config

All project depend of src/clm.config.json

⚠️ All unique assets(public) for a particular slide must match the specified path in the path key for necessary slide in structure key in clm.config.

CLM platform options:

  • clm

    • productId

      String, Reauired, must be named under rule: <PROJECT-NAME>_<CYCLE>_<YEAR>.

      During build to productId will added language and slide id parts.

    • productName

      String, Required, Usually this is the same name as the root folder (only for Veeva and Pharma Touch)

    • disableSwipeBetweenFlows

      Boolean, Optional, enable/disable auto preventing swipes between flows

      ⚠️ At the moment, work only with MI Touch.

    • csv

      Object, Optional, contains information for creating a CSV file (only for Veeva)

      • country

      String, default: "Ukraine"

      • product

      String, default: "INCH"

  • languages

    Array, Required, to build different language versions just add necessary language.

    Valid values for cyrilic languages: ua, ru.

      languages: ["ua", "ru", "fr"]
  • device

    • resolution

      Object, Required, device resolution will export to shared styles.

      Also resolution using for creating slide screenshots.

        "device": {
          "resolution": { // Pixels
            "width": "2048",
            "height": "1536"
  • structure

    Array, Required, each slide must be specified in the structure with following keys:

    Option Type Specify Description
    id String Required Unique slide identifier, must be named under rule: slide-<flow-number/name>_<slide-number>
    path String Required Path to slide. All slide-components must contain in src/slides, and you can create difference folders structure here.
    name String/Object Required Slide name. Required for creating "slides.json" in Pharma Touch build, usualy using in navigation-components. If object - keys names must match with languages items.
    flowName String/Object Optional Flow name, have the same rules as name key.
    swipe Object Optional Define swipe rules. Can have next and prev keys., swipe.prev String Optional Appropriate swipe will navigate to or prevented CLM swipe with "prevent" value.
    callDialog Array Optional List of questions for call dialog definition. (Only fo MI Touch).
    isHidden Boolean Optional Set true to hide slide in menu list. (Only fo MI Touch).
    structure: [
      // required keys 
        "id": "slide-main",
        "path": "slide-main",
        "name": {"ua": "Назва", "ru": "Название"}
        "id": "slide-1_3",
        "path": "flow-3/slide-1_3",
        "name": {"ua": "Назва", "ru": "Название"}
        "callDialog": "[
          "My Question 1", // this question will have automatic generated quiesion-id (Q1)
            "id": "custon_id", // custom question id
            "question": "My Question 2"
        "id": "slide-4_20",
        "path": "flow-4/slide-4_20",
        "name": "Назва", // the same name for all languages
        "swipe": {
    	    "next": "slide-5_10", // custon next swipe
          "prev": "prevent" // block back swipe
        "isHidden": true // This slide not be displayed

Additional Info

Slide Component

Each slide-component have global and slide functionality and must be named under rule: slide-<flow-number/name>_<slide-number>.

All slide-components must contain in src/slides, and you can create difference folders structure here, just describe that in clm.config.json.

Basic Functionality

This plugin adds basic functions for CLM presentations and useful utilities for development.

Most of the basic functions defined in src/app-helper.

Global Functionality

// main.js
import mixins from "@/app-helper/mixins"

A global method that performs the function of navigating to the desired slide.

Takes required parameter id.

Have different functional for each CLM system or development.

During development, $navigateTo will check on existing parameter id in structure.

Using in template:

<button class="some-navigation-button" @touchend="$navigateTo("slide-1_4")"></button>

Using in vue instance:

methods: {
  someNavigateMethod() {

A global method that sends a calldialog response to the required clm database.

In development method $addData will check on existing callDialog key in current slide.

Using in vue instance:

methods: {
  sendSomeData() {
    this.$addData("Q1", "Response for quiesion with automatic generated quiesion-id");
    this.$addData("custon_id", "Response for quiesion with custon id");
$openPdfIos (only MI Touch)

A global method for opening PDF-files in on iOS devises.

Using in vue instance:

methods: {
  showPdf() {

Slide Functionality

// each slide-component
import mixins from "@/app-helper/mixins"
export default {
  mixins: [ ...mixins.slide ],
Text data

For import text data for current language just call: getData with relative (from language folder to file) path:

import getData from '@/data'

const myData = getData('/my-data.js')
+-- src
|   +-- data
|   |   +-- ua
|   |   |   +-- my-data.js
|   |   +-- ru
|   |   |   +-- my-data.js

Each slide-component already has appropriate imported text data in data key.

The text data file must have the same path as slide-component.

Also, for convenience, each slide-component have computed property t.

Some slide-component:

mounted() {
  /* Text data for current slide, "content" and "popup" is required */
  // => 
  	content: {
      	title: "This is Awesome Documentations"
    popup: {...} 

  /* Easy way to get "data.content" */
  // =>
  	title: "This is Awesome Documentations"

Using computed property t in template:

<h1 class="awesome-title" v-html="t.title"></h1>
Slide info data

Each slide-component already has "personal info" in slide key. This is just an object from the current slide in the structure.

ℹ️ In addition, Text data, and Slide info data will be passed to the vuex store as currentData and currentSlide.

App Functionality

// App.vue
import mixins from "@/app-helper/mixins"
export default {
  mixins: []

In App.vue has functional for swipe control: v-touch:swipe="swipeHandler".

swipeHandler will get disableSwipeBetweenFlows, and swipe keys from clm.config, and depending on their values will call $navigateTo or prevent necessary swipe.

In addition, App.vue contains some development functionality, do not worry about it, all development functions will be deleted/disabled during the production build.


Thank Vue CLI Team for the excellent tool and documents.

Thank vue-cli-plugin-apollo and for great documentation example.




Package Sidebar


npm i vue-cli-plugin-veeva-builder

Weekly Downloads






Unpacked Size

234 kB

Total Files


Last publish


  • optionparalysis