Why my vue3 could not work with vue-class-component

Question

<script>
 import * as Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
  //my operation
}

</script>

It's a simple example for vue-class-component. However, when I run my project, the browser shows the following error:

Uncaught TypeError: Class extends value #<Object> is not a constructor or null
at eval (HelloWorld.vue?e90b:39:1)
at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:19:1)
at __webpack_require__ (app.js:315:33)
at fn (app.js:570:21)
at eval (HelloWorld.vue?vue&type=script&lang=js:5:213)
at Module../src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:162:1)
at __webpack_require__ (app.js:315:33)
at fn (app.js:570:21)
at eval (HelloWorld.vue:3:97)
at Module../src/components/HelloWorld.vue (app.js:140:1)

Why does this happen? and the cmd also shows such a warning:

in ./node_modules/vue-class-component/dist/vue-class-component.esm.js
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defineSSRCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)

I'm confused that is any problem with my version about vue-class-component ? What should I do… ?

Kotana Sai · Accepted Answer · 2022-03-25 02:44:17Z

7

Component doesn't support in Vue3. So instead of Component you can use Options and if there is any Component you can define them in Options. I also faced same issue so I tried importing Vue from vue-class-component because here Vue is declared as Vue Constructor and export that.

<script>

import {Vue,Options} from 'vue-class-component'
@Options({
    components: {}
})
export default class HelloWorld extends Vue {
  //my operation
}

</script>

answered Mar 25, 2022 at 2:44

Kotana Sai

1,9143 gold badges17 silver badges32 bronze badges

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

Comments

Gass · Accepted Answer · 2023-03-17 14:01:12Z

3

vue-class-component library is currently only available for Vuejs 2. There is an alternative for Vuejs 3 which is called vue-facing-decorator you can find the github page here and the documentation here.

answered Mar 17, 2023 at 14:01

Gass

9,6405 gold badges47 silver badges53 bronze badges

2 Comments

rdhelms Over a year ago

vue-facing-decorator has worked well for us in migrating our class components to Vue 3! In their deprecation notices, vue-class-component and vue-property-decorator both suggest vue-facing-decorator.

rdhelms Over a year ago

medium.com/@robert.helms1/…

Collectives™ on Stack Overflow

Why my vue3 could not work with vue-class-component

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related