What are some ways to use aframe with Vue?

Question

I'm using vue-cli. I've tried adding aframe directly in the index.html file, and also importing it in my top level main.js file. I just can't get Vue to recognize aframe elements.

Am I missing some boilerplate in the documentation?

Example warning:

vue.runtime.esm.js:619 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Answer 1

You can add aframe to the dependencies in your package.json:

"browserify-css": "*", // required by aframe
"envify": "*",         // required by aframe
"aframe": "^1.2.0",    // aframe

add aframe to the compiled bundle:

var Vue = require('vue')
var App = require('./app.vue')
require('aframe')
new Vue({
  el: '#app',
  render: function (createElement) {
    return createElement(App)
  }
})

and use the elements in your <template>:

<template>
  <div>
    <a-scene>
      <a-cylinder color="#FFC65D"></a-cylinder>
    </a-scene>
  </div>
</template>

check it out in this glitch