まずはvueをrailsのvueに表示させてみる。
controllerとviewを作る
rails g controller Pages home
下のコードで、app/javasript/packs配下にあるファイルを読み込むことができる。CSSも
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
↓
app/view/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+<%= javascript_pack_tag 'hello_vue' %>
+<%= stylesheet_pack_tag 'hello_vue' %>
</head>
<body>
<%= yield %>
</body>
</html>
ブラウザを確認して見ると、、、
次は、railsのviewからvueを操作するプロセス
app/javascript/packs/hello_vue.js
import Vue from 'vue'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
render: h => h(App)
}).$mount()
document.body.appendChild(app.$el)
console.log(app)
})
// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:
//
// <div id='hello'>
// {{message}}
// <app></app>
// </div>
// import Vue from 'vue/dist/vue.esm'
// import App from '../app.vue'
// document.addEventListener('DOMContentLoaded', () => {
// const app = new Vue({
// el: '#hello',
// data: {
// message: "Can you say hello?"
// },
// components: { App }
// })
// })
中央のコメントアウトされている文章を読んで見ると、上をコメントアウトして、下のコメントアウトを外してくれ。そして、下のコードをerbにペースとしてくれと書かれている。
app/javascript/packs/hello_vue.js
import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
import Home from './pages/Home.vue'
document.addEventListener('DOMContentLoaded', () => {
const app = new Vue({
el: '#hello',
data: {
message: "Can you say hello?"
},
components: { App }
})
})
ブラウザ側
home.html.erb
<div id='hello'>
{{message}}
<%# ↓app.vueの読み込み %>
<app></app>
<h1>Pages#home</h1>
</div>
Hello.vueとcan you say hello?が表示されて入れば完了です。
終わりです。