diff options
Diffstat (limited to 'docs/integrations/integrations-vuejs.adoc')
-rw-r--r-- | docs/integrations/integrations-vuejs.adoc | 107 |
1 files changed, 0 insertions, 107 deletions
diff --git a/docs/integrations/integrations-vuejs.adoc b/docs/integrations/integrations-vuejs.adoc deleted file mode 100644 index edaef94..0000000 --- a/docs/integrations/integrations-vuejs.adoc +++ /dev/null @@ -1,107 +0,0 @@ ---- -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> ----- |