How to install Vue.js on Webpacker

CLI

$ruby -v
ruby 2.4.1p111 (2017-03-22 revision 58053) [x86_64-linux]

$ bundle exec rails -v
Rails 5.1.4

$ yarn -v
1.5.1

$ bundle install
:
Fetching rack-proxy 0.6.4
Installing rack-proxy 0.6.4
:
Using webpacker 4.0.0.pre.pre.2 from https://github.com/rails/webpacker.git (at master@7b20487)

$ yarn upgrade vue

$ bundle exec rails webpacker:install

create  config/webpacker.yml
Copying webpack core config
      create  config/webpack
      create  config/webpack/development.js
      create  config/webpack/environment.js
      create  config/webpack/production.js
      create  config/webpack/test.js
Copying .postcssrc.yml to app root directory
      create  .postcssrc.yml
Copying .babelrc to app root directory
      create  .babelrc
Creating JavaScript app source directory
      create  app/javascript
      create  app/javascript/packs/application.js
       apply  /usr/local/rbenv/versions/2.4.1/lib/ruby/gems/2.4.0/bundler/gems/webpacker-7b2048777239/lib/install/binstubs.rb
  Copying binstubs
       exist    bin
      create    bin/webpack
      create    bin/webpack-dev-server
Adding configurations
      append  .gitignore
Installing all JavaScript dependencies
         run  yarn add @rails/webpacker from "."
yarn add v1.5.1
:
:
:
Webpacker successfully installed 🎉 🍰

$ bundle exec rails webpacker:install:vue

Webpacker is installed 🎉 🍰
Using /farmer/config/webpacker.yml file for setting up webpack paths
Copying vue loader to config/webpack/loaders
      create  config/webpack/loaders/vue.js
Adding vue loader plugin to config/webpack/environment.js
      insert  config/webpack/environment.js
      insert  config/webpack/environment.js
Adding vue loader to config/webpack/environment.js
      insert  config/webpack/environment.js
      insert  config/webpack/environment.js
Updating webpack paths to include .vue file extension
      insert  config/webpacker.yml
Copying the example entry file to /farmer/app/javascript/packs
      create  app/javascript/packs/hello_vue.js
Copying Vue app file to /farmer/app/javascript/packs
      create  app/javascript/app.vue
Installing all Vue dependencies
         run  yarn add vue vue-loader@next vue-template-compiler from "."
yarn add v1.5.1
:
:
:
Webpacker now supports Vue.js 🎉

# Compiling
$ bin/webpack

Hash: 985708689216454590f5
Version: webpack 3.11.0
Time: 1921ms
                                             Asset       Size  Chunks             Chunk Names
                 hello_vue-adb354e270509346d6fd.js     244 kB       0  [emitted]  hello_vue
               application-caf7aec5cb959c6480c2.js    3.27 kB       1  [emitted]  application
    hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css  138 bytes       0  [emitted]  hello_vue
             hello_vue-adb354e270509346d6fd.js.map     292 kB       0  [emitted]  hello_vue
hello_vue-9cb5a7334a6577c3422968b9b9970b2f.css.map  561 bytes       0  [emitted]  hello_vue
           application-caf7aec5cb959c6480c2.js.map    3.19 kB       1  [emitted]  application
                                     manifest.json  434 bytes          [emitted]  
   [0] (webpack)/buildin/global.js 509 bytes {0} [built]
   [1] ./app/javascript/app.vue?vue&type=script&lang=js 181 bytes {0} [built]
   [2] ./app/javascript/packs/application.js 517 bytes {1} [built]
   [3] ./app/javascript/packs/hello_vue.js 1.93 kB {0} [built]
   [8] ./app/javascript/app.vue 945 bytes {0} [built]
   [9] ./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true 212 bytes {0} [built]
  [10] ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=template&id=6fb8108a&scoped=true 683 bytes {0} [built]
  [11] ./node_modules/babel-loader/lib??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=script&lang=js 116 bytes {0} [built]
  [12] ./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css 448 bytes {0} [built]
  [13] ./node_modules/extract-text-webpack-plugin/dist/loader.js??ref--2-0!./node_modules/style-loader??ref--2-1!./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css 41 bytes {0} [built]
  [15] ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css 756 bytes [built]
    + 8 hidden modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--1-2!node_modules/vue-loader/lib/loaders/stylePostLoader.js!node_modules/postcss-loader/lib/index.js??ref--1-3!node_modules/vue-loader/lib/index.js??vue-loader-options!app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css:
       [0] ./node_modules/css-loader??ref--1-2!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--1-3!./node_modules/vue-loader/lib??vue-loader-options!./app/javascript/app.vue?vue&type=style&index=0&id=6fb8108a&scoped=true&lang=css 756 bytes {0} [built]
        + 1 hidden module

Gemfile

gem 'webpacker', github: 'rails/webpacker'