vue.jsでのnavbarにおけるハンバーガーメニューの動作について

Question

プログラミング初心者です。
vue.jsでbootstrap4を用いてnavbarを実装しました。
その後ナビバーにあるリンクをスマホで見たときにハンバーガーメニューになるようにコードを書いたのですが、ボタンアイコンは出てきたものの展開されず困っています。
どうすれば展開されてリンクが押せるようになるのでしょうか。

<追記>
Package.jsonのコード
bootstrapのバージョンが間違っていました。申し訳ございません。

発生している問題・エラーメッセージ

<追記>
開発者ツールについては存じておりましたが、コンソールでエラーを確認することができるのは知りませんでした、、。
確認したところエラー表記がありましたので、そのままコピペして載せます。

Unchecked runtime.lastError: The message port closed before a response was received.　http://localhost:8080/#/

以上のメッセージが出てました。

エラーメッセージ

該当のソースコード

[src/components/myheader.vueのコード]
<template>

<div> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" date-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

        <div id="navbarNav" class="collapse navbar-collapse justify-content-around">
             <ul class="navbar-nav">
             <li class="nav-item active">
                <router-link class="nav-link text-black px-3" to="/">home</router-link>
             </li>
             <li class="nav-item active">
                <router-link class="nav-link text-black px-3" to="/About">About</router-link>
             </li>
             <li class="nav-item active">
                <router-link class="nav-link text-black px-3" to="/Languages">Languages</router-link>
             </li>
             <li class="nav-item active">
                <router-link class="nav-link text-black px-3" to="/Portfolio">Portfolio</router-link>
             </li>
             </ul>
        </div>
    </nav>
</div>

</template>

ソースコード
※追記コード

[src/router/index.jsのコード]
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue' // added
import 'bootstrap/dist/css/bootstrap.css' // added
import 'bootstrap-vue/dist/bootstrap-vue.css' // added
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'
import Languages from '@/components/Languages'
import Portfolio from '@/components/Portfolio'

Vue.use(Router)
Vue.use(BootstrapVue) // added

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/About',
      name: 'About',
      component: About
    },
    {
      path: '/Languages',
      name: 'Languages',
      component: Languages
    },
    {
      path: '/Portfolio',
      name: 'Portfolio',
      component: Portfolio
    }
  ]
})

[src/App.vueのコード]
<template>
  <div id="app">
    <myheader></myheader>
    <router-view/>
    <button class="btn btn-primary">test</button>
  </div>
</template>

<script>
import myheader from './components/myheader'

export default {
  name: 'App',
  components: {
    myheader
  }
}
</script>

<style>
 #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

[src/main.jsのコード]
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

試したこと

ここに問題に対して試したことを記載してください。
<追記>
こちらのページを参考にプロジェクトを作成いたしました。
進捗としてはこのページの作業を全て終え、ハンバーガーメニューのみを自分で実装しはじめたところです。
https://qiita.com/masa08/items/3474d97a1283dfc275c9

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[hallen0225]

初めまして。vue.jsでbootstrap4を使っていらっしゃるとのことですが、利用されているのはbootstrapVueでしょうか？？それとも、Vue.jsと通常のbootstrapを併用されているのでしょうか？？
対応方法が少々異なってくるので、お答えいただけると助かります。

[shun7486-eng]

はじめまして。ご質問ありがとうございます。
利用しているのはBootstrapVueです。
よろしくお願いいたします。

[hallen0225]

ソースコードは画像でなくテキストで掲載してください。（テキストでないと、こちらでコピペして再現できないため）

Answer 1

メニューを開閉するボタンに、date-toggleという属性が書かれていますが、これがdata-toggleの間違いのようです。

（参考：Navbar - Bootstrap 4.5 - 日本語リファレンス）
BootstrapVueをご利用というご回答でしたが、ソースコードを見る限り通常のBootstrapの記述方法だったので、こちらを参考資料として提示いたします。

ボタン部分を下記のように修正されてみてはいかがでしょうか？

<button
  class="navbar-toggler"
  type="button"
  data-toggle="collapse"
  data-target="#navbarNav"
  aria-controls="navbarNav"
  aria-expanded="false"
  aria-label="Toggle navigation"
