How do I reuse the same instance of a component in Nuxt.js

Question

I built a single-page app in Nuxt.js 2 and Vue2. This has a very heavy WebGL visualizer that displays a 3D scene in two separate pages: SectionDesign and SectionConfirm

<template>
    <SectionDesign v-if="currentPage === 1"></SectionDesign>
    <SectionPurchase v-if="currentPage === 2"></SectionPurchase>
    <SectionConfirm v-if="currentPage === 3"></SectionConfirm>
</template>

My problem is that when I navigate from page 1 to page 2, my <canvas> gets destroyed, I lose WebGL context, and all the loaded assets disappear. I have to re-initialize everything when I enter page 3. This is very resource-intensive and unoptimized. I'd like to create my <canvas> only once, then "move it" from one section to the next.

I can do this with vanilla Javascript by appending a child to a new parent.

const canvas = document.getElementByID("myCanvas");
page1.appendChild(canvas);

function enterPage3() {
    page3.appendChild(canvas);
}

This re-uses the same instance of the canvas, it just moves it to a new parent. Is there a way to achieve this with Vue2 and Nuxt.js?

Vanilla JS will still need to wire that to the DOM, so it's quite as resource intensive too. You could put it into a wrapper, like a layout or a page on top of the others, should be enough. Otherwise, you can always try to see if portal-vue is relevant in your case (this is basically this Teleport documentation page from Vue3). — kissu
– kissu, Commented Apr 21, 2022 at 1:28
Otherwise, you can also use either a dynamic component or even just a simple v-show. Depends on what you do prefer here. — kissu
– kissu, Commented Apr 21, 2022 at 1:29

Ilijanovic · Accepted Answer · 2022-04-22 08:49:49Z

1

Nuxt has build in components like KeepAlive that does not destroy your component / element

caches the inactive component instances without destroying them

Just wrap it

<KeepAlive>
   <component />
</KeepAlive>

answered Apr 22, 2022 at 8:49

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

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

1 Comment

M - Over a year ago

Thanks, but how would I append this <component> as a child of the first <section> and then move that same instance to the third <section>?

thebyteland · Accepted Answer · 2022-04-22 08:44:47Z

0

If you are not using layouts, create one as default.vue into /layouts dir.

Then use your WebGL viewer in the layout:

<template>
  <div>
    <!-- YourViewer component keeps visible in all pages using this layout -->
    <YourViewer />
    <!-- Every page is loaded inside nuxt tag -->
    <nuxt />
  </div>
</template>

answered Apr 22, 2022 at 8:44

thebyteland

3861 gold badge3 silver badges11 bronze badges

3 Comments

M - Over a year ago

Thanks, but I need the component to be a child of each section. What you're suggesting would simply place it higher up in the DOM hierarchy.

thebyteland Over a year ago

I do not know about your templates or sections but you can define a template into the layout that allows to place your viewer where you want. If this solution is not valid for your case, you can use the keep-alive attr in the <nuxt> component. Then you can define how many components must be destroyed every route change: nuxtjs.org/docs/features/nuxt-components#keep-alive

kissu Over a year ago

@Marquizzo as commented here.

Collectives™ on Stack Overflow

How do I reuse the same instance of a component in Nuxt.js

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related