vue3 + vite: 기본으로 잡혀야 할 태그 간 여백이 사라질 때

button 태그 등은 기본적으로 여러개가 배치되면 각 요소 사이에 여백이 생성되도록 되어있다.

vite의 plugin-vue 에서는 이런 부분을 강제로 억제하는 설정이 기본으로 되어있다.

bootstrap 템플릿을 다운받아 사용할 때면 한줄 배치된 버튼들이 다닥다닥 붙어 나오는 것은 이런 이유이다.

이런 경우 vite의 vue 플러그인 옵션을 수정하여 해결할 수 있다.

//before
plugins: [vue()]

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