Adding Vue.js to my theme with Webpack not working I am trying adding Vue.js into my Drupal 8 theme with my Webpack setup (which I had already working).

It's all compiling fine with Webpack, without errors after my npm script npm run build.



In my index.js I have:

import './styles.css';
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h =&gt; h(App)
}).$mount('#app')




In my App.vue I have:

&lt;template&gt;
  &lt;div id="app"&gt;
    &lt;HelloWorld msg="Coming Soon: Near-Earth Objects"/&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
  import HelloWorld from './components/HelloWorld.vue'

  export default {
    name: 'app',
    components: {
      HelloWorld
    }
  }
&lt;/script&gt;

&lt;style&gt;

&lt;/style&gt;




In my ./components folder I have HelloWorld.vue

First I am trying now to render my Vue component inside header.html.twig like

&lt;hello-world&gt;&lt;/hello-world&gt;


My thoughts are, by the element  in page.html.twig I can show, arrange and position all my Vue.js components where I want. Is that correct?

But why is my component not showing up? 

Update:

I figured out. My webpack.config.js is splitting Vue into /themes/custom/my_theme/dist/vendors~main.bundle.js. By this setting:

config.optimization = {
      splitChunks: {
        chunks: "all"
      },


What is the purpose of this? Isn't it better to compile it all into the same file main.bundle.js?
I recommend looking into the Decoupled Pages module which can make integrating Vue.js simpler.