Configuring Vue to use A-Frame is straightforward. I started by forking the CodeSandbox template mentioned in the Introduction post and added
aframe to the dependencies.
Then I modified the
main.js file to import
aframe and register it with
// main.js ... import aframe from "aframe"; Vue.use(aframe); ...
Then I made a component called
HelloAframe.vue and copied in the basic scene example from the A-Frame documentation. I used the embedded option in the scene and wrapped it in a div so I can control the size of the scene/canvas. If I didn’t do this, the scene would display in the entire viewport.
<template> <div style="height: 400px; width: 600px"> <a-scene embedded> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" ></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" ></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </div> </template>
I imported this component in
App.vue and placed it in the template block just below the description text.
At this point you may notice that the console is not happy. There are a ton of Vue Warn lines along the lines of:
[Vue warn]: Unknown custom element: <a-scene> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
This is because none of the A-Frame custom elements are registered with Vue. Instead of registering them (since they are not in fact Vue components) I decided to tell Vue to ignore them. I did this by adding a call to
ignoredElements and passing a regex patten to ignore any element that begins with
// main.js Vue.config.ignoredElements = [/^a-/];
That’s it for setting up the project for the A-Frame chapter. Next, I’ll start working on a 3D card that can display the same data that you can see on the
You can view the sandbox for this section here.