Bootstraping with vue 2, router and vue-loader

Question

With vuejs 1 the code was:

const App = Vue.extend(Index);
router.start(App, '#app');

Where Index is a component.

I try to convert it to vue 2 like this:

const App = Vue.extend(Index);
const app = new App(router).$mount('#app');

But this gives an [Vue warn]: Error when rendering root instance.

What is the correct way to re-write this?

thanks

Atinux · Accepted Answer · 2016-10-04 14:15:13Z

4

You have to give the router as a parameter:

const app = new App({ router }).$mount('#app');

Example:

const Index = {
  template: `<div id="app">It's working!</div>`
}
const App = Vue.extend(Index)
const router = new VueRouter()

const app = new App({ router }).$mount('#app');

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>

answered Oct 4, 2016 at 14:15

Atinux

1,70315 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

François Romain Over a year ago

Thanks a lot for the working code snippet! Now, in my app, it says Unknown custom element: <router-view>. Trying to figure out why…

Atinux Over a year ago

If you're using npm and webpack/browserify, you have to call Vue.use(VueRouter) to make sure that vue-router register the component <router-view> @francoisromain

Samuell · Accepted Answer · 2016-10-04 14:15:09Z

2

Try this (App == Index)

const App = Vue.extend(require('./App.vue'))

const router = new VueRouter({
  routes,
  mode: 'abstract'
})

new App({
  router,
}).$mount('#app')

answered Oct 4, 2016 at 14:15

Samuell

457 bronze badges

Collectives™ on Stack Overflow

Bootstraping with vue 2, router and vue-loader

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related