Vue

Vue is a progressive framework for building user interfaces. Examples below describe how you can use Vue.js to create views in your project.

Using the esm build

// setup.js
import Vue from 'vue/dist/vue.esm';

const view = quark.views.createTabsView('My Vue');
view.onDidConnectElement = () => {
    const app = new Vue({
        el: view.element,
        data() {
            return {
                greetings: 'Hello Vue.js'
            }
        },
        template: `<h1>{{greetings}}</h1>`
    });
}
view.focus();
Result

Using multiple components

// setup.js
import Vue from 'vue/dist/vue.esm';

const myComponent = Vue.component('my-component', {
    template : '<h3>Hello parent component</h3>'
});

const view = quark.views.createTabsView('My Vue');
view.onDidConnectElement = () => {
    const app = new Vue({
        el: view.element,
        components : {
            myComponent
        },
        template: `<my-component />`
    });
}
view.focus();

Importing external html template.

<!-- template.html -->
<h1>{{greetings}}</h1>
// setup.js
import Vue from 'vue/dist/vue.esm';
import htmlTemplate from './template.html';

const view = quark.views.createTabsView('My Vue');
view.onDidConnectElement = () => {
    const app = new Vue({
        el: view.element,
        data() {
            return {
                greetings: 'Hello Vue.js'
            }
        },
        template: htmlTemplate
    });
}
view.focus();
Last Updated: 8/22/2019, 5:46:31 PM
MIT Licensed | Copyright © 2019-present Nishkal Kashyap