概要
- hello_vue.jsに書かれている内容をすべてapplication.jsに移す
- application.html.erbのstylesheet_link_tagをstylesheet_pack_tagに変更する
前提条件
以下のコマンドでアプリを新規作成。
% rails new xxx --webpack=vue
ディレクトリ構成
対処法
hello_vue.jsに書かれている内容をすべてapplication.jsに移す
デフォルトではhello_vue.jsにVueインスタンスを生成するコードが書かれている
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)
})
これらを全てapplication.jsに移す。↓
javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
// 以下、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)
})
application.html.erbのstylesheet_link_tagをstylesheet_pack_tagに変更する
views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Webpackvue</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
- <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+ <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>