1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
---
title: Vue.js Integration
order: 2
layout: page
---
# Vue.js Integration
link:https://vuejs.org/[Vue.js] is a library for building interactive web interfaces with JavaScript.
Vue's components can be link:https://vuejs.org/v2/guide/comparison.html#Polymer[loosely compared] to Vaadin Elements and both provide a very similar development style.
== Quick Start
. Before installing Vaadin Elements, you first have to install and initialize your application with Bower.
Vaadin Elements uses link:http://bower.io/[Bower] for package management.
+
[source,subs="normal"]
----
[prompt]#$# [command]#npm# install bower -g
[prompt]#$# [command]#bower# init
----
. By default, Bower installs dependencies to the [filename]#bower_components# directory.
But if you are using Webpack or Vue CLI, it expects static files to be in the [filename]#static# directory.
Thus, create the [filename]#.bowerrc# file in the root directory, with the following content:
+
[source,json]
..bowerrc
----
{
"directory" : "static/bower_components"
}
----
. Now, you can install all the Vaadin elements that you need in your application.
For instance, to install [elementname]#https://vaadin.com/elements/-/element/vaadin-date-picker[vaadin-date-picker]# element, run the following:
+
[source,subs="normal"]
----
[prompt]#$# [command]#bower# install --save [replaceable]#vaadin-date-picker#
----
. For better browser support, you need to add the Web Components polyfill to the [elementname]#head# section of your [filename]#index.html#.
This will allow the use of Vaadin Elements in all evergreen browsers.
+
[NOTE]
Web Components are natively supported in Chrome and Opera and the polyfill is not required.
+
[source, html]
.index.html
----
<script src="static/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
----
. Now you can import and use Vaadin Elements in your Vue Component.
+
[source,html,subs="normal"]
.src/components/DateSelect.vue
----
<template>
<div class="date-select">
<link rel="import" href="static/bower_components/vaadin-date-picker/vaadin-date-picker.html">
<vaadin-date-picker
class="custom-theme"
:label="label"
:value="date"
v-on:value-changed="onDateChange">
</vaadin-date-picker>
</div>
</template>
<script>
export default {
data () {
return {
label: 'Select a date',
date: '2016-12-31'
}
},
methods: {
onDateChange: function (e) {
console.log('date changed: ' + e.detail.value)
}
}
}
</script>
----
+
[NOTE]
Importing elements directly in the component facilities a lazy loading of elements, and they are imported only when they are actually used.
Otherwise, you might import the element in your [filename]#index.html#.
. Custom styling does not work inside a Vue component.
To style an element, create custom style tags in your [filename]#index.html#.
+
[source, html]
.index.html
----
<style is="custom-style">
vaadin-date-picker {
--primary-color: red;
--primary-text-color: green;
--secondary-text-color: yellow;
}
</style>
----
|
