はじめに

クリックするとメニューが開いたり閉じたりする機能をVue.jsで実装します。

この記事はrails6でのVue.js導入編です。
また、rails6からはwebpackerが標準装備されてるのでこちらでは省略します。

目次

1.Vue.js導入
2.Vewのインストール
3.ファイルの読む先を指定
4.エラーの解決方法

開発環境

Vue 2.6.12
rails 6.0.0
ruby 2.6.5

実装

それでは実装して行きます〜

1.Vew導入

1.1Vewのインストール

まずはVueインストールします。

ターミナル

rails webpacker:install:vue

hello_vue.js'とapp.vueが自動生成される。

次に、application.html.erbに読み込まれる様に追記します。

app/views/layouts/html.erb

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>

    <% ↓下記の二行を追記 %>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> ←①これを追記する
    <%= javascript_pack_tag 'hello_vue' %> ←②これを追記する

  </body>
</html>

①はVue.jsを読み込ますためで、②はhello_vueというファイルを読むためにのものです。
両方ともbody内に追記します。

すると下記の様に表示されます。

ひとまずVew.jsが使える様になりました。

1.2ファイルの読む先を指定

このままではデォルトなので、個別の新しいファイルで扱える様にします。

app/views/layouts/html.erb


<%= javascript_pack_tag 'hello_vue' %>
//下記に変更
<%= javascript_pack_tag 'menu_vue' %>

公式ではhello_vueを読み込む様に指定されますが、これから作るファイル名menu_vueに変更します。

新しいファイルを'menu_vue'の名前で作成します。

app/javascript/packs/menu_vue

var app = new Vue({
  el: '#app',
  data: {
    message: 'こんにちは Vue!' //←違いがわかりにくにで日本語に変換
  }
})

app/views/menus/index.html.erb

<h1>Menus#index</h1>
<p>Find me in app/views/menus/index.html.erb</p>

<% 下記を追記 %>
  <div id="app">
    <p>{{ message }}</p>
  </div>

出来ました！！

ここまでが導入です。
続きはメニューを作成する部分を実装します。

【Veu.js】メニュー機能の実装　実装編 rails6
https://qiita.com/AKI3/items/cd1729a25c9bb83061b9

エラーの対応

Webpacker::Manifest::MissingEntryError

このエラーが出る場合階層が違う場合が多いので、気をつけて新しいファイルを作る必要があります。
場所はpacksの配下です。

それでも解決出来ない場合は、yarnやwebpackerに問題があるかもしれません。
下記の記事も参考にしてみてくださ。
https://qiita.com/masatwork/items/1b5d190cc76f5eeffbb7
https://qiita.com/NaokiIshimura/items/8203f74f8dfd5f6b87a0

最後に

私はプログラミング初学者ですが、同じ様に悩んでる方々の助けになればと思い、記事を投稿しております。

それでは、また次回お会いしましょう〜

参考

【公式】
https://jp.vuejs.org/v2/guide/