Getting Started guide for Vue integration as used in Needle.tools site

🌵 Needle Engine
1

I’m well versed in both Unity and Vue but I’m having trouble wrapping my head around putting the two together. My end goal is to produce something similar to the Needle.tools site - is there a guide somewhere for setting up that workflow starting with the default Vite template?

Original Post on Discord

by user 300386587278049291

2

Update: I started over on a fresh project and things are starting to come together. I added the Vue plugin to Vite and moved the tag into App.vue. I’m still not able to get anything from the Needle context like Needle.findObjectOfType(Needle.Camera) but it’s mostly because I’m resisting a full on integration with Unity components.

A big part of my problem is that I’m not well versed in Typescript, so brushing up on my knowledge there is my next step :slightly_smiling_face:

by user 300386587278049291

3

Hello, inside vue in onMounted you can query for the needle-engine element and then await the context being ready (same as in vanilla js

Something like

const el = document.queryElement("needle-engine") as EngineElement
el.getContext().then(ctx => ...)
4

Can send you some of our code there later if you need since we just started working on songs of cultures for the web using vue as well :slightly_smiling_face:

5

Cool, thanks! A couple other random questions regarding your Needle website workflow:

by user 300386587278049291

6
  • Is the scroll listener done within a Unity component, or external js?
  • Assuming your camera path is simply a timeline in Unity that is scrubbed via the scroll/swipe event?

by user 300386587278049291

7
  • Scroll Listener: that’s external, just some js to listen on scroll events on the div and invoking a method on some engine component to set the PlayableDirector time (which we used to animate a camera along a spline). A simple example of that is the scrollytelling scene in our samples
  • Yes :slightly_smiling_face:
8

With that setup you can do a lot of cool stuff that you just sequence via Unity’s timeline

9

Awesome thanks for sharing, will check out that sample. That is what I’m excited about - getting a workflow where all of the DOM stuff is handled through Vue and 3d is Unity timeline

by user 300386587278049291

10

Here is the vue code btw:

onMounted(() => {
    const engine = document.querySelector("needle-engine") as EngineElement;
    engine.getContext().then((ctx) => {
        console.log(ctx);
    })
})
11

Yep works very well so far :slightly_smiling_face:

12

Is there a basic sample or template project from this to try? I don’t know a lot about Vue.js but wanted to get started somewhere

by user 103054507105067008

13

You can just use any vue starter with vite and install our engine package + put the <needle-engine> component in the .vue page that you want it to load in.

14

Thanks for the tip :slightly_smiling_face:

by user 103054507105067008