Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Employee
Employee

bannerVuewjs.jpg

I have talked about about qdt-components in the past and how it can be used with Angular, React and in a simple html page.

qdt-components - A Components Library that can be used in simple Html, Angular 5 and React

 

Today I will show you how to use it with Vue.js.

 

You can start by the template that we put together https://github.com/qlik-demo-team/qdt-vue-template.

 

The main component is the QdtComponent.vue https://github.com/qlik-demo-team/qdt-vue-template/blob/master/src/components/QdtComponent.vue

 

import QdtComponents from 'qdt-components';

const options = {

  config: {

    host: '<yourserver.com>',

    secure: true,

    port: 443,

    prefix: '',

    appId: '133dab5d-8f56-4d40-b3e0-a6b401391bde',

  },

  connections: {

    vizApi: true,

    engineApi: true,

  },

};

const qdtComponents = new QdtComponents(options.config, options.connections);

export default {

  name: 'QdtComponent',

  props: {

    type: String,

    props: Object,

  },

  mounted() {

    qdtComponents.render(this.type, this.props, this.$el);

  },

};

 

 

Then you can create your pages and start adding your visualizations.

 

To embed a simple Qlik Sense chart just add this line

<QdtComponent :type="viz2.type" :props="viz2.props"  />

 

 

Where viz2 is

 

const viz2 = {

  type: 'QdtViz',

  props: {

    type: 'barchart', id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height: '300px',

  },

};

 

 

The full example is at

https://github.com/qlik-demo-team/qdt-vue-template/blob/master/src/components/EmbedObject.vue

 

and you can view it live at

https://webapps.qlik.com/qdt-components/vue/index.html#/embed-object

 

More posts on qdt-components

qdt-components - Horizontal Barchart by Picasso.js &amp; Selection Toolbar

Qdt-components & Picasso.js - More Charts!

 

This is it

Yianni

3 Comments
Partner
Partner

Personally I find vuejs to be much more intuitive than the other two. Thanks for this!

1,200 Views
Partner
Partner

@Yianni_Ververis  

How do we make the extensions show up on our local mashup?
Currently when I use the qdt-component and use extension object id, the below error appears even though the extension is present in the Extensions folder.

shivanimadugula_0-1592230956588.png

 

0 Likes
94 Views
Employee
Employee

qdt-components 3.0 beta is out. Check out the examples at
https://observablehq.com/collection/@yianni-ververis/qdt-components 

0 Likes
51 Views