Chapter 1.0: A-Frame Setup

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 Vue.use.

// 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 a-.

// 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 ItemCard2D component.

You can view the sandbox for this section here.