What are some ways to use aframe with Vue? - vue.js

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

Answer 2

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-'.