VueJS-3 How to render from vue-router?

Question

In vuejs 2 I was able to render directly in the router by return a render html tag. I'm trying to do the same things in vue3 with vue-router 4, but it doesn't appear to work:

{
        path: 'posts',
        redirect: '/posts/all',
        name: 'posts',
        meta: {'breadcrumb': 'Posts'},
        component: {
            render() {
                return h('router-view');
            }
        },
        children: [ //Lots of sub routes here that I could load off the anonymous router-view]
}

Any idea how I can get the component to render that router-view and allow me to use my children routes? I rather not load up a single component just to house "". This worked perfectly in vue-router 3, no idea what is wrong with 4. I also am importing the {h} from 'vue'.

Answer 1

From the Vue 3 Render Function docs:

In 3.x, with VNodes being context-free, we can no longer use a string ID to implicitly lookup registered components. Instead, we need to use an imported resolveComponent method:

You can still do h('div') because it's not a component, but for components you have to use resolveComponent:

import { h, resolveComponent } from Vue;  // import `resolveComponent` too

component: {
  render() {
    return h(resolveComponent('router-view'))
  }
},

Alternatively, if you wanted to use the runtime compiler, you could use the template option (not recommended because the compiler increases app size):

component: {
  template: `<router-view></router-view>`
}

Answer 2

Since Vue Router 4, you can use the RouterView component directly:

import { RouterView } from 'vue-router';

//...

{
    path: 'posts',
    redirect: '/posts/all',
    name: 'posts',
    meta: {'breadcrumb': 'Posts'},
    component: RouterView, // <- here
    children: [ /* ... */ ]
}

Source: https://github.com/vuejs/vue-router/issues/2105#issuecomment-761854147

P.S. As per linked issue, there are allegedly some problems with <transition> when you use this technique, so use caution.