How It Works

Super fast dev workflow with self contained vue components + hot module replacement.

Setup

• bundle install
• npm install
• ./bin/webpack-dev-server

What I Did

Not required reading but useful for context. This project combines code from:

• rails webpacker vue setup, and
• vue loader project setup.

with a bit of tinkering to get them to play nice together.

1. Basic rails webpacker + Vue setup

From here:

1. rails webpacker:install
2. rails webpacker:install:vue

2. Get vue-loader set up in a non-rails project, including hot reloading

This created a separate non-rails project containing some of the config files we need.

From here:

• npm install -g vue-cli
• vue init webpack-simple hello
• cd hello
• npm install

3. Copy config from project generated at step 2

• Copied the rules section from webpack.config.js:12 to shared.js in rails app.
• Added the --hot flag to /bin/webpack-dev-server:31.
• Added publicPath: 'http://localhost:8080/' to shared.js:26 to fix a compilation bug.