Vue 3 extends vue.js components from third party library in defineComponent

Question

I want to use third party library element-plus in my component. In setup defineComponent entends that component. In console, it would warn Failed to resolve component: el-radio at <App>

In about router, Here is the about.vue

<template>
  <div id="popup-content"></div>
</template>

<script>
import {
  onMounted, createApp, defineComponent, nextTick,
} from 'vue';
import Test from '@/components/Test.vue';

export default {
  setup() {
    onMounted(() => {
      const myNewComponent = defineComponent({
        extends: Test,
      });
      createApp(myNewComponent).mount('#popup-content');
      nextTick(() => {
        createApp(myNewComponent).mount('#popup-content');
      });
    });
  },
}

Test component has used element-plus el-raido component, Test.vue

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

<script>
export default {
  data() {
    return {
      radio: '1',
    };
  },
};
</script>

I have add element-plus, and register all in main.js

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App);


app.use(ElementPlus);
app.mount('#app');

I have found this question Extend vue.js component from third-party library

tony19 · Accepted Answer · 2022-09-06 19:12:43Z

2

I really really don't understand what are you trying to achieve by extending your perfectly fine Test component BUT...

Vue 3 is very different from Vue 2 - a lot of global API's (as component registration for example) are not global anymore but are tight to a "app instance" (created by createApp)

So even if you register Element components in main.js (app.use(ElementPlus);), the another app instance (why!?) created in onMounted hook of about.vue component knows nothing about the components! That is the reason for an error...

You must register components in every app instance created by createApp you want to use them in ....

edited Sep 6, 2022 at 19:12

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 20, 2021 at 18:54

Michal Levý

38.6k8 gold badges82 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anderson Min · Accepted Answer · 2021-03-21 01:23:30Z

1

As @Michal Levý answered, I need to register components in every app instance created by createApp.

Here is the working version about.vue, in case someone need.

<template>
  <div id="popup-content"></div>
</template>

<script>
import {
  onMounted, createApp, defineComponent, nextTick,
} from 'vue';
import Test from '@/components/Test.vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

export default {
  setup() {
    onMounted(() => {
      const myNewComponent = defineComponent({
        extends: Test,
      });
      const app1 = createApp(myNewComponent);

      nextTick(() => {
        app1.use(ElementPlus);
        app1.mount('#popup-content');
      });
    });
  },
}

answered Mar 21, 2021 at 1:23

Anderson Min

1493 silver badges13 bronze badges

1 Comment

nronnei Over a year ago

No snark intended here—what was your goal with this example? It looks like a simplified example case. What was the real world use cases you created it to mirror?

Collectives™ on Stack Overflow

Vue 3 extends vue.js components from third party library in defineComponent

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related