実現したいこと

Vue3 + Viteで、plotに渡される要素の空白・改行を保持したい。

TL;DR

'@vitejs/plugin-vue'をインポートする。

vite.config.js

import vue from '@vitejs/plugin-vue'

vite.config.jsのpluginsを以下のように記述する。

vite.config.js

plugins: [
        vue({
            template: {
                compilerOptions: {
                    whitespace: 'preserve'
                },
            },
        }),
    ]

環境

vue  == 3.4.21
vite == 5.2.0
@vitejs/plugin-vue　== 5.0.4

状況

Vue3では、plotに渡される要素に含まれる空白・改行は、標準では圧縮および除去されてしまいます。例えばこんな感じです:

Example.vue

<template>
    <plot></plot>
</template>

main.vue

<script setup>
    import Example from './Example.vue';
</script>

<template>
    <Example>
        ここを改行したい
        ここを改行したい
        ここを改行したい
    </Example>
</template>

上のような場合、main.vueの出力は次のようになってしまいます。

output

 ここを改行したい ここを改行したい ここを改行したい

このように、空白・改行を保持できません。

解決策

Vue3では、plotに渡される要素の空白・改行は、コンパイル時に削除あるいは圧縮されてしまいます。したがって、コンパイルオプションを変更してやれば良いのです。
より具体的には、

app.config.compilerOptions.whitespace = 'preserve'

のように、デフォルトの'condense'から'preserve'に変更します。

今回はViteを使っているので、@vitejs/plugin-vueからオプションを渡してやります。
vite.config.jsを以下のように書き換えます。

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue({
            template: {
                compilerOptions: {
                    whitespace: 'preserve'
                },
            },
        }),
    ]
})

あとはサーバをリスタートすれば、空白・改行が維持されるはずです。

しかしながら、コンパイルオプションへの変更はアプリケーション全体へ影響を及ぼしますので、当該部分だけでなく、他の要素も確認されることをお勧めします。

最後に

改行したいなら<br>使えばええやん? と思った読者の皆様、おっしゃる通りでございます。ただ、私自身、どうしてもこの方法が必要であったため、他にも必要とされる方がいるのではと思い、寄稿させていただきました。

参考文献

https://ja.vuejs.org/api/application#app-config-compileroptions
https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue#options