I am creating a custom component to replace <pre> with some extra style.
The code below will preserve the 4 spaces (indentation):
<pre>
test();
</pre>
However when using my custom component, the whitespace is lost:
<CustomCodeBlock>
test();
</CustomCodeBlock>
My component uses <pre> internally though:
<pre><code><slot /></code></pre>
How can I preserve the whitespace when using my custom component?
0
This is a result of the Vue compiler not preserving whitespace. You can change this behavior in vite.config.js
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
whitespace: 'preserve'
}
}
}),
]
})
1