Any thoughts on ways to make gon play nicely with webpacker?

[jasonkarns]

I don't have any suggestions here, but wanted to start a thread about ways to make gon work in a webpacker world... Specifically such that gon could be imported by JS files rather than being a global?

[gamesover]

gon is a hack. should use ajax/json to fetch the variable

[jasonkarns]

And block the app while the user waits for yet another http request? A request whose connection overhead is multiple times larger than the payload itself?

On Mon, Jul 30, 2018 at 10:48 PM Ken notifications@github.com wrote:

gon is a hack. should use ajax/json to fetch the variable

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/gazay/gon/issues/239#issuecomment-409076565, or mute the thread https://github.com/notifications/unsubscribe-auth/AAHUpId83Ij_5I3qwIsuZj0LMAMwXq23ks5uL8VvgaJpZM4RcjtJ .

[kevinluo201]

Currently, I'm doing this:

1. in a controller

   class MyController < ApplicationController
   def index
   @user = User.first
   gon.user = @user
   end
   end

2. in webpacker's entry file, I pass gon into props

   
   // app/javascript/packs/hello_vue.js
   import Vue from 'vue'
   import HelloVue from '../views/HelloVue.vue'

window.addEventListener('load', () => { const app = new Vue({ el: document.getElementById('div-you-want-to-mount'), components: { HelloVue }, render: h => h(HelloVue, { props: gon }) }).$mount() })

3. in HelloVue.vue
```vue
<template>
  <div id="hello">
    User: {{ user }}
  </div>
</template>

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

[mockdeep]

It would be nice to have a way to import gon in our JS. Having it in the global scope creates load order issues. If include_gon is not before your JS include tags, it ends can cause errors on load.