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 79,047+ developers who get early access to new tutorials, screencasts, articles, and more.

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2023 GoRails, LLC. All rights reserved.