Skip to content
A ready-to-go 3d environment for Vue.js using Babylon.js
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs chore(site): add CNAME Mar 4, 2019
examples docs(texture): add example Mar 4, 2019
site docs(texture): add example Mar 4, 2019
src docs(about): move site files out of src/about Mar 1, 2019
.eslintrc.js refactor(package): use rollup for dist and lib May 2, 2018
.gitignore build(rollup): fix umd build with physics globals and defaults Jun 12, 2018 docs(CHANGELOG): update changelog Sep 24, 2018 docs(contributing): switch from yarn to npm Feb 23, 2019
LICENSE docs(README): simplify example Mar 3, 2019
build.config.js build(rollup): simplify vendor resources Jun 14, 2018
package.json feat(Observable): observable events emitted by entity and scene compo… Sep 24, 2018
properties.js refactor(site): move to single file component structure Sep 14, 2018
rollup.config.js feat(Observable): observable events emitted by entity and scene compo… Sep 24, 2018

Animated 3D Vue Logo


Create high quality 3D graphics in the web as easily as writing HTML and CSS.

Quickly make a 3D animation:

3D Animation

It's this easy:

    <HemisphericLight diffuse="#0000FF"></HemisphericLight>
    <Entity :position="[0, 0, 5]">
      <Animation property="rotation.x" :duration="5" :end="Math.PI * 2"></Animation>
      <Animation property="rotation.y" :duration="5" :end="Math.PI * 2"></Animation>
      <Animation property="rotation.z" :duration="5" :end="Math.PI * 2"></Animation>
      <PointLight diffuse="#FF0000"></PointLight>
      <template v-for="x in [0, 4, -4]">
        <template v-for="y in [0, 4, -4]">
          <Box v-for="z in [0, 4, -4]" :position="[x, y, z]" :key="`${x},${y},${z}`"></Box>

It's even easier if you use Pug (Jade) for templating:

<template lang="pug">
    Entity(:position="[0, 0, 5]")
      Animation(property="rotation.x" :duration="5" :end="Math.PI * 2")
      Animation(property="rotation.y" :duration="5" :end="Math.PI * 2")
      Animation(property="rotation.z" :duration="5" :end="Math.PI * 2")
      template(v-for="x in [0, 4, -4]")
        template(v-for="y in [0, 4, -4]")
          Box(v-for="z in [0, 4, -4]" :position="[x, y, z]" :key="`${x},${y},${z}`")

Getting Started, Installation, and API Documentation

See the documentation website


Subscribe to the mailing list issue to keep up with important updates


Vue-BabylonJS is a 3D graphics component plugin for Vue.js powered by BabylonJS. Vue-BabylonJS draws inspiration from A-Frame, but can be more performant with the exclusion of DOM manipulation and has closer ties to JavaScript through property binding syntax in Vue. Compared to ReactVR which uses A-Frame, Vue-BabylonJS has the potential for higher performance, more organized and decoupled components, and a higher-quality rendering engine.

See the discussion on the HTML 5 Game Dev Forums


We use BabylonJS because it is the most efficient, most feature-rich, and most modern WebGL graphics library available. The addition of Vue makes the engine reactive and development becomes easier to reason about and organize. Out-of-the-box mobile support and sensible defaults make getting started a breeze.

The underlying engine is easily accessible to give pros the tools to tweak every aspect of BabylonJS. The organizational structure of the library is a Component-Entity-System and the Entity component contains many powerful features such a matrix transformation to allow for interaction with the Scene graph like a group of HTML divs. Powerful tools are available such as an integrated reactive property system that enables modifying 3D objects within templates and a Shader component that makes adding WebGL shaders easy.



You can’t perform that action at this time.