Rails fails with Vue

Question

I set up new project with Rails 5.1.4, webpacker 3.0 and Vue.js, i used webpack doc to install Vue with Rails. When I hit foreman with my Procfile the Vues part fails.

I thought wepacker is smart enough for installing all the basic stuff to run app...

Edit: bundle exec rails webpacker:install:vue Gave me this, still doesnt work

const { dev_server: devServer } = require('@rails/webpacker').config

const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader',
    options: { extractCSS }
  }]
}

Possible duplicate of ["You may need an appropiate loader to handle this file type" webpack and vue](https://stackoverflow.com/questions/45031720/you-may-need-an-appropiate-loader-to-handle-this-file-type-webpack-and-vue) — str, Dec 28 '17 at 13:35
You also need to configure vue-loader for single file components to work. The extension for such components is .vue. — Manish, Dec 28 '17 at 14:26

score 1 · Answer 1 · answered Jan 19 '18 at 14:19

As webpacker problems don't stop in development, but make deployment more difficult, i just want to mention that it is very easy to avoid the whole issue. Just don't use webpacker, unless you know you really really have to.

Use the cdn's where vue is. Write app code into rails templates (i use halm and either javascript or ruby2js filter). Even small components can be done that way, or then with the x-template syntax.

Works a charm for small scale

score 0 · Answer 2 · answered Dec 28 '17 at 17:16

0

So I get rid off this.

I installed vue with rails manually and added vue loader with yarn command yarn add vue vue-loader vue-template-compiler without from "." at the end. Thanks for help guys! :)

answered Dec 28 '17 at 17:16

Daniel

153
2
12

score 0 · Answer 3 · answered Jan 19 '18 at 14:36

0

To get the Javascript dependencies installed so that webpacker can run:

bundle install
yarn install

Then restart the bin/webpack-dev-server since it rarely likes large changes or files moving around.

answered Jan 19 '18 at 14:36

Phil

2,797
1
24
30

score 0 · Answer 4 · answered Jan 01 '19 at 14:42

If you are running Vue on Rails after 2018, you should use the Vue on Rails app template

rails new app -m https://vueonrails.com/vue -d postgresql

It ships with the default configuration and shortcuts. Check out all the things that it ships with -> http://github.com/vueonrails/vueonrails

Rails fails with Vue

4 Answers4