Skip to main content

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.

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

<script>
  module.export = {
    data: function (){
      return{
        greeting: 'hello'
      }
    }
  }
</script>

<style>
</style>

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 24,647+ 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.