Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

martinbean's avatar

Not assignable errors with Vue 3, Typescript, Composition API

I’ve built some components using Vue 3, TypeScript, and the Composition API, but I keep getting errors when trying to build in production. This is one of the errors:

ERROR in <root>/resources/ts/components/CancelSubscriptionButton.vue.ts
21:32-41
[tsl] ERROR in <root>/resources/ts/components/CancelSubscriptionButton.vue.ts(21,33)
      TS2345: Argument of type '{ new (): { $props: VNodeProps & TeleportProps; }; __isTeleport: true; }' is not assignable to parameter of type 'VNodeTypes | ClassComponent'.
  Type '{ new (): { $props: VNodeProps & TeleportProps; }; __isTeleport: true; }' is not assignable to type 'ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions>'.
    Types of property '__isTeleport' are incompatible.
      Type 'true' is not assignable to type 'undefined'.

This is the component:

<template>
    <button class="btn btn-outline-danger btn-sm" type="button" v-bind="$attrs" v-on:click="cancelSubscription">
        <slot>
            <span lang="en">Cancel</span>
        </slot>
        <teleport to="#modals">
            <cancel-subscription-modal
                v-bind:show="showModal"
                v-bind:url="url"
                v-on:cancelled="onCancelled"
                v-on:hide="showModal = false"
            />
        </teleport>
    </button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import CancelSubscriptionModal from './CancelSubscriptionModal.vue';

export default defineComponent({
    components: {
        CancelSubscriptionModal,
    },
    inheritAttrs: false,
    props: {
        url: {
            required: true,
            type: String,
        },
    },
    setup() {
        const showModal = ref(false);

        const cancelSubscription = () => {
            showModal.value = true;
        };

        const onCancelled = () => {
            window.location.reload();
        };

        return {
            cancelSubscription,
            onCancelled,
            showModal,
        };
    },
});
</script>

I don’t really know what it’s complaining about. Something to do with the teleport, but it’s as per the example in the docs.

Has any one encountered similar errors using Vue 3 and TypeScript?

0 likes
2 replies
MohamedTammam's avatar

I see the same issue here and there's a workaround it (didn't try it myself)

BTW, If you are going to ask how's going to answer? :)

Please or to participate in this conversation.