Pass data from Rails views to VueJS components in webpacker

Question

I'm trying to fiddle with Rails 5.1's new webpacker gem, along with VueJS, but can't get my erb views to pass data to VueJS components...

Let's say I have a user show view

# view/users/show.html.erb
<%= javascript_pack_tag "user-card" %>
<%= content_tag :div,
  id: "user-card",
  data: {
    username: @user.name
  } do %>
<% end %>

And my javascript:

// app/javascript/packs/user-card.js
require("user-card")

// app/javascript/user-card/index.js
import Vue from 'vue/dist/vue.esm'
import UserCard from './components/UserCard'

document.addEventListener('DOMContentLoaded', () => {
  let element = document.getElementById("user-card")
  let username = element.dataset.username
  console.log(username); // => "pecpec"

  const app = new Vue({
    el: element,
    template: '<UserCard/>',
    components: { UserCard },
    data () {
      return { username }
    }
  })


// app/javascript/user-card/components/UserCard.vue
<template>
  <div>
    <h3>Hello {{ username }}</h3>
  </div>
</template>

<script>
export default {
  props: ['username'],
  data () {
    return {
      username: ""
    }
  }
}
</script>

I've been spending a few hours over this, by now, but none of my attempts have proven successful. I've tried passing the data to the component as a prop: props: ['username'], mounting the component with

Vue.component(UserCard, {
  props: ['username']
  // or
  data () {
    return { username: username }
  }
})

... but that didn't work either

Update: I was missing props: ['username'] in the component and updated the code above accordingly, though that doesn't seem to have made a different. Still no luck!

Answer 1

It works! Here's my solution... Not sure if it's the canonical way to do it, but it works nonetheless. It seems so painfully obvious now... Hope this will help others. Here's the whole updated code:

# view/users/show.html.erb
<%= javascript_pack_tag "user-card" %>
<%= content_tag :div,
  nil,
  id: "user-card",
  data: { username: @user.name }
 %>

// app/javascript/packs/user-card.js
require("user-card")

// app/javascript/user-card/index.js
import Vue from 'vue/dist/vue.esm'
import UserCard from './components/UserCard'

document.addEventListener('DOMContentLoaded', () => {
  let element = document.getElementById("user-card")
  let username = element.dataset.username

  const app = new Vue({
    el: element,
    data: { username: username },
    template: '<UserCard :username="username"/>',
    components: { UserCard }
  })
})

// app/javascript/user-card/components/UserCard.vue
<template>
  <div>
    <h3>Hello {{ username }}</h3>
  </div>
</template>

<script>
export default {
  props: ['username']
}
</script>