Vue.js

Add the default setup for Vue.js.
Used 26 times
Created by
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

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"
Mark
© 2020 GoRails, LLC