diff --git a/package.json b/package.json
index ec3aafc..c59241f 100644
--- a/package.json
+++ b/package.json
@@ -8,12 +8,14 @@
   },
   "dependencies": {
     "gsap": "^3.5.1",
-    "three": "^0.122"
+    "three": "^0.125",
+    "vue": "^3.0.5"
   },
   "devDependencies": {
     "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-replace": "^2.3.3",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vitejs/plugin-vue": "^1.1.4",
+    "@vue/compiler-sfc": "^3.0.5",
     "eslint": "^7.7.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-config-standard": "^14.1.1",
@@ -24,8 +26,7 @@
     "eslint-plugin-vue": "^6.2.2",
     "rollup-plugin-vue": "^6.0.0-beta.10",
     "sass": "^1.26.10",
-    "vite": "^1.0.0-rc.9",
-    "vue": "^3.0.2"
+    "vite": "^2.0.0-beta.65"
   },
   "main": "build/trois.js",
   "module": "build/trois.module.js",
diff --git a/src/components/demos/Slider1.vue b/src/components/demos/Slider1.vue
index 2e0db49..5ab71f5 100644
--- a/src/components/demos/Slider1.vue
+++ b/src/components/demos/Slider1.vue
@@ -1,12 +1,12 @@
 <template>
-  <Slider1 :images="images" />
+  <Slider :images="images" />
 </template>
 
 <script>
-import Slider1 from '../sliders/Slider1.vue';
+import Slider from '../sliders/Slider1.vue';
 
 export default {
-  components: { Slider1 },
+  components: { Slider },
   data() {
     return {
       images: [
diff --git a/src/components/demos/Slider2.vue b/src/components/demos/Slider2.vue
index 7445f8e..ed00508 100644
--- a/src/components/demos/Slider2.vue
+++ b/src/components/demos/Slider2.vue
@@ -1,12 +1,12 @@
 <template>
-  <Slider2 :images="images" />
+  <Slider :images="images" />
 </template>
 
 <script>
-import Slider2 from '../sliders/Slider2.vue';
+import Slider from '../sliders/Slider2.vue';
 
 export default {
-  components: { Slider2 },
+  components: { Slider },
   data() {
     return {
       images: [
diff --git a/src/components/sliders/AnimatedPlane.js b/src/components/sliders/AnimatedPlane.js
index 999f17e..df8c09c 100644
--- a/src/components/sliders/AnimatedPlane.js
+++ b/src/components/sliders/AnimatedPlane.js
@@ -1,9 +1,7 @@
-
 import {
   BufferGeometry,
   DoubleSide,
   Face3,
-  Geometry,
   InstancedBufferAttribute,
   InstancedMesh,
   MathUtils,
@@ -13,6 +11,8 @@ import {
   Vector3,
 } from 'three';
 
+import { Geometry } from 'three/examples/jsm/deprecated/Geometry.js';
+
 export default class AnimatedPlane {
   constructor(params) {
     Object.entries(params).forEach(([key, value]) => {
@@ -144,7 +144,7 @@ export default class AnimatedPlane {
     this.dy = this.wSize / 2;
     geometry.translate(-this.dx, -this.dy, 0);
 
-    this.bGeometry = new BufferGeometry().fromGeometry(geometry);
+    this.bGeometry = geometry.toBufferGeometry();
   }
 
   initAnimAttributes() {
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..fcc5ff7
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,5 @@
+import vue from '@vitejs/plugin-vue';
+
+export default {
+  plugins: [vue()]
+};