Tobi0610
Tobi0610
PostsComments
NNuxt
Created by Tobi0610 on 5/21/2024 in #❓・help
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 🙂
1 replies