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();