Move javascript assets to webpacker about vulcan HOT 4 CLOSED

In the process of investigating this, I am also looking into integrating the ability to load basic Vue components into the application in order to replace all of the existing javascript components. So far I investigated the https://github.com/vueonrails/vueonrails and found it to be completely undocumented. It turns out it is completely unnecessary to use a gem for this anyway, since webpacker supports doing Vue out of the box. Gitlab actually provides some nice documentation on how to integrate Vue with rails: https://docs.gitlab.com/ee/development/fe_guide/vue.html.

In order to test this so far I have taken the following steps:

• rails new vulcan-vue --webpack=vue --skip-sprockets -d postgresql
• rails g controller IndexController index
• Uncommented the third block in the automatically generated hello_vue.js
• Added the following HTML to app/views/hello/index.html.erb

<div id='hello'>
  <app></app>
</div>

• Created the following Procfile.dev and ran gem install foreman:

web: bundle exec rails s
webpacker: ./bin/webpack-dev-server

And thats pretty much it, at this point when you run foreman start -f Procfile.dev, webpacker starts compiling assets automatically and the rails server starts up. Changes to the Vue code are even automatically performed without reloading the browser.

Steps I still need to take:

• Convert to haml (all the Gitlab Vue docs examples use haml, and I'm more used to haml at this point anyway)
• Setup dynamic way to add different javascript_pack_tag declarations depending on which page I'm on, using content_for.
• Figure out a better structure for components. I don't want to jam all the components into the top level packs directory. Gitlab seems to have a structure for this, should probably just take their structure, the only potential caveat to this is they don't actually use webpacker, they use their own custom thing.
• Include Vuetify
• Include icons somehow with yarn.
• Stick the app in docker in order to ensure it works in production mode.
• Actually integrate a complex component that does something we need in the application.

from vulcan.

Messing with Vuetify has so far shown that it doesn't integrate as well with the rails side of things as bootstrap does. So far have the ability to pass information from Rails to Vue and render vue components inline.

from vulcan.

This will be fully fixed in the updated version of vulcan that integrates some vue components.

from vulcan.

This is solved in https://github.com/mitre/vulcan/tree/vulcan-next

from vulcan.