最近学校の課題でBootstrapを利用したレスポンシブなwebサイトの制作があった。
せっかくだし自分の勉強もかねてNuxt.jsを利用してみたのだがいろいろ問題が発生し日本語情報が全くなかったので備忘録として書いておきます。

前提の話

Nuxt.jsを利用して静的サイトを製作するため、bootstrapはbootstrapでもVue.jsをつかうbootstrapVueにしました。
ちなみにパッケージマネージャはnpmでなくyarnです。

問題が発生したのははNuxt.jsで画像をWebpack で取り扱うとき

Nuxt.jsではwebpackを利用してして画像などのパスを指定するとき、既存のHTMLとはちょっと違った書き方をします
公式リファレンス→アセット-Webpack で取り扱う

<template>
  <img src="~/assets/image.png">
</template>

（上の公式リファレンスから引用しました）

ただ、これが使えるのはデフォルトでimgタグなどのsrc属性で指定されたものしか設定されてないみたいです。
そしてbootstrapVueで使うタグはというと・・・

  <b-img src="画像のソース" />
  <b-card img-src="画像のソース"/>

他にも挙げられますがこんな感じです。つまりはそのままではこのwebpackを使ったパス指定は利用できません。
なのでその辺の設定ををしていきます。

いろいろ漁った結果bootstrapVueの公式リファレンスで見つけることができました。
Project relative image URLs for BootstrapVue custom components このページの下に載っている「Configuring transformAssetUrls in Nuxt」の部分をそのままコピペしたので詳しいコードは載せません。
それと、ちょっと古いリファレンスもあるので注意です。