Link Search Menu Expand Document

Installation

Table of contents


Load with <script> tag

Download and include libraries with <script> elements. Note that you also need to load Vue.js and three.js as dependencies.

Download VueGL

Download and put them, then insert HTML codes like below.

<script src="/path/to/vue.min.js"></script>
<script src="/path/to/three.min.js"></script>
<script src="/path/to/vue-gl.js"></script>

Executing VueGL script exposes VueGL object as a global variable. To register VueGL components as global components, run following script after loading libraries.

Object.keys(VueGL).forEach((name) => Vue.component(name, VueGL[name]));

Load from CDN (Content delivery networks)

You also can load libraries from CDNs. We recommend linking to specific versions for production.

UNPKG

<!-- Loading latest versions from UNPKG -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/vue-gl"></script>

jsDeliver

<!-- Loading latest versions from jsDeliver -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/three"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-gl"></script>

Using npm (Package manager for Node.js)

If you are using module bundlers such as Webpack or rollup.js, npm would be a better option to install libraries.

To install libraries, run following command in your project directory.

npm i vue three vue-gl

Then you can import VueGL components like below.

const { VglRenderer, VglScene } = require('vue-gl');

What is VueGL? Getting started