Skip to content

Boilerplate rails 5 app w/ trailblazer, tachyons, vue + vue-loader + webpack configured to work with hot reloading

Notifications You must be signed in to change notification settings

tonyennis145/vue_rails_webpack

Repository files navigation

How It Works

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

Vue with rails webpack + HMR demo

Setup

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

What I Did

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

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.

About

Boilerplate rails 5 app w/ trailblazer, tachyons, vue + vue-loader + webpack configured to work with hot reloading

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published