From edfca68010304310f4225c5956e7c6f612e32b9c Mon Sep 17 00:00:00 2001
From: Sami Suo-Heikki <samiheikki@vaadin.com>
Date: Fri, 4 Nov 2016 12:59:37 +0200
Subject: Add vue.js docs

---
 docs/integrations/integrations-vuejs.adoc | 107 ++++++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 docs/integrations/integrations-vuejs.adoc

(limited to 'docs/integrations/integrations-vuejs.adoc')

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]
+.&#46;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>
+----
-- 
cgit v1.2.3