Aframe: Initializing aframe manually on single page sites

[thelucre]

My single page site, running on Vue.js, has a template with aframe components. The scene doesn't seem to build properly after the Vue component is initialized. Is there a way to trigger the aframe init at runtime, so the Vue component can control when the scene should load?

[cvan]

@thelucre do you have an example scene/site somewhere we can take a look at?

[cvan]

@ngokevin @dmarcos is this possible now in dev?

[ngokevin]

For now as a workaround, you can add <a-node> to your scene, and then when you are ready, call document.querySelector('a-node').load(). This should work because the scene blocks on all nodes loading before rendering.

[cvan]

heh, that's a beautiful hack. we ought to properly support this, but I like that.

[TylerFisher]

bump. Is this still the preferred method for initializing aframe later in the stack? And will this defer the loading of assets?

[ngokevin]

It's fine enough, or inject the A-Frame scene into your app when you're ready. I know there are several projects using Vue.js without much issue.

[okwme]

i've been using v-if on the a-scene to render only when other data is ready

[RudnikNelson]

This hack work-around does not work when using custom a-marker patterns using AR.js.