VueAframe

A Vue wrapper for A-Frame.

Works for Vue 2 & 3.

demo

Try it out!

dependencies

• VueDemi

setup

npm

npm i vue-aframe

import VueAframe, {
	processAttrs,
	resolveProps,
	stringifyProp,
	whenReady,
  animate,
  isKnownTag,
  isNode,
  Node,
  Transition,
  TransitionGroup,
} from 'vue-aframe';

browser

<!-- if using Vue 2 -->
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/@vue/composition-api"></script>

<!-- if using Vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

<script src="https://unpkg.com/aframe"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/vue-aframe"></script>

The plugin is globally available as VueAframe. If Vue is detected, the plugin is installed automatically.

usage

Install the plugin. It registers all components globally.

import Vue from 'vue';
import VueAframe from 'vue-aframe';

Vue.use(VueAframe);

or

Register the selected components locally.

import {
  Node,
  Transition,
  TransitionGroup,
} from 'vue-aframe';

export default {
  components: {
    AframeNode: Node,
    AframeTransition: Transition,
    AframeTransitionGroup: TransitionGroup,
  },
  // ...
};