Stage 1 of Migrating to vue 3

jsconfig.json

@@ -1,5 +1,5 @@
 {
   "vueCompilerOptions": {
-    "target": 2.7
+    "target": 3.3
   }
 }

src/components/TsParticles.vue

@@ -30,7 +30,7 @@ export default {
     })
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     particlesContainer.destroy()
     reduceMotionMedia.removeEventListener('change', this.setMotionParticles)
     reduceMotionMedia = null

src/main.js

@@ -1,13 +1,12 @@
-import Vue from "vue"
+import { createApp } from "vue"
 import App from "./App.vue"
+import bootstrap from "./plugins/bootstrap"
+import fontawesome from "./plugins/fontawesome"
+import scrollto from "./plugins/scrollto"
 
-/**
- * Global plugins goes here
- */
-import "./plugins/fontawesome"
-import "./plugins/scrollto"
-import "./plugins/bootstrap"
-
-new Vue({
-  render: (h) => h(App)
-}).$mount("#app")
+//Global Plugins
+const app = createApp(App)
+app.use(bootstrap)
+app.use(fontawesome)
+app.use(scrollto)
+app.mount("#app")

src/plugins/bootstrap.js

@@ -1,24 +1,20 @@
-import Vue from "vue"
 import Tooltip from "bootstrap/js/src/tooltip"
 import "bootstrap/scss/bootstrap.scss"
 
-const Bootstrap = {
+export default {
   // The install method will be called with the Vue constructor as         
   // the first argument, along with possible options
-  install(Vue) {
+  install(app){
     // Add a component or directive to your plugin, so it will be installed globally to your project.
-    Vue.directive("tooltip", {
-      inserted(el) {
+    app.directive("tooltip", {
+      mounted(el) {
         el.tooltip = new Tooltip(el)
       },
-
-      unbind(el){
+      unmounted(el){
         el.tooltip.dispose()
         el.tooltip = null
         delete el.tooltip
       }
     })
   }
-}
-
-Vue.use(Bootstrap)
+}

src/plugins/fontawesome.js

@@ -1,11 +1,13 @@
-import Vue from "vue"
 import { library, config } from "@fortawesome/fontawesome-svg-core"
 import { faEnvelope, faHeart } from "@fortawesome/free-solid-svg-icons"
 import { faTwitter, faGithub } from "@fortawesome/free-brands-svg-icons"
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import "@fortawesome/fontawesome-svg-core/styles.css"
 
-config.autoAddCss = false;
-library.add(faEnvelope, faHeart, faTwitter, faGithub)
-
-Vue.component("font-awesome-icon", FontAwesomeIcon)
+export default {
+  install(app){
+    config.autoAddCss = false;
+    library.add(faEnvelope, faHeart, faTwitter, faGithub)
+    app.component("font-awesome-icon", FontAwesomeIcon)
+  }
+}

src/plugins/scrollto.js

@@ -1,16 +1,14 @@
-import Vue from "vue"
-
-const scrollto = {
+export default {
   // The install method will be called with the Vue constructor as         
   // the first argument, along with possible options
-  install(Vue) {
+  install(app){
     // Add a component or directive to your plugin, so it will be installed globally to your project.
-    Vue.directive("scrollto", {
-      bind(el, binding) {
+    app.directive("scrollto", {
+      beforeMount(el, binding) {
         el.addEventListener("click", scrollFunction);
         el.parameter1 = binding.value;
       },
-      unbind(el) {
+      unmounted(el) {
         el.removeEventListener("click", scrollFunction);
         el.parameter1 = null
         delete el.parameter1
@@ -27,6 +25,4 @@ function scrollFunction(event) {
   } else {
     element.scrollIntoView({ behavior: 'smooth' });
   }
-}
-
-Vue.use(scrollto)
+}

vite.config.js

@@ -1,11 +1,11 @@
 import { fileURLToPath, URL } from "node:url"
 import { resolve } from 'path'
 import { defineConfig } from "vite"
-import vue2 from "@vitejs/plugin-vue2"
+import vue from "@vitejs/plugin-vue"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue2()],
+  plugins: [vue()],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),