vuetifyのv-spacerを入れると改行になる場合の対処法

この記事 is 何

理想（アイコンが右にある）	現実（アイコンが改行されてる）

こうなった時の対処法と原因を解説している記事です

環境

• nuxt v2.15.8
• vuetify 2.6.6
• node v16.15.1
• ブラウザ: Google Chrome 102.0.5005.115

対処法

v-spacer を適用したい親要素に display: flex を付与する

変更前

<template>
  <v-col cols="12">
    hogehoge
    <v-spacer />
    <v-btn> fugafuga </v-btn>
  </v-col>
</template>

変更後

<template>
-  <v-col cols="12">
+  <v-col cols="12" class="d-flex">
    hogehoge
    <v-spacer />
    <v-btn> fugafuga </v-btn>
  </v-col>
</template>

解説

v-spacer が動作している仕組みをchromeの検証ツールで追うと

Elements

...
<div data-v-b37ee9b2="" class="spacer"></div>
...

styles

.spacer {
    flex-grow: 1 !important;
}

上記のように div に flex-grow をあてることで動作させてるらしい。
flex-grow は flex の子要素に対して適用させるプロパティのため、親要素が display: flex ではない場合、 flex-grow が無視される（動作しない）ため、動作していなかった。
改行された原因は div はブロック要素のため。

.d-flex は該当要素を display: flex にするクラスです。
https://vuetifyjs.com/en/styles/display/#visibility

その他

（未調査） v-spacer は本来親要素となるコンポーネントが決まっている可能性はあるかも。有識者いらっしゃっいましたらコメントいただけると助かります。