Lijah Comments - Answer Overflow

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

13 replies

NNuxt

•Created by Lijah on 4/16/2024 in #❓・help

onUnmounted not being called in component

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

13 replies

NNuxt

•Created by Lijah on 4/16/2024 in #❓・help

onUnmounted not being called in component

@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

13 replies

NNuxt

•Created by Lijah on 4/16/2024 in #❓・help

onUnmounted not being called in component

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

13 replies

NNuxt

•Created by Lijah on 4/16/2024 in #❓・help

onUnmounted not being called in 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?

13 replies

NNuxt

•Created by Lijah on 4/16/2024 in #❓・help

onUnmounted not being called in component

It doesn't get called. Elsewhere in other components it does, but not for this particular component.

13 replies

NNuxt

•Created by Lijah on 4/16/2024 in #❓・help

onUnmounted not being called in component

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

13 replies

NNuxt

•Created by Lijah on 4/16/2024 in #❓・help

onUnmounted not being called in component

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>

13 replies

NNuxt

•Created by Lijah on 4/1/2024 in #❓・help

Routing to another page leads to null parent node error

Shoot. It seems like downgrading to Vue 3.3.4, which is the version that works on my other project, does not work

6 replies

NNuxt

•Created by Lijah on 4/1/2024 in #❓・help

Routing to another page leads to null parent node error

Good call, I'm going to try and downgrade things @sykes10 It's odd because all the posts I see online says this is either fixed or are caused by all sorts of random things, none of which are easy to discover by debugging

6 replies

NNuxt

•Created by Lijah on 4/1/2024 in #❓・help

Routing to another page leads to null parent node error

If I manually have the router log all of its routes, everything seems to have mapped correctly as well

6 replies

Gaming

Programming