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