How to write the view when Vue is introduced in Rails?
First, let's display vue on rails vue.
Create controller and view
rails g controller Pages home
The code below can read the files under app/javasript/packs. CSS too
<%= javascript_pack_tag 'hello_vue' %>
<%= stylesheet_pack_tag 'hello_vue' %>
↓
erb: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>
When I check the browser, ...
Next is the process of manipulating vue from the rails view
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 }
// })
// })
If you read the commented out text in the center, comment out the top and uncomment the bottom. And the code below is written to erb as a pace.
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 }
})
})
Browser side
erb:home.html.erb
<div id='hello'>
{{message}}
<%# ↓app.loading vue%>
<app></app>
<h1>Pages#home</h1>
</div>
Hello.vue and can you say hello? Are displayed and you are done.
It is the end.
reference: https://qiita.com/cohki0305/items/582c0f5ed0750e60c951
Recommended Posts