How do I properly import multiple components dynamically and use them in Nuxt?

Question

I need to implement dynamic pages in a Nuxt + CMS bundle.

1. I send the URL to the server and if such a page exists I receive the data.
2. The data contains a list of components that I need to use, the number of components can be different.
3. I need to dynamically import these components and use them on the page.

I don't fully understand how I can properly import these components and use them.

I know that I can use the global registration of components, but in this case I am interested in dynamic imports.

Here is a demo that describes the approximate logic of my application.

https://codesandbox.io/s/dank-water-zvwmu?file=%2Fpages%2F_.vue

Answer 1

Here is a github issue that may be useful for you: https://github.com/nuxt/components/issues/227#issuecomment-902013353

I've used something like this before

<nuxt-dynamic :name="icon"></nuxt-dynamic>

to load dynamic SVG depending of the icon prop thanks to dynamic.

Since now, it is baked-in you should be able to do

<component :is="componentId" />

but it looks like it is costly in terms of performance.

---

This is of course based on Nuxt components and auto-importing them.
Also, if you want to import those from anywhere you wish, you can follow my answer here.

Answer 2

I used this solution. I get all the necessary data in the asyncData hook and then import the components in the created () hook https://codesandbox.io/s/codesandbox-nuxt-uidc7?file=/pages/index.vue

  asyncData({ route, redirect }) {
    const dataFromServer = [
      {
        path: "/about",
        componentName: 'myComponent'
      },
    ];

    const componentData = dataFromServer.find(
      (data) => data.path === route.path
    );

    return { componentData };
  },

  data() {
    return {
      selectedRouteData: null,
      componentData: {},
      importedComponents: []
    };
  },

  created() {
    this.importComponent();
  },

  methods: {
    async importComponent() {
      const comp = await import(`~/folder/${this.componentData.componentName}.vue`);

      this.importedComponents.push(comp.default);
    }