Nuxt•7mo ago

import/load vue-component in nuxt app at runtime

Hi, I have a "dynamic-component" which I want to load at runtime like so:

<template>
  <div v-if="componentReady">
    <component :is="dyncomponent" />       
  </div>
</template>

<script setup lang="ts">
const dyncomponent = shallowRef(null as null | any);
const componentReady = ref(false);

onMounted(async () => {
  try {
    const component = await import('http://localhost:8090/dynComponent.es.js')
    component.install(useNuxtApp().vueApp);
    dyncomponent.value = component.DynComponent;
  } catch (error) {
    console.error(error)
    dyncomponent.value = null
  } finally {
    componentReady.value = true
  }
})

<template>
  <div v-if="componentReady">
    <component :is="dyncomponent" />       
  </div>
</template>

<script setup lang="ts">
const dyncomponent = shallowRef(null as null | any);
const componentReady = ref(false);

onMounted(async () => {
  try {
    const component = await import('http://localhost:8090/dynComponent.es.js')
    component.install(useNuxtApp().vueApp);
    dyncomponent.value = component.DynComponent;
  } catch (error) {
    console.error(error)
    dyncomponent.value = null
  } finally {
    componentReady.value = true
  }
})

This "dynamic component" is a vue3-component and in the build-rollupOptions I specified vue as "external":

rollupOptions: {
    external: ['vue'],
    output: {
      globals: {
          vue: 'Vue',

      }
    }
  }

rollupOptions: {
    external: ['vue'],
    output: {
      globals: {
          vue: 'Vue',

      }
    }
  }

However, when loading the page the import of vue within dynComponent.es.js could not be resolved: TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../". How to solve this problem while still using vue as an external dependency within the dynComponent? Thank you 🙂

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

import/load vue-component in nuxt app at runtime