how to change VUE main.js to use routers/index.js

Question

Why does the VUE UI main.js code generated by CLI/3 differ from the older syntax, what are its parts and how does it work?

sync(store, router) // for vuex-router-sync
new Vue({
  router, 
  store, 
  render: h => h(App)
}).$mount('#app')

Used to be

sync(store, router) // for vuex-router-sync

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

I also read of a third syntax for using the router without the vuex-router-sync using Vue.extend(... rather than new Vue(

Why do I have to add render now, what is the h function replacing, why was that letter chosen, what is the $mount syntax doing and replacing, why was the $mount syntax chosen?

Also, if this is not a separate topic: Does the new syntax actually do what Vue.extend() does, and if not when do I need to use Vue.extend() instead of new Vue()?

I'm following many tutorials on topics with the old VUE and trying to implement them with the new CLI/3. An understanding of the different syntax and the reasons for its choice in one place will be helpful to anyone learning VUE now with the latest version, without dumping away hundreds of Youtube hours and tutorial documents written outside the VUE team. Thanks. — pashute, Sep 06 '18 at 06:20
OK most of my question, it seems, [is answered here](https://github.com/vuejs-templates/webpack-simple/issues/29), partially and reluctantly by a VUE team member (because its in issues and not in their forum) and partially by others. The author of the question writes that he was downvoted on StackOverflow for the question which, as it turns out, is quite popular and needed. I understand from there: why h was chosen and what it replaces, why $mount was chosen and what it replaces. Still not sure about the `render` and the `extend` if that's not a separate question. — pashute, Sep 06 '18 at 06:24

score 0 · Answer 1 · answered Sep 08 '20 at 13:47

OK most of my question, it seems, is reluctantly answered by a VUE team member here: https://github.com/vuejs-templates/webpack-simple/issues/29

The author of the question writes that he was downvoted on StackOverflow for the question which, as it turns out, is quite popular and needed.

From the answer I understand why h was chosen and what it replaces, why $mount was chosen and what it replaces.

Still not sure about the render and the extend. But that's a separate question.

how to change VUE main.js to use routers/index.js

1 Answers1