

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

[code]

    <html>
    <body>
      <popup></popup>
    </body>
    </html>
    
[/code]

[code]

    import Vue from 'vue'
    import Popup from './Popup.vue'
    
    new Vue({
      el: 'body',
      components: {
          Popup
      }
    });
    
[/code]

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

[code]

    import Vue from 'vue'
    import Popup from './Popup.vue'
    
    new Vue({
      el: 'popup',
      render: h => h(Popup)
    });
    
[/code]


CC BY-SA 3.0
2016-11-01T03:34:22.743
30028
2019-12-13T18:52:55.523
15676
question
vue.js
Vue.js 2.x で、コンポーネントをマウントする方法


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

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

[code]

    const Popup = {
     template: `<p>popup</p>`
    }
    
    new Vue({
     el: "#app",
      components: {
          Popup
      }
    })
[/code]

[code]

    <script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
    <div id="app">
      <popup></popup>
    </div>
[/code]


CC BY-SA 4.0
2016-11-01T05:25:37.627
30030
2019-12-13T18:52:55.523
2019-12-13T18:52:55.523
32986
2260
30028
answer