How to render Vue Component dynamically with render()

Question

In Vuejs 3 I want to use the render() function to create a VNode, passing it a Vue Component. This component varies depending on the current route.

In vite.js I haven't found a way to import a component dynamically inside my ViewComponent computed function.

With webpack I could normally use return require(`./pages/${matchingPage}.vue`).default, but this is not possible with vitejs as I will get a Require is not a function error.

So I tried return import(`./pages/${matchingPage}.vue`) but it returns a Promise, not a Component

//main.js

import {createApp, h} from 'vue'
import routes from './routes'

const SimpleRouterApp = {
  data: () => ({
    currentRoute: window.location.pathname
  }),

  computed: {
    ViewComponent () {
      const matchingPage = routes[this.currentRoute] || '404'
      return import(`./pages/${matchingPage}.vue`)
    }
  },

  render () {
    return h(this.ViewComponent)
  },

  created () {
    window.addEventListener('popstate', () => {
      this.currentRoute = window.location.pathname
    })
  }
}

createApp(SimpleRouterApp).mount('#app')

What other ways can I try so render() can return a Component dynamically?

Boussadjra Brahim · Accepted Answer · 2021-07-04 20:14:49Z

4

You could use async-components :

import {createApp, h,defineAsyncComponent} from 'vue'
....
  

  render () {
  const matchingPage = routes[this.currentRoute] || '404'
    const ViewComponent= defineAsyncComponent(
      () =>import(`./pages/${matchingPage}.vue`)
   
   )
    return h(ViewComponent)
  },

edited Jul 4, 2021 at 20:14

answered Jul 4, 2021 at 19:38

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

How to render Vue Component dynamically with render()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related