vuejs / vue-class-component

ES / TypeScript decorator for class-style Vue components.
MIT License
5.81k stars 429 forks source link

How to import a component using vue-class-component into one that is not? #525

Closed glyl closed 3 years ago

glyl commented 3 years ago

Hello,

Does anyone know how to import a Vue component that uses @Component into another component that uses the vanilla module.exports?

Any hints on how to import the other way -- vanilla components into one using @Component -- would be also appreciated.

I.e. with the two example components below, I'd like to know:

Component A:using vue-class-component

<template>
        <p>Component A</p>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class ComponentA extends Vue { ... }
</script>

Component B: not using vue-class-component

<template>
        <p>Component B</p>
</template>

<script>
    module.exports = {
        name: 'componentB'
    };
</script>
glyl commented 3 years ago

I figured it out!

In Component B, module.exports = { ... } needs to be changed to export default { ... }.

When importing Component B into Component A, use import ComponentB from '{path_to_component}'. The same goes for importing Component A into Component B.