VuetifyのVDataTableでalign: 'end'が効かない時のワークアラウンド

環境

nuxt: 2.14.7
vuetify: 2.3.15

遭遇した問題

VDataTable の headers に align: 'end' を指定しても右寄せにならなかった。

headers: [
  { text: 'カラム', value: 'foo', align: 'end' }
]

結論（ワークアラウンド）

html に dir 属性を追加する。
Nuxt.js の場合は、nuxt.config.ts/js に下記の指定を追加する。

head: {
  htmlAttrs: { dir: 'ltr' }
}

ちょっと詳細

調査1: 適用されている CSS を確認

まず、 DevTools で HTML を見てみました。

<th role="columnheader" scope="col" aria-label="カラム" class="text-end">
  <span>カラム</span>
</th>

上記のように、ちゃんと text-end が付与されていました。
※ちなみに text-end を text-right にすると右寄せになりました。

調査2: Vuetify の CSS を確認

次に node_modules/vuetify/dist/vuetify.css を見てみました。

.v-application .text-right {
  text-align: right !important;
}

〜 中略 〜

.v-application .text-end {
  text-align: end !important;
}

上記のように text-right と同じ並びに定義してありました（text-right は効くので定義のミスではないはず）。

調査3: ビルド後に出力される CSS を確認

最後に nuxt build で出力される CSS を見てみました。

.v-application .text-right{text-align:right!important}
[dir=rtl] .v-application .text-end{text-align:left!important}

.v-application の前に dir の属性セレクタが追加されていました。
そのため、.text-end は適用されていませんでした。

余談: dir 属性とは

dir グローバル属性は、要素のテキストの書字方向を示す列挙型属性です。

MDN web docs:dir

ちなみに Vuetify は 属性ではなく direction プロパティ を使っているようです。

MDN web docs:direction

.v-application--is-rtl {
    direction: rtl;
}

対応: dir 属性を追加する

原因が分かったので、クラスが適用されるように属性を追加してあげれば良さそうです。
前述の通り、nuxt は nuxt.config で html タグに属性を追加できるので、そこに追加しました。

head: {
  htmlAttrs: { dir: 'ltr' }
}

これで、.text-end が適用されることが確認できました。