vue.jsaframevue-cli

What are some ways to use aframe with Vue?


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.


Solution

  • 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