Vue.js
Add the default setup for Vue.js.
Used 66 times
B
Ben Latz
Usage
After this is installed:
1. Go to app/javascript/packs/hello_vue.js and follow those instructions.
Note: Chances are you will want to use the bottom version (commented out) that takes advantage of vue-turbolinks.
2. Add the pack tags to your application.html.erb if not already there.
3. Add the ID to your most parent div inside <body> in order to connect it with your Vue app. Ex: if you see inside the Vue app initialization "el: #hello", you would add an ID "hello" to your wrapper div — this adds Vue functionality inside of that div.
Webpacker Vue docs: https://github.com/rails/webpacker/blob/master/docs/integrations.md#vue
Vue.js docs: https://vuejs.org/v2/guide/
GoRails video on this process: https://gorails.com/episodes/vuejs-components-in-rails-views
1. Go to app/javascript/packs/hello_vue.js and follow those instructions.
Note: Chances are you will want to use the bottom version (commented out) that takes advantage of vue-turbolinks.
2. Add the pack tags to your application.html.erb if not already there.
3. Add the ID to your most parent div inside <body> in order to connect it with your Vue app. Ex: if you see inside the Vue app initialization "el: #hello", you would add an ID "hello" to your wrapper div — this adds Vue functionality inside of that div.
Webpacker Vue docs: https://github.com/rails/webpacker/blob/master/docs/integrations.md#vue
Vue.js docs: https://vuejs.org/v2/guide/
GoRails video on this process: https://gorails.com/episodes/vuejs-components-in-rails-views
Run this command in your Rails app directory in the terminal:
rails app:template LOCATION="https://railsbytes.com/script/Xo5s7x"Template Source
Review the code before running this template on your machine.
run "bundle add webpacker" if !defined?(Webpacker)
rails_command "webpacker:install:vue"