Ask A Question

Notifications

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.

<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.

Reply

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.

Reply
Join the discussion
Create an account Log in

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

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

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