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

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

Join 73,723+ 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. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.