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

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

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2021 GoRails, LLC. All rights reserved.