Nuxt•8mo ago

onUnmounted not being called in component

I have code porting from Vue 3 to Nuxt 3, in Vue 3 I called onUnmounted without fail. The same component, now in Nuxt 3, seems to not be calling onUnmounted nor is it calling onBeforeUnmount. onMounted is working as expected.

8 Replies

LijahOP•8mo ago

For reference, I am using ChartJS and need to destroy old references of charts during an unMount of my chart component.

<script setup>
import Chart from "chart.js/auto";

const props = defineProps({
    config: {
        type: Object,
        required: true,
    },
});

const canvas = ref(null);
let chart = shallowRef(null);

onMounted(() => {
    const context = canvas.value.getContext("2d");
    chart.value = new Chart(context, props.config);
});

onUnmounted(() => {
    chart.value?.destroy();
});

const emit = defineEmits(["dblClick",]);

defineExpose({
    canvas,
    chart,
});
</script>

<template>
    <canvas id="canvas" ref="canvas" @dblclick="emit(`dblClick`)" width="100%" height="100%" />
</template>

<script setup>
import Chart from "chart.js/auto";

const props = defineProps({
    config: {
        type: Object,
        required: true,
    },
});

const canvas = ref(null);
let chart = shallowRef(null);

onMounted(() => {
    const context = canvas.value.getContext("2d");
    chart.value = new Chart(context, props.config);
});

onUnmounted(() => {
    chart.value?.destroy();
});

const emit = defineEmits(["dblClick",]);

defineExpose({
    canvas,
    chart,
});
</script>

<template>
    <canvas id="canvas" ref="canvas" @dblclick="emit(`dblClick`)" width="100%" height="100%" />
</template>

In this case, destroy is never really being called after switching off pages with this chart component

manniL•8mo ago

unBeforeUnmount should do the trick

LijahOP•8mo ago

It doesn't get called. Elsewhere in other components it does, but not for this particular component. @manniL / TheAlexLichter I could likely try and globally clear these ChartJs objects but I'm still not sure as to why OnUnmounted and OnBeforeUnmount don't get called. The page this component lives on is not SSR. Is there a nuxt-specific lifecycle hook I can use? If it matters, here is how the component is referenced

<BaseChart ref="baseChart" :config="props.config" @dblClick="resetZoom()" />

<BaseChart ref="baseChart" :config="props.config" @dblClick="resetZoom()" />

I wouldn't think that having it ref'd would mess with lifecycles @manniL / TheAlexLichter Update it appears to be a bug I've run into before with Components not unmounting when they are children within a Teleport component. If I move the component outside of my Teleport, it unmounts as expected

manniL•8mo ago

Interesting! Also in plain Vue?

LijahOP•8mo ago

https://github.com/vuejs/core/issues/6347

GitHub

The onUnmounted callback is not triggered when using Teleport · Iss...

Vue version 3.2.37 Link to minimal reproduction https://sfc.vuejs.org/#__DEV__eNq1VE1v2kAQ/StbqxJGiu1CDq0ciJLmXKlS6c2HLPZgtvF+aHdMipD/e2dt4xgioqZSfWHn872ZfewhuDcm3tUQpMECQZqKI9xmKsNFIXZ0YPSNjmSsa0S...

LijahOP•8mo ago

I had mistakenly gone back a few versions in Vue for my Nuxt app to a version before this was fixed 3.3.6/3.3.7. Somehow unmounting child components was broken with Teleport and there were hydration mismatches with disabled teleports

manniL•8mo ago

Ahh! So all good with the latest Vue version?

LijahOP•8mo ago

Yes!

Gaming

Programming

onUnmounted not being called in component