Vue2: How to specify the vue-router root component?

Question

I was just upgraded to Vue2.0, and not so familiar with it.

One change makes trouble for me, that the vue-router initialization [docs] is changed:

In my case, the initialization code is changed as below:

Old

import RootApp from './components/RootApp.vue';

router.start(RootApp, '#app')

New

import RootApp from './components/RootApp.vue';

new Vue({
  el: '#app',
  router: router,
  render: h => h(RootApp)
})

Soon I found that specifying the RootApp in such a manner of new case make the root app code ambiguous for me.

That in old case, the $root element of each sub-route element yields the RootApp instance, while in new case, it yields another component which contains the RootApp instance as its only child.

So, it makes trouble, is there any way to create the RootApp just acts the root node in Vue2?

Or I guess, is there any way to create an Vue instance like the below (but failed when tried):

# Failed code to tell what I want

import RootApp from './component/RootApp.vue';
new RootApp({
    el: '#app',
    router: router,
});

Community · Accepted Answer · 2017-05-23 12:01:47Z

5

After a long time to test, I found the last attempt is almost there, see another question:

Vue.js 2: How to initialize(construct) a Vue component from a .vue file?

The following code worked perfectly!

import RootApp from './component/RootApp.vue';
const RootAppConstructor = Vue.extend(RootApp);
new RootAppConstructor({
    el: '#app',
    router: router,
});

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Dec 1, 2016 at 8:47

Alfred Huang

18.4k33 gold badges128 silver badges196 bronze badges

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

3 Comments

GuyC Over a year ago

That's a nice way around refactoring. +1 - would also maintain your <style> tags which is really good

Alfred Huang Over a year ago

@GuyC what do you mean by maintain the <style> tag? Any question posted or something else?

GuyC Over a year ago

no question - just if you'd used my answer you would of had to have worked with the CSS in a different manner, however with the method above you have a <style> tag within your .vue file which will allow you to set base styles for the whole app. Basically I like this idea - nice one!

GuyC · Accepted Answer · 2016-12-01 08:14:35Z

1

You could refactor your RootApp so that it's methods / data etc... all reside within this new root Vue instance.

This will mean also copying across RootApp's template to your main index.html (or whatever you use) file. When done though everything should function as before, albeit not from a single .vue file.

answered Dec 1, 2016 at 8:14

GuyC

6,6141 gold badge35 silver badges45 bronze badges

2 Comments

Alfred Huang Over a year ago

Don't understand. I just want the redundant root component to be collapsed.

GuyC Over a year ago

Sorry that's what I was saying, that you could refactor your current app by moving your methods, data etc.. into that new root instance - thus making it not redundant. As far as I'm aware you can't render a child component and then ask Vue to consider it the $root, and nor can you use a .vue file as the root of your app

Collectives™ on Stack Overflow

Vue2: How to specify the vue-router root component?

Old

New

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Old

New

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related