Vuetify使ってるのに自分でstyleを書いてbackground-imageを指定した話

はじめに

Nuxt.jsとVuetifyを使って、アプリ制作中に背景画像を貼りたくなる場面に遭遇しました。折角Vuetify使っているのだから、v-parallax使ってカッコイイ背景にしようと思ったのですが、上手く使いこなせなないのと用途的も合っていないと判断し、結局は自分でstyleを書いたと言うお話です。
Qiita初投稿なので、温かい目で見てもらえるとありがたいですm(_ _)m

v-parallaxでbackground-image？

　v-parallax内で指定した画像がwindowよりも遅くスクロールすることによってページに立体感を出すと言う代物らしい。最初このとこを知らずにbackground-imageをv-parallaxを使って表示しようとしていたのが大きな間違いでした。
　v-parallaxは画面全体のbackground-imageを指定するときに使うものではなさそう。よくよく考えればv-parallaxは画面全体とのスクロールのズレを利用して立体感を演出するものなので、それを全体に使うってダメじゃね？なんではじめに公式でv-parallaxの説明をちゃんと読まなかったのだろう。

v-parallaxの使い方

そうは言っても、使ってはみたのでメモとして使い方は書いておく。

1. srcがglobalにある書き方

<template>
  <v-parallax src="https://shimabee.com/profile/images/myimage.jpg"></v-parallax>
</template>

1. srcがlocal(assets/images配下にあるとき)にある書き方

<template>
  <v-parallax :src="require('@/assets/images/myimage.jpg')"></v-parallax>
</template>

結局は力技！

結論としてv-parallaxは画面の一部となるコンポーネントの背景に使用するとカッコよくできます！
でも今回欲しいのはスクロールのないアプリケーションの全画面背景の指定方法なので、ちょっと違うかな〜と思い、自分でstyleを書いて実装しました。
v-appの中のv-contentのclassのクラスにbackground-imageを指定すると、余分な隙間なく全画面の背景としてimageを指定することができました！

<template>
  <v-app>
    <v-content class="bg">     
    </v-content>
  </v-app>
</template>

<style>

  .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-image: url("~@/assets/images/foo.jpg");
  }
  
</style>

参考

vuetify parallax(公式)
v-parallax doesnt work with local files?(stack overflow)