rendering a rails partial in a .vue file

Question

After struggling for a while, I was able to get Vue working with webpacker in my Rails 4.2.5 app. This is my first Vue project and I am still unsure of a lot of things when using it.

I am using Buefy, which are Vue.js components based on Bulma CSS (https://buefy.github.io/#/documentation/tabs). I have some tabs setup inside of a modal and I want each tab to render a form for a different partial, however, I don't know how to set this up as Vue can't run the ruby code. The result of this code is that the tabs work properly, but my Ruby render code is shown as a string and not run.

I could just copy the contents of the partials into the vue.js file, but there is still more ruby I am calling in there. I am sure there is a proper way to do all of this, but I just can't figure it out.

Here is my html/haml file calling the modal

#buefy
= javascript_pack_tag 'buefy_modal'

Here is my buefy_modal.js

import Vue from 'vue'
import App from './B_modal.vue'
import Buefy from 'buefy'

Vue.use(Buefy)

new Vue({
  el: '#buefy',
  render: h => h(App)
})

and here is the B_modal.vue

<template>
  <section>
    <button class="button is-primary is-medium"
      @click="isCardModalActive = true">
      Social Save
    </button>
    <b-modal :active.sync="isCardModalActive" :width="640" has-modal-card>
      <div class="card">
        <div class="card-content">
          <section>
            <b-tabs v-model="activeTab">
              <b-tab-item label="Lists">
                <%=render partial: 'shared/list_item/list_form', locals: {media: @media} %>
              </b-tab-item>
              <b-tab-item label="Clubs">
                <%=render partial: 'shared/club_item/club_form', locals: {media: @media} %>
              </b-tab-item>
              <b-tab-item label="Challenges">
                <%=render partial: 'shared/challenge_item/challenge_form', locals: {media: @media} %>
              </b-tab-item>
            </b-tabs>
          </section>
        </div>
      </div>
    </b-modal>
  </section>
</template>

<script>
   export default {
       data() {
           return {
               isCardModalActive: false,
               activeTab: 0,
           }
       }
   }
</script>

Answer 1

Maybe try to rename file to something.vue.erb