>

Comments

[shun7486-eng]

お忙しいところご回答ありがとうございます。
ご指摘部分変更いたしましたが、ボタンを押してもやはりリストが表示されませんでした、、。
なにか読み込みが不足していたり間違っている可能性もあるのでしょうか。

[hallen0225]

それでしたら、Vue.jsの部分も含めてソースコード全体を提示いただけますでしょうか？？
（提示いただいたHTMLを見る限り、BootstrapVueの機能は使っていないようなので、通常のBootstrapを読み込む必要もありそうです）

（訂正）BootstrapVueを使うためには通常のBootstrapは必要となるようですね。もしかするとBootstrapVueの導入に失敗している可能性もありますし、今のところ原因が絞り込めない状態です。。

[hallen0225]

それから、ブラウザの「開発者ツール」というものの使い方はご存じでしょうか？？
ボタンを押されたときに、開発者ツールの「コンソール」画面に何かメッセージは表示されるでしょうか。

[shun7486-eng]

返信ありがとうございます。
ソースコードとコンソールのエラー内容を追記いたしました。
また、試したこと(このエラーに至るまで)を簡単に記載しました。
Bootstarapに関してはバージョンが間違っていました、すみません。

他のコードが必要でしたら再度追記いたします。
よろしくお願いいたします。

[hallen0225]

入れ違いで「質問の追記・修正依頼」にコメントしてしまったのですが、ソースコードは画像でなくテキストでいただけないでしょうか？？
（こちらの手元で同じソースコードを使って動作確認したいので）

[shun7486-eng]

配慮が足りておらずすみません。
画像からテキストに変更いたしました。
ご確認のほどよろしくお願いいたします。

[hallen0225]

こちらで再現しようとした際に、別のエラーメッセージが出てしまい困っていたのですが、頂いたエラーメッセージで検索したところ、下記のような情報が見つかりました。
https://onoredekaiketsu.com/unchecked-runtime-lasterror-with-chrome/

こちらのサイトを参考に、対処できないでしょうか？？

[shun7486-eng]

参考サイトをもとにエラーは消すことができました！
ありがとうございます。
ですが、ボタンはやはり反応ないです。

[hallen0225]

こちらでも画面が表示できるところまでは来ました。

今回使っているのがBootstrap-Vueなので、やはりBootstrapの記法ではなくBootstrap-Vueの記法を使うべきなのだと思います。
（Javascriptで無理やりやることができなくはないと思いますが。。）
参考：https://bootstrap-vue.org/docs/components/navbar#custom-navbar-toggle

[hallen0225]

ちなみに、Vue.jsの機能やBootstrap-Vueの機能を一切使わずJavascriptのみでどうにかするとしたら、App.vueのscriptタグ内に下記のように追記して下さい。
ただ、せっかくBootstrap-Vueを導入したのですから、出来ることならこういうことはしないで解決したいところではあります。
document.addEventListener("DOMContentLoaded", function() {
const navbarToggler = document.getElementsByClassName("navbar-toggler")[0];
const navbarNav = document.getElementById("navbarNav");

navbarToggler.addEventListener("click", function() {
if (this.getAttribute("data-toggle") === "collapse") {
navbarNav.style.display = "block";
this.setAttribute("data-toggle", "expand");
} else {
navbarNav.style.display = "none";
this.setAttribute("data-toggle", "collapse");
}
});
});

[hallen0225]

もう一つ試していただきたいことがありました。ボタン部分を、
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
のように変更してみていただけますか？？
（data-toggleが"data-bs-toggle"に、data-targetが"data-bs-target"に代わっています）

こちらは、Bootstrapのバージョン4から5での変更点のようです。

[shun7486-eng]

ご回答ありがとうございます。
提案いただいたjavascriptのみを利用する方法で、機能することを確認しました。少し安心しました。
またボタン部分の変更(bsの追加)はしましたが、変わらずでした。
おっしゃる通りbootstrap-vueを活用したいので調べていたところ、jqueryとpopper.jsが必須だという記事を見つけました。
参考:https://qiita.com/gakuseikai/items/6467faf811d34c92cf1f

