First install yarn.
# install dependencies
$ yarn install
# serve with hot reload at localhost:8080
$ yarn serve
# build for production with minification
$ yarn buildFor detailed explanation on how things work, consult the docs for vue-loader.
Perform the following commands in a terminal window
# install vue-cli
$ yarn global add @vue/cli
# initialize the project
$ vue create hello-world
# Keep all the options at their defaults
$ cd hello-vue
$ yarn install
$ yarn add @vaadin/vaadin-core
$ yarn add @webcomponents/webcomponentsjsAdd vue.config.js file with the following content:
module.exports = {
transpileDependencies: [/@vaadin\/.*/, /@polymer\/.*/, /@webcomponents\/.*/]
}Open src/main.js and
In the import section, add:
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';Open src/App.vue
- Replace all HTML in the
<template>with:
<div>
<vaadin-text-field ref="textField" id="text" placeholder="Type Something"></vaadin-text-field>
<vaadin-button @click="clicked">Click Me!</vaadin-button>
<h2>Hello {{msg}}!</h2>
</div>- In the
<script>section
Add imports
import '@vaadin/vaadin-button/vaadin-button.js';
import '@vaadin/vaadin-text-field/vaadin-text-field.js';Inside default add the click event:
methods: {
clicked() {
this.msg = this.$refs.textField.value;
}
}