Vue.js와 UIKit의 uk-icon 간의 궁합이 좋지 않음

Overview

Vue.js에서 UIKit을 사용할 때 스크립트를로드하는 순서를 UIKit script → Vue.js script로 설정하면 uk-icon의 마크 업이 더됩니다.

<span uk-icon="trash"></span> item1
<span uk-icon="trash"></span> item2

TL;DR

로드 순서를 Vue.js script → UIKit script로 설정합시다.

입증 코드

문제 버전 (UIKit script → Vue.js script)

※ 다소 생략하고 있습니다

<div id="#app1">
  <ul class="uk-list">
    <li v-for="item in items">
      <span uk-icon="trash"></span> {{ item }}
    </li>
  </ul>
</div>

<script src="uikit.min.js"></script>
<script src="uikit-icons.min.js"></script>
<script>
var app1 = new Vue({
  el: '#app1',
  data: {
    items: []
  }
});
</script>

이 상태에서

app1.$data.items.push("item1");
app1.$data.items.push("item2");

그러면 아래 그림과 같이 element가 더빙됩니다.



DOM도 보시다시피, 두 번 있습니다.

회피 버전 (Vue.js script → UIKit script)

uikit.min.js 및 uikit-icons.min.js 를 Vue 로드 후 이동

  <div id="#app1">
    <ul class="uk-list">
      <li v-for="item in items">
      <span uk-icon="trash"></span> {{ item }}
      </li>
    </ul>
  </div>

- <script src="uikit.min.js"></script>
- <script src="uikit-icons.min.js"></script>
  <script>
  var app1 = new Vue({
    el: '#app1',
    data: {
      items: []
    }
  });
  </script>
+ <script src="uikit.min.js"></script>
+ <script src="uikit-icons.min.js"></script>

이렇게 의도한 대로 표시

원인

미안, 제대로 조사하지 않았다.
아마도 Vue가 로드되었을 때 DOM의 재평가가 실행되어 거기에 발화하여 UIKit가 다시 ui-icon에 SVG element를 부여한 것이라고 생각한다.

그건 그렇고

UIKit 은 cdnjs에서 제공됨

후기

수년간의 문제가 해결되어 기쁩니다. 하지만 , , 왠지 다른 생각이 든다.

EoT