bootstrapのサイトにもトグルボタンも使用する際は、新たに＜script>の記述が必要とありました。
参考:https://getbootstrap.jp/docs/5.0/getting-started/introduction/

jqueryとpopper.jsはインストールされていなかったので早速インストールしました。
あとは導入だけだと思うのですが、どうもエラーではじかれます。
どうかあと少しお力を貸していただけないでしょうか。

[hallen0225]

bootstrap5は、jQueryが必要なくなったように認識しています。（Bootstrap4までは必須でした）
popper.jsに関しては、もしかすると入っていない可能性がありそうですね。メニューの開閉なので、関係あるかもしれません。
ただ、npmでインストールしている場合は、scriptタグの記載は不要と思います。（scriptタグを書く代わりに、main.jsで"import Vue from "vue";"のようにimportしています。

ところで、エラーが出ているというのはどの段階で、どのようなエラーでしょうか？？

[shun7486-eng]

jQuery必要なくなったんですね。
エラーに関してはbootstrapサイトのscriptタグをmyheader.vueに貼り付けた際に現れました。
[貼り付けたscriptタグ]
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

[現れたエラー]
This dependency was not found:

* !!babel-loader!https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js in ./src/components/myheader.vue

To install it, you can run: npm install --save !!babel-loader!https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js

ただscriptタグが不要とのことなので、あまり関係のないエラーなのかもしれませんが、、。

[hallen0225]

私の手元では解決できました！
.router/index.jsに、下記2行を追加してください。
import { Tooltip, Toast, Popover } from "bootstrap";
Vue.use({ Tooltip, Toast, Popover });

原因としては、今回使おうとしているのが、Bootstrap-VueのNavbarコンポーネントではなく、BootstrapのNavbarコンポーネントだったため、これを動作させるためにBootstrapVueでなくBootstrapをimportする必要があったものと思われます。
（参考：https://getbootstrap.jp/docs/5.0/getting-started/webpack/#javascript-%E3%82%A4%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%88）

先ほどコメントされていたscriptタグの追加はやはり不要のようです。

[shun7486-eng]

ご回答ありがとうございます。
私の方でも試したところ、以下のエラーが出ました。

[エラー内容]
./node_modules/bootstrap/dist/js/bootstrap.esm.js
Module parse failed: Unexpected token (1204:15)
You may need an appropriate loader to handle this file type.
|
| _getConfig(config) {
| config = { ...Default$9,
| ...config
| };
@ ./src/router/index.js 10:0-52
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

[index.jsのソースコード]
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue' // added
import 'bootstrap/dist/css/bootstrap.css' // added
import 'bootstrap-vue/dist/bootstrap-vue.css' // added
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import About from '@/components/About'
import Languages from '@/components/Languages'
import Portfolio from '@/components/Portfolio'
import { Tooltip, Toast, Popover } from "bootstrap"; // added

Vue.use(Router)
Vue.use(BootstrapVue) // added
Vue.use({ Tooltip, Toast, Popover }); // added

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/About',
name: 'About',
component: About
},
{
path: '/Languages',
name: 'Languages',
component: Languages
},
{
path: '/Portfolio',
name: 'Portfolio',
component: Portfolio
}
]
})

何度もすみません。
なにかお分かりでしたらご教示お願いいたします。

[hallen0225]

index.jsのコード自体は私の手元で動いているものと同じなので、原因はそこではないように思います。
bootstrap自体が読み込めていないように見えるので、導入手順に間違いがないか確認されてもよろしいかもしれません。

なお、こちらでは下記手順で行っています。
1. "vue create (プロジェクト名)"で、新規プロジェクトを作成（選択肢は、一番上の"Default ([Vue 2] babel, eslint)"
2. "cd (プロジェクト名）"で作成したプロジェクトフォルダに移動
3. "npm install vue-router @popperjs/core bootstrap-vue bootstrap"で必要なものをインストール
4. プロジェクトフォルダ内のソースを、提示いただいたものに書き換え
5. npm run serveにて、ローカルで実行

[shun7486-eng]

手順に従いプロジェクトを作り直したところ動作を確認することができました!
貴重なお時間をいただきありがとうございました。
助かりました。