|
|
@@ -0,0 +1,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 stuff 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> |
|
|
|
---- |