refactor: migrate to vue 3

.electron-vue/webpack.renderer.config.js

@@ -24,7 +24,6 @@ const { VueLoaderPlugin } = require("vue-loader");
 let whiteListedModules = [
 	"vue",
 	"portal-vue",
-	"vue-property-decorator",
 	"vue-class-component",
 	"@arkecosystem/client",
 	"got",

.storybook/preview.ts

@@ -4,9 +4,6 @@ import "reflect-metadata";
 import "../src/renderer/app/styles/style.css";
 
 import Vue from "vue";
-import CompositionApi from "@vue/composition-api";
-
-Vue.use(CompositionApi);
 
 addParameters({
 	options: {

jest.config.js

@@ -18,7 +18,6 @@ module.exports = {
 		"src/renderer/app/router",
 		"src/renderer/app/store",
 		"src/renderer/main.js",
-		"src/renderer/registerComponentHooks.ts",
 		"src/renderer/splashscreen.js",
 		"src/renderer/support/enums",
 		"stories.ts",

package.json

@@ -72,7 +72,6 @@
 		"@fortawesome/vue-fontawesome": "^0.1.9",
 		"@kodekeep/reqwest": "^0.4.0",
 		"@ledgerhq/hw-transport-node-hid-singleton": "^5.16.0",
-		"@vue/composition-api": "^0.5.0",
 		"about-window": "^1.13.2",
 		"animate.css": "^4.1.0",
 		"async": "^3.2.0",
@@ -107,17 +106,15 @@
 		"validate-npm-package-name": "^3.0.0",
 		"vee-validate": "^3.3.1",
 		"vm2": "^3.9.2",
-		"vue": "^2.6.11",
+		"vue": "next",
 		"vue-chartjs": "^3.5.0",
 		"vue-class-component": "^7.2.3",
 		"vue-good-table": "^2.19.3",
 		"vue-i18n": "^8.18.1",
-		"vue-property-decorator": "^8.4.2",
 		"vue-qrcode-reader": "^2.3.0",
-		"vue-router": "^3.3.2",
+		"vue-router": "next",
 		"vue-spinner": "^1.0.3",
-		"vuex": "^3.4.0",
-		"vuex-electron": "^1.0.3",
+		"vuex": "next",
 		"wif": "^2.0.6"
 	},
 	"devDependencies": {
@@ -140,7 +137,7 @@
 		"@types/node": "^14.0.6",
 		"@typescript-eslint/eslint-plugin": "^3.0.2",
 		"@typescript-eslint/parser": "^3.0.2",
-		"@vue/test-utils": "1.0.3",
+		"@vue/test-utils": "next",
 		"autoprefixer": "^9.8.0",
 		"babel-core": "^7.0.0-0",
 		"babel-eslint": "^10.1.0",
@@ -175,7 +172,7 @@
 		"eslint-plugin-promise": "^4.2.1",
 		"eslint-plugin-simple-import-sort": "^5.0.3",
 		"eslint-plugin-standard": "^4.0.1",
-		"eslint-plugin-vue": "^6.2.2",
+		"eslint-plugin-vue": "next",
 		"esm": "^3.2.25",
 		"file-loader": "^6.0.0",
 		"flush-promises": "^1.0.2",

src/renderer/app/App.vue

@@ -1,14 +1,13 @@
-<template>
-	<div id="app" class="theme-light">
-		<router-view />
-	</div>
-</template>
-
 <script lang="ts">
 	import "@/app/styles/style.css";
 
-	import { Component, Vue } from "vue-property-decorator";
+	import { defineComponent } from "vue";
 
-	@Component
-	export default class App extends Vue {}
+	export default defineComponent({});
 </script>
+
+<template>
+	<div id="app" class="theme-light">
+		<router-view />
+	</div>
+</template>

src/renderer/app/SplashScreen.vue

@@ -1,3 +1,17 @@
+<script lang="ts">
+	import "@/app/styles/style.css";
+
+	import { defineComponent } from "vue";
+
+	import packageJson from "../../../package.json";
+
+	export default defineComponent({
+		setup() {
+			return { version: packageJson.version };
+		},
+	});
+</script>
+
 <template>
 	<div class="absolute flex flex-col w-full h-full text-center select-none SplashScreen bg-default-background">
 		<div class="flex justify-center flex-1">
@@ -62,23 +76,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-	import "@/app/styles/style.css";
-
-	import { Component, Vue } from "vue-property-decorator";
-
-	import packageJson from "../../../package.json";
-
-	@Component({
-		name: "SplashScreen",
-	})
-	export default class SplashScreen extends Vue {
-		get version() {
-			return packageJson.version;
-		}
-	}
-</script>
-
 <style scoped>
 	.SplashScreen {
 		color: #3c4249;

src/renderer/app/components/Alert/Alert.vue

@@ -1,18 +1,42 @@
+<script lang="ts">
+	import { defineComponent } from "vue";
+
+	export default defineComponent({
+		props: {
+			status: {
+				type: String,
+				required: false,
+				default: "warning",
+			},
+			size: {
+				type: String,
+				required: false,
+				default: "default",
+			},
+			title: {
+				type: String,
+				required: false,
+				default: "",
+			},
+		},
+	});
+</script>
+
 <template>
 	<div
 		role="alert"
-		class="Alert flex rounded-lg overflow-hidden"
+		class="flex overflow-hidden rounded-lg Alert"
 		:class="['Alert--status-' + status, 'Alert--size-' + size]"
 	>
-		<div class="Alert__icon Alert--padding w-24 flex items-center justify-center">
+		<div class="flex items-center justify-center w-24 Alert__icon Alert--padding">
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="w-8 h-8">
 				<path
 					d="M0 10C0 4.5 4.5 0 10 0s10 4.5 10 10-4.5 10-10 10S0 15.5 0 10zm2 0c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8-8 3.6-8 8zm7 4c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.4-1-1zm0-3V6c0-.6.4-1 1-1s1 .4 1 1v5c0 .6-.4 1-1 1s-1-.4-1-1z"
 					fill="currentColor"
 				/>
 			</svg>
 		</div>
-		<div class="Alert__content Alert--padding flex-1">
+		<div class="flex-1 Alert__content Alert--padding">
 			<p v-if="title" data-testid="Alert__title" class="Alert__content__title">
 				{{ title }}
 			</p>
@@ -21,17 +45,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-	import { Component, Prop, Vue } from "vue-property-decorator";
-
-	@Component
-	export default class Alert extends Vue {
-		@Prop({ default: "warning" }) public status!: "error" | "success" | "warning" | "info";
-		@Prop({ default: "default" }) public size!: "small" | "default" | "large";
-		@Prop({ default: "" }) public title!: string;
-	}
-</script>
-
 <style lang="postcss" scoped>
 	.Alert {
 		&--padding {

src/renderer/app/components/Button/Button.vue

@@ -1,3 +1,32 @@
+<script lang="ts">
+	import { defineComponent } from "vue";
+
+	export default defineComponent({
+		props: {
+			variant: {
+				type: String,
+				required: false,
+				default: "solid",
+			},
+			color: {
+				type: String,
+				required: false,
+				default: "primary",
+			},
+			size: {
+				type: String,
+				required: false,
+				default: "default",
+			},
+			shape: {
+				type: String,
+				required: false,
+				default: "rounded",
+			},
+		},
+	});
+</script>
+
 <template>
 	<button
 		:class="[
@@ -6,26 +35,14 @@
 			'Button--shape-' + shape,
 			'Button--size-' + size,
 		]"
-		class="Button focus:shadow-outline font-semibold text-center transition-all ease-linear duration-100"
+		class="font-semibold text-center transition-all duration-100 ease-linear Button focus:shadow-outline"
 		v-bind="$attrs"
 		v-on="$listeners"
 	>
 		<slot></slot>
 	</button>
 </template>
 
-<script lang="ts">
-	import { Component, Prop, Vue } from "vue-property-decorator";
-
-	@Component
-	export default class Button extends Vue {
-		@Prop({ default: "solid" }) public variant!: "solid" | "plain" | "outline";
-		@Prop({ default: "primary" }) public color!: "primary" | "success" | "danger" | "light";
-		@Prop({ default: "default" }) public size!: "small" | "default" | "large";
-		@Prop({ default: "rounded" }) public shape!: "rounded" | "circle";
-	}
-</script>
-
 <style lang="postcss" scoped>
 	.Button:disabled {
 		@apply cursor-not-allowed bg-opacity-50;

src/renderer/app/components/Form/FormError.vue

@@ -1,14 +1,19 @@
+<script lang="ts">
+	import { defineComponent } from "vue";
+
+	export default defineComponent({
+		props: {
+			errors: {
+				type: Array,
+				required: false,
+				default: () => [],
+			},
+		},
+	});
+</script>
+
 <template>
 	<div v-if="errors">
 		<span class="inline-block mt-1 text-red-500">{{ errors[0] }}</span>
 	</div>
 </template>
-
-<script lang="ts">
-	import { Component, Prop, Vue } from "vue-property-decorator";
-
-	@Component({ name: "FormError" })
-	export default class FormError extends Vue {
-		@Prop() public errors: string[] | undefined;
-	}
-</script>

src/renderer/app/components/ListDivided/ListDivided.vue

@@ -1,3 +1,31 @@
+<script lang="ts">
+	import { defineComponent, provide } from "vue";
+
+	import ListDividedItem from "./ListDividedItem";
+	import { FloatingLabelSymbol } from "./types";
+
+	export default defineComponent({
+		components: {
+			ListDividedItem,
+		},
+		props: {
+			isFloatingLabel: {
+				type: Boolean,
+				required: false,
+				default: false,
+			},
+			errors: {
+				type: Array,
+				required: false,
+				default: null,
+			},
+		},
+		setup(props) {
+			provide(FloatingLabelSymbol, props.isFloatingLabel);
+		},
+	});
+</script>
+
 <template>
 	<ul class="w-full ListDivided">
 		<template v-if="items">
@@ -10,24 +38,6 @@
 	</ul>
 </template>
 
-<script lang="ts">
-	import { Component, Prop, Provide, Vue } from "vue-property-decorator";
-
-	import ListDividedItem from "./ListDividedItem";
-
-	@Component({
-		name: "ListDivided",
-		components: {
-			ListDividedItem,
-		},
-	})
-	export default class ListDivided extends Vue {
-		@Prop({ default: false }) public isFloatingLabel!: boolean;
-		@Prop({ default: null }) public items!: object | null;
-		@Provide("isFloatingLabel") public isFloatingLabelData = this.isFloatingLabel;
-	}
-</script>
-
 <style lang="postcss">
 	.ListDivided {
 		.ListDividedItem:last-child {