Merge pull request #16 from modos189/feat/vue3

feat: migrate application from Vue 2 to Vue 3

Author: modos189

app/app.js

@@ -1,14 +1,15 @@
 //@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
 
-import Vue from 'nativescript-vue'
+import { createApp, registerElement } from 'nativescript-vue'
 
 import { FontIcon, fonticon } from '@nativescript-community/fonticon';
-import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
+import { BottomSheetPlugin } from '@nativescript-community/ui-material-bottomsheet/vue3';
+import { install as installBottomSheet } from "@nativescript-community/ui-material-bottomsheet";
 import CanvasSVG from '@nativescript-community/ui-svg/vue';
 import ButtonPlugin from '@nativescript-community/ui-material-button/vue';
-import WebViewPlugin from '@nativescript-community/ui-webview/vue';
+import WebView from '@nativescript-community/ui-webview/vue';
 import { CheckBox } from '@nstudio/nativescript-checkbox';
-import CollectionView from '@nativescript-community/ui-collectionview/vue';
+import CollectionView from '@nativescript-community/ui-collectionview/vue3';
 import RipplePlugin from '@nativescript-community/ui-material-ripple/vue';
 import { ImageCacheIt } from '@triniwiz/nativescript-image-cache-it';
 
@@ -20,25 +21,17 @@ import { initializeTracing } from './app-trace';
 initializeTracing();
 ImageCacheIt.enableAutoMM();
 
+// Install BottomSheet plugin
+installBottomSheet();
+
 FontIcon.paths = {
   'fa': './assets/css/Font-Awesome.css',
 };
 FontIcon.loadCssSync();
-Vue.filter('fonticon', fonticon);
-
-import { install } from "@nativescript-community/ui-material-bottomsheet";
-install();
-Vue.use(BottomSheetPlugin);
-
-Vue.use(CanvasSVG);
-Vue.use(ButtonPlugin);
-Vue.use(WebViewPlugin);
-Vue.use(CollectionView);
-Vue.use(RipplePlugin);
 
-Vue.registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
-Vue.registerElement('ImageCacheIt', () => require('@triniwiz/nativescript-image-cache-it').ImageCacheIt);
-Vue.registerElement(
+registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
+registerElement('ImageCacheIt', () => require('@triniwiz/nativescript-image-cache-it').ImageCacheIt);
+registerElement(
   'CheckBox',
   () => CheckBox,
   {
@@ -49,9 +42,18 @@ Vue.registerElement(
   }
 );
 
-Vue.config.silent = false;
+const app = createApp(Main);
+
+app.config.globalProperties.$filters = {
+  fonticon: fonticon
+};
+
+app.use(store);
+app.use(WebView);
+app.use(CollectionView);
+app.use(CanvasSVG);
+app.use(ButtonPlugin);
+app.use(RipplePlugin);
+app.use(BottomSheetPlugin);
 
-new Vue({
-  render: (h) => h('frame', [h(Main)]),
-  store
-}).$start()
+app.start();