Webpack template - why <App> component?

[Silvio]

Hey!

I try to understand the purpose of the following code I found in the webpack template:

new Vue({

	el: '#app',
	router
	render: h => h(App),
	components: { App }

});

Which results in following structure (including the child component of the template):

<Root>
  <App>
    <Hello>

Why not just this?:

<Root>
  <Hello>
  <Myothercomponent>
  ...

Thanks and cheers!

[LinusBorg]

Two things to differentiate:

1. Having all of your template code in an App.vue (and none in your index.html's #app div) allows us to use the runtime-only version of Vue which is smaller than the full version.
2. But there's no real advantage in making it a seperate component below root, you make root from it like this:

new Vue({
  el: '#app'
  router,
  ...App, // ES7 object rest spread operator.
});

Which rould result in

<Root>
  <Hello>

But they would generally work the same.

I guess it's a matter of personal preference (wether or not) to have a dedicated root instance that is not a real component, and an App component that works as the the root component of your app.

[Silvio]

Thanks a lot for your quick answer!!

to 1: Yeah, of course!
to 2: ok, I'll see how having all in App.vue feels like. Having a cleaner index.html sounds very nice

I made me a simple setup with rollup.js. Are there any plans for releasing an official rollup template too?

[LinusBorg]

I made me a simple setup with rollup.js. Are there any plans for releasing an official rollup template too?

Rollup is usually a better fit when you are authoring a library while webpack is better suited for apps (that may use other's libraries), mainly because of advanced features like code splitting.

So if we publish a rollup-centric template (and we have dicussed it, but are not working on it actively), it will probably be a template for creating components/libraries, not complete apps.