Loading .vue Component from Server

[Sazzels]

Hi @huang-julien,

i have been looking for a solution to load and display components during runtime for weeks.
nuxt-runtime-compiler gives me hope that I can finally solve this problem.

In advance, thanks for your efforts and the package 👍

Currently, i got it working with a defineComponent from a Component Object, which i could retrieve vom an API.
It's currently isolated in a NuxtPlugin for better understanding on my part.

CURRENT
pages/index.vue

<template>
  <div id="wrapper" class="text-center">
    <component is="ExternalTestWidget" text="Hello World!" />
  </div>
</template>

plugins/plugin.js

import { defineComponent } from "vue";

export default defineNuxtPlugin((nuxtApp) => {
  // should be retrieved from API somehow.
  const myComponent = {
    name: "TestWidget",
    template: `
    <div class='text-center'>
        <p>{{ text }}</p>
        <v-btn @click="sendAlert()">Click</v-btn>
        <v-btn @click="counter++">Counter: {{ counter }}</v-btn>
    </div>
    `,
    data() {
      return { counter: ref(1) };
    },
    props: {
      text: { type: String, default: "undefined" },
    },
    methods: {
      sendAlert() {
        alert("Hello World!");
      },
    },
  };

  nuxtApp.vueApp.component(
    "External" + `${myComponent.name}`,
    defineComponent(myComponent)
  );
});

---

GOAL
I would like to load components from a backend as .vue files or in similar approach.

i tried to fetch and useFetch but all my implementations resulted in vue Component is missing template or render function.

AsyncComponent.vue

<template>
  <div>
    <p>{{ text }}</p>
  </div>
</template>

<script setup>
const text = "Hello World!";
</script>

I would like to load this AsyncComponent.vue from a Server and then add it through defineComponent/defineAsyncComponent

sample

const AsyncComp = defineAsyncComponent({
  loader: () => /* use component here */

  loadingComponent: LoadingComponent,
  delay: 200,

  errorComponent: ErrorComponent,
  timeout: 3000
})

with Object // working example

const AsyncComp = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: `<div @click="sendAlert()">{{ text }}</div>`,
        data() {
          return { text: "Hello World!" };
        },
        methods: {
          sendAlert() {
            alert("Hello! I am an alert box!!");
          }
        }
      });
    })
);

For help on the solution I would be extremely grateful.
If it's not clear what I'm trying to accomplish overall, I'd be happy to explain more about the project.

[huang-julien]

Hi 👋 thanks for your kind words 🙂 .
As stated in the playground, importing or defining a full component definition from an API is highly not recommanded since we must use new Function to eval the code.
I don't think that importing as a module from remote sources is possible 🤔 you would need to eval the code when receiving it.
For your information there's a future feature that might suit your needs instead of this module which is server component rendering from external sources (see nuxt/nuxt#12343).
For now i would suggest you (if i understood well) to use a wrapper component with a dynamic template. What do you think ?

[Sazzels]

Hi 🙋‍♂️
i think a wrapper will not provide the complexity i'm trying to implement.

I want to build the nuxt app npm run build and let users add components (functionality) on runtime without additional npm run build execusions. Like a plugin system where they can upload new components. I tought this could be possible when components could be created on runtime by getting them from a backend but the more i investigate this, the more i think i need a build step in between.

How would you approach something like that?

Further, i need components to be available in this syntax <component is="componentName" [props] /> because the to be displayed components on a page are retrieved from API. Think of a customizable Dashboard for each user.

my current ideas

• creating a plugin/<name>/index.js which registers new components through nuxtApp.vueApp.component()

this could have side effects because plugins are afaik called on every request

• adding a global-external directory to nuxt.config.ts and backend places external components there -> rebuild https://nuxt.com/docs/guide/directory-structure/components#dynamic-components
• using npm (the backend performs a npm install xy and edits the nuxt.config.ts to add the module to the modules section https://nuxt.com/docs/guide/directory-structure/components#library-authors -> rebuild

TL:DR 😅: i would like to have a nuxt application which differs from user to user through a plugin like method.
examples

• User A: needs a component for RSS feeds, shows him latest news
• User B: needs a component that displays the current value for bananas 🍌 in France.

User A doesn't need the components User B uses. Like a marketplace for funktionality created by themself or by others.

Edit: this #12343 sounds a lot like what i'm looking. having a somewhat components distribution system.

[huang-julien]

Yeah registering components globally thorugh plugins would have a big impact on your application.

• rebuilding each might be better since you'll be able to at least control what has been generated after build (and before deploymeent)

But i think you should wait for the server components from external sources to be available 🤔.

About <component is="componentName" [props] /> that's technically possible but you still need to register your components globally (otherwise resolveComponent() is required)

[Sazzels]

i'm gonna wait for the server components a bit more.
Currently trying to implement a workaround for now, need to progress in this project a bit further.