Vue

In order to use the Discovery element library within the Vue app, the application must be modified to define the custom elements and to inform the Vue compiler which elements to ignore during compilation. This can all be done within the main.js file.

Import the Discovery components into the 'main.js' file by

• importing the node module
• telling Vue to ignore the custom element tags (see docs)
• binding the Discovery component code to the window object

import Vue from 'vue';
import App from './App.vue';

import { applyPolyfills, defineCustomElements } from '@senx/discovery-widgets/loader';

Vue.config.productionTip = false;

// Tell Vue to ignore all components defined in the @senx/discovery-widgets
// package. The regex assumes all components names are prefixed
// 'discovery'
Vue.config.ignoredElements = [/discovery\w*/];

// Bind the custom elements to the window object
applyPolyfills().then(() => {
  defineCustomElements();
});

new Vue({
  render: h => h(App)
}).$mount('#app');

The components should then be available in any of the Vue components

render() {
  return (
    <div>
      <discovery-dashboard url="https://sandbox.senx.io/api/v0/exec"
                           dashboard-title="Test"></discovery-dashboard>
    </div>
  )
}

Vue provides several different ways to install and use the framework in an application. The above technique for integrating Discovery custom element library has been tested on a Vue application that was created using the vue-cli with ES2015 and WebPack as primary options. A similar technique should work if the application was generated using other options.