Merge pull request #79 from vaadin/vue-js-docs

Add vue.js docs

2 files changed, 109 insertions, 1 deletions

diff --git a/docs/elements-introduction.adoc b/docs/elements-introduction.adoc
index 2c54a75..b770c1e 100644
--- a/docs/elements-introduction.adoc
+++ b/docs/elements-introduction.adoc
@@ -10,7 +10,7 @@ layout: page
 
 Vaadin Core Elements is a free and open source set of high quality link:http://webcomponents.org[Web Components] for building mobile and desktop web applications in modern browsers. It builds on top of Google’s link:http://www.polymer-project.org[Polymer] library, and augments the link:https://elements.polymer-project.org[Iron, Paper, and other element sets of Polymer] with elements that are needed in building business applications.
 
-Although based on Polymer, Vaadin Elements can be used together with any other web framework that has support for Web Components. See the  link:integrations/polymer.html[Integrations] section for examples how to use the elements together with different JavaScript frameworks and libraries, such as Angular 2 and React.
+Although based on Polymer, Vaadin Elements can be used together with any other web framework that has support for Web Components. See the  link:integrations/polymer.html[Integrations] section for examples how to use the elements together with different JavaScript frameworks and libraries, such as Angular 2, React and Vue.js.
 
 If you wish to use Vaadin elements with link:http://gwtproject.org[GWT], you can use link:https://vaadin.com/gwt[GWT Polymer Elements].
 
@@ -87,6 +87,7 @@ Example integrations for some popular frameworks and libraries:
 - link:/docs/-/part/elements/integrations/polymer.html[Polymer]
 - link:/docs/-/part/elements/integrations/angular2.html[Angular 2]
 - link:/docs/-/part/elements/integrations/react.html[React]
+- link:/docs/-/part/elements/integrations/vuejs.html[Vue.js]
 
 
 +++
diff --git a/docs/integrations/integrations-vuejs.adoc b/docs/integrations/integrations-vuejs.adoc
new file mode 100644
index 0000000..0177a17
--- /dev/null
+++ b/docs/integrations/integrations-vuejs.adoc
@@ -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>
+----