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 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');