NuxtN
Nuxtβ€’2y ago
Tobi0610

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
  }
})


This "dynamic component" is a vue3-component and in the build-rollupOptions I specified vue as "external":
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 πŸ™‚
Was this page helpful?