Intersult: Intersult Vue Components

Die Intersult Vue Components sind eine Reihe von Vue-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

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>