# How to use BabylonJS with Vue - all the links from this tutorial in one place

> How to integrate BabylonJS into a Vue application.

Source: https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_0

## This tutorial

[Part 1: How to use BabylonJS with Vue](https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_1 "How to use BabylonJS with Vue")

[Part 2: How to pass data between BabylonJS and Vue"](https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2/ "How to pass data between BabylonJS and Vue")

[Part 3: BabylonJS and Vue - async scene methods](https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_3/ "BabylonJS and Vue - async scene methods")

[Part 4: BabylonJS and Vue - messages driven scene](https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_4/ "BabylonJS and Vue - messages driven scene")

You can find a quick prototype of the mentioned solution running here: https://babylonjs.nascor.tech/scene-director/

And the source repository can be found at: https://github.com/RolandCsibrei/babylonjs-vue-messages-driven-scene

## A real app using TypeScript, Vue 2 with the Composition API, and a mobile-friendly Quasar-based GUI

https://github.com/RolandCsibrei/babylonjs-real-sun-moon

## BabylonJS official documentation

[Getting started with BabylonJS](https://doc.babylonjs.com/features/introductionToFeatures "Getting started")

[The BabylonJS GUI](https://doc.babylonjs.com/features/featuresDeepDive/gui/gui "BabylonJS GUI")

[The BabylonJS Inspector not just for debugging](https://doc.babylonjs.com/toolsAndResources/inspectorv2 "BabylonJS Inspector")

[Installing BabylonJS - ES6 tutorial](https://doc.babylonjs.com/setup/frameworkPackages/es6Support "Installing BabylonJS - ES6 tutorial")

## Additional reading

[Understanding reflow and repaint in the browser](https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg "Understanding reflow and repaint in the browser")

[CSS Triggers](https://csstriggers.com/ "CSS Trigger")

[Passing of variables by Value and by Reference in Javascript](https://www.geeksforgeeks.org/pass-by-value-and-pass-by-reference-in-javascript/ "Passing of variables by Value and by Reference in Javascript")

## Vue 2 related

[Official Vue 2 installation page](https://v2.vuejs.org/v2/guide/installation "The offical Vue 2 installation page")

[Official Vue 2 Components Basic page](https://v2.vuejs.org/v2/guide/components "Vue 2 Components Basics")

## Vue 3 related

[Official Vue 3 installation page](https://vuejs.org/guide/quick-start.html "The offical Vue 3 installation page")

[Official Vue 3 Components Basic page](https://vuejs.org/guide/essentials/component-basics.html "Vue 3 Components Basic")

## GitHub

## Vue 2 related

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/branches/all

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/tree/fps-by-callback

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/tree/fps-by-exposed-engine

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/tree/vue-to-bjs-no-expose

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/tree/vue-to-bjs-exposed-vector3

https://github.com/RolandCsibrei/babylonjs-vue2-javascript-basic-setup/tree/vue-to-bjs-exposed-engine

## Vue 3 related

https://github.com/RolandCsibrei/babylonjs-vue3-javascript-basic-setup

https://github.com/RolandCsibrei/babylonjs-vue3-javascript

## TypeScript, Vue 2, Composition API, Quasar

https://github.com/RolandCsibrei/babylonjs-quasar-vue2-composition-api-typescript