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


The main component is the QdtComponent.vue


import QdtComponents from 'qdt-components';
const options = {
  config: {
    host: '<>',
    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


and you can view it live at


More posts on qdt-components

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

Qdt-components & Picasso.js - More Charts!


This is it