Vue Tunnel rat

Description

As a developer using TresJS I want to have the ability to Teleport my TresJS Canvas to multiple places in my DOM tree without having to use multiple Canvases.

I use the tunnel rat package that is made for React: https://github.com/pmndrs/tunnel-rat

I use the react three fiber nextjs starter template and they have a great example of how tunnel rat is used: https://github.com/pmndrs/react-three-next

It helps me to easily use a canvas inside different html tags at all kinds of places in my project. By using tunnel-rat I only have to use one main Canvas which is reused for all the places where ThreeJS is used.

Suggested solution

Vue has the provide/Inject and Teleport functions, However I think they come short to get the full functionality of tunnel-rat.

https://github.com/pmndrs/tunnel-rat/blob/main/src/index.tsx https://github.com/pmndrs/tunnel-rat/blob/main/src/utils.ts

I would suggest using pinia for keeping track of all the childs that went into the "In" component so they can be rendered properly in the "Out" component

Some sort of suggestion that gives an idea of the implementation:

`// store.js import { defineStore } from 'pinia'

export const useStore = defineStore({ id: 'main', state: () => ({ current: [], version: 0, }), actions: { incrementVersion() { this.version++ }, addChild(child) { this.current.push(child) }, removeChild(child) { this.current = this.current.filter((c) => c !== child) }, }, })

// In.vue

// Out.vue

Alternative

No response

Additional context

No response

Validations

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.