KJ DEV
How to

動的に生成したDOMでVueのコンポーネントを使うには?

Vueを使っているアプリケーションでappendChildを使って動的にコンポーネントを入れたくなったことありませんか?

mountedのタイミングで外部のスクリプトを使用してUIを構築する機会がありました。

そこでVueのコンポーネントを使うという要件があったのですが、後から自分でDOMを作ってどうやってVueのアプリケーション内にいれるんだろう?と思い調べてみました。

最初に「Vue appendChild」や「Vue dynamic component」のような言葉で検索すると下記の記事に出会い実装の参考にさせてもらいました。

https://css-tricks.com/creating-vue-js-component-instances-programmatically/

それでは動的に生成したDOMでVueのコンポーネントを使いアプリケーション内にいれる方法を順を追っていきます。

目次
  1. VueのアプリケーションにappendChildした要素を表示する
  2. Vueのコンポーネントのインスタンスを生成してappendChild
  3. まとめ

VueのアプリケーションにappendChildした要素を表示する

まずは基本的なところから。
Vueでアプリケーションを使う場合は下記のようなコードになりますね。

1
2
3
<div id="app"> 
	Vue application
</div>
1
2
3
4
5
import Vue from 'vue'

const vueApp = new Vue({
	el: '#app'
})

後は#app内にコンポーネントを書いていけば問題なく使えますが、

今回は上記でレンダリングした後に新たにdocument.createElementで動的に生成したDOMでVueのコンポーネントを使うのが目的です。

例えば動的に生成した要素を#app内に入れる場合は下記のようなコードになります。

1
2
3
4
5
6
const div = document.createElement('div')
const app = document.getElementId('app')
    
div.innerHTML = '<div class="example">Example</div>'
    
app.appendChild(div)

ただ動的に入れたい要素がVueのコンポーネントだったら少し工夫が必要になります。

Vueのコンポーネントのインスタンスを生成してappendChild

VueのコンポーネントをappendChildしたDOMの中で動かすにはコンポーネントのインスタンスを生成してから$elをappendChildするようにします。

下記のようなフローで動かすことができます。

  1. 動的にいれるDOMを生成
  2. 生成したDOMをappendChildで追加
  3. 動的に追加するコンポーネントにVue.extendを適用
  4. 2のコンストラクタのインスタンスを作る
  5. インスタンスをマウント
  6. 1で生成DOMにコンポーネントを入れる

フローに沿って具体的なコードでみていきます。
2の部分は順を追いやすいようにこの手順にしていますが6の直前でも問題ありません。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import Vue from 'vue'
import Hello from './Hello'

// --
// 1
// --
const div = document.createElement('div')

// 動的にいれるDOMを生成
div.innerHTML = '<div class="example" id="example"></div>'

// --
// 2
// --
document.getElementById('app').appendChild(div)

// --
// 3
// --
const HelloComponent = Vue.extend(Hello)

// --
// 4
// --
const instance = new HelloComponent({
	propsData: { // Helloのpropsに渡すデータ
		msg: 'Vue'
	}
})

// --
// 5
// --
instance.$mount()

// --
// 6
// --
document.getElementById('example').appendChild(instance.$el)

Vue.extendについて知りたい場合は公式サイトを参照してください。

https://012-jp.vuejs.org/guide/components.html

まとめ

今回は参考にさせてもらった記事のコードを中心にやりたいことができました。

しかしこの記事を書いているときにVueの公式ドキュメントのmountedメソッドのところに記載があることに気づきました・・。

https://jp.vuejs.org/v2/api/index.html#vm-mount

これまでもずっと記載があったのか、それともどこかのタイミングで追加されたのかわからないですが灯台下暗しでした。

開発で参考になった本

実際に読んでみて開発に役立った本を紹介しています。

これから本格的にデザインシステムを学んで作りたい時にとても参考になる一冊でした。デザインシステムついて幅広く触れられているけど、「tailwindを触ってデザインシステムに興味を持った」という人でも少しずつ取り入れやすいです。