Render 3D Graphics In Vue.js App – vue-gl


The vue-gl provides a set of components to render 3D graphics using three.js library.

Basic Usage:

Import the necessary libraries into the document.

<script src=""></script>
<script src=""></script>
<script src=""></script>

Define objects.

<vgl-renderer id="vgl-canvas" style="width: 300px; height: 150px;">
    <vgl-perspective-camera orbit-position="200 1 1"></vgl-perspective-camera>

Register components and start vue.

Object.keys(VueGL).forEach(name => {
  Vue.component(name, VueGL[name]);
new Vue({
  el: "#vgl-canvas"




v0.23.1 (03/06/2021)

  • fix: removes SphericalRefrectionMapping constant

v0.23.0 (03/02/2021)

  • Update Three.js version to 0.126.0
  • Tag name of components
  • Update example codes
  • Updates caniuse-lite

v0.22.1 (08/29/2020)

  • Fixes an error on beforeDestroy hook when the material prop is not defined

Download Details:

Author: vue-gl

Live Demo:

Download Link:

Official Website:

Install & Download:

# Yarn
$ yarn add vue-gl

$ npm install vue-gl --save

You Might Be Interested In:

Add Comment