vue.js cdn을 이용한 개발 시 v-cloak

vue.js를 cdn으로 사용하다보면, 화면을 불러온 후 CSR이 완료되지 않아 mustache문법 {{ }}이 보이는 현상이 발생

 

1. 브라우저(클라이언트)에서 서버로 화면 요청

2. SSR 후 html을 응답

3. 브라우저로 전달

하여 사용자의 브라우저(크롬, 익스 등)에 보이게 되는데 cdn으로 불러온 vue.js 스크립트에서 아직 {{ }}의 값을 변경하지 못해 사용자에게 {{ }}의 값들이 노출 된다.

v-cloak 디렉티브를 해당 vue instance 영역에 attribute로 붙이게 되면 vue.js mounted가 끝나면 v-cloak 디렉티브 영역을 보이게 변경 해주는 것 같다.

 

<div id="vue" v-cloak>

</div>

 

css에 하단 코드를 추가해줘야 페이지 로딩 시 보이지 않음.

[v-cloak] {

   display: none;

}