1

SPAでない既存のHTMLの中で、一部Vue.jsのコンポーネントで書き換えるために、
Vue.js 1.xでは以下のようにしていました。

<html>
<body>
  <popup></popup>
</body>
</html>
import Vue from 'vue'
import Popup from './Popup.vue'

new Vue({
  el: 'body',
  components: {
      Popup
  }
});

Vue.js 2.xで同様のコードを書くと、Do not mount Vue to <html> or <body>という警告が出ます。
どう実現したら良いでしょうか?
以下のようにしてみると、コンポーネントのslotが設定されないないようでした。

import Vue from 'vue'
import Popup from './Popup.vue'

new Vue({
  el: 'popup',
  render: h => h(Popup)
});

1 件の回答 1

1

Vue.js 2.0からはbodyへのマウントはできなくなりました。

bodyにマウントしてたところをdivタグで囲めば解決できます。

const Popup = {
	template: `<p>popup</p>`
}

new Vue({
	el: "#app",
  components: {
      Popup
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <popup></popup>
</div>

1
  • 回答ありがとうございます。これだけのためにdivタグを記述するのも微妙かなとちょっと思います。
    – kawauso7.c
    Commented 2016年11月1日 5:42

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。