Skip to main content
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?

Javascript • Asked by Chris Collinsworth

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.

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 29,763+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.