CODEWITHSUNDEEP
vuejs3extendselement-uielement-plus
Anderson Min
Anderson Min

Reputation: 139

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

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');

enter image description here

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

Upvotes: 4

Views: 8462

Answers (2)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37763

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 ....

Upvotes: 2

Anderson Min
Anderson Min

Reputation: 139

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');
      });
    });
  },
}

Upvotes: 1

Related Questions