Ask A Question


You’re not receiving notifications from this thread.

How do I use .vue (single file componenets) with rails 5.1 and webpack?

Chris Collinsworth asked in Javascript

I've been struggling with this for several days now and I can't get the component to render any data.

  <h1>{{ greeting }} World!</h1>

  module.export = {
    data: function (){
        greeting: 'hello'


My file is called customers.vue so i'm trying to render my component as <customers></customers> inside my html file.

Any ideas would be greatly appreciated.


Hi Chris

There's a couple of pieces missing - you need separate code in app/javascript/packs to create & mount the Vue instance, then an appropriate javascript_pack_tag in your view templates to actually pull that code in.

There's some handy examples on wiring this all up with rails if you create a demo app via rails new testapp --webpack=vue.

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 82,329+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.