You are viewing documentation for Vaadin Framework 8 and related products View documentation for Vaadin Framework 7 ›
Vue.js Integration · Vaadin
Vaadin Elements - Integrations - Vue.js Integration

Vue.js Integration

Vue.js is a library for building interactive web interfaces with JavaScript. Vue’s components can be loosely compared to Vaadin Elements and both provide a very similar development style.

Quick Start

  1. Before installing Vaadin Elements, you first have to install and initialize your application with Bower. Vaadin Elements uses Bower for package management.

    $ npm install bower -g
    $ bower init
  2. By default, Bower installs dependencies to the bower_components directory. But if you are using Webpack or Vue CLI, it expects static files to be in the static directory. Thus, create the .bowerrc file in the root directory, with the following content:

    .bowerrc
    {
      "directory" : "static/bower_components"
    }
  3. Now, you can install all the Vaadin elements that you need in your application. For instance, to install vaadin-date-picker element, run the following:

    $ bower install --save vaadin-date-picker
  4. For better browser support, you need to add the Web Components polyfill to the head section of your index.html. This will allow the use of Vaadin Elements in all evergreen browsers.

    Web Components are natively supported in Chrome and Opera and the polyfill is not required.
    index.html
    <script src="static/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  5. Now you can import and use Vaadin Elements in your Vue Component.

    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>
    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 index.html.
  6. Custom styling does not work inside a Vue component. To style an element, create custom style tags in your index.html.

    index.html
    <style is="custom-style">
      vaadin-date-picker {
        --primary-color: red;
        --primary-text-color: green;
        --secondary-text-color: yellow;
      }
    </style>