Die [Intersult Vue Components] sind eine Reihe von [Vue|https://vuejs.org/]-Komponenten für den Aufbau von reaktiven Web-Seiten.
!!!Einbindung
1. Die Einbindung erfolgt über [Maven] in das [Spring Boot] Projekt aus dem [Intersult Nexus|https://www.intersult.com/nexus/] mit dem Artifakt:
{{{
<dependency>
<groupId>com.intersult</groupId>
<artifactId>vue-resource</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
}}}
2. [RequireJS] im HTML laden:
{{{
<html>
<head>
<script type="text/javascript" src="vue-resource/thirdparty/require.js" data-main="main"></script>
[...]
</head>
<html>
<div id="vue-root"><template>
[...]
</template></div>
</html>
}}}
3. Die Script-Ressourcen werden im main.js konfiguiert:
{{{
require.config({
// Thirdparty
vue: "vue-resource/thirdparty/vue.min",
promise: "vue-resource/thirdparty/promise.min",
// Integration
jquery: "vue-resource/integrate/jquery-noconflict",
"vue-jquery": "vue-resource/integrate/vue-jquery",
reactor: "vue-resource/integrate/reactor",
css: "vue-resource/integrate/require-css",
html: "vue-resource/integrate/require-html",
"var": "vue-resource/integrate/require-var",
attribute: "vue-resource/integrate/require-attribute",
packages: ["vue-resource"]
});
define(["vue", "vue-query"], function(Vue) {
return new Vue({
el: "#vue-root"
});
});
}}}
!!!Aufbau
Das Package "vue-resource" enthält ein eigenes main.js und registriert dort die Vue Komponenten:
{{{
Vue.register({
// Basic
"dialog-panel": "vue-resource/component/basic/dialog-panel",
[...]
// Transition
"expand-transition": "vue-resource/component/transition/expand-transition",
[...]
});
}}}
Die Komponenten können daher direkt verwendet werden:
{{{
<dialog-panel ref="dialog" title="Test">
<h1>Hello World!</h1>
</dialog-panel>
<button @click.prevent="$refs.dialog.open">Open</button>
}}}