What are some ways to use aframe with Vue?

user_1496237 0
Viewed 1717

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.

aframe vue-cli vue.js
2 Answers

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

user_24257870
  • For development it is fine to import the CDN into your index.html
  • For production it is recommended to require it into your Main.js

Vue 2

To get rid of the warnings i recommend adding a array of components using Vue.config.ignoredElements placed in the main.js Like so:

Vue.config.ignoredElements = [
  'a-scene',
  'a-camera',
  'a-box'
  'a-image',
]

For a full list of components check out this Repo: aframe-components-list

I recommend using the Vue.config.ignoredElements instead of registering your A-Frame components like normal Vue component, since they are not Vue components.

Edit - Vue 3:

In Vue 3 Vue.config.ignoredElements in main.js will not work.

Instead, in your vue.config.js file add the code below:

// vue.config.js
module.exports = {
    chainWebpack: config => {
      config.module
        .rule('vue')
        .use('vue-loader')
        .tap(options => {
          options.compilerOptions = {
            ...options.compilerOptions,
            isCustomElement: tag => tag.startsWith('a-')
          }
          return options
        })
    }
  }

This should cover custom elements that start with 'a-'.

user_130607500
Related