Migracja z wersji Vue 2 na Vue 3

src/components/App/Clock.vue

@@ -1,27 +1,28 @@
 <template>
-  <div class="clock">{{ formattedDate }}</div>
+  <div class="clock">{{ computedDate }}</div>
 </template>
 
 
 <script lang="ts">
-import Vue from "vue";
-export default Vue.extend({
+import { computed, defineComponent, ref } from "vue";
+export default defineComponent({
   name: "clock",
   data: () => ({
     timestamp: Date.now(),
   }),
-  computed: {
-    formattedDate() {
-      return new Date(this.timestamp).toLocaleString("pl-PL", {
+  setup() {
+      let timestamp = ref(Date.now());
+
+      const computedDate = computed(() => new Date(timestamp.value).toLocaleString("pl-PL", {
         hour: "2-digit",
         minute: "2-digit",
         second: "2-digit",
-      });
-    },
-  },
-  mounted() {
-    setInterval(() => (this.timestamp = Date.now()), 1000);
-  },
+      }));
+
+      setInterval(() => (timestamp.value = Date.now()), 1000);
+
+      return { computedDate }
+  }
 });
 </script>
 

src/components/App/Loading.vue

@@ -3,12 +3,11 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop } from "vue-property-decorator";
+import { defineComponent } from "@vue/runtime-core";
 
-@Component
-export default class Loading extends Vue {
-  @Prop() readonly message!: string;
-}
+export default defineComponent({
+  props: ["message"],
+});
 </script>
 
 <style lang="scss" scoped>

src/components/App/UpdatesCard.vue

@@ -1,14 +1,23 @@
 <template>
-  <section class="updates card" v-if="cardOpen">
+  <section
+    class="updates card"
+    v-if="cardOpen"
+  >
     <h2>Ostatnie aktualizacje w Stacjowniku</h2>
     <p>Tutaj będą pojawiać się informacje o kolejnych nowościach na stronie :)</p>
 
     <ul>
-      <li v-for="(update, i) in updates" :key="i">
+      <li
+        v-for="(update, i) in updates"
+        :key="i"
+      >
         <div>{{update.date}}</div>
 
         <div>
-          <span v-for="(line, l) in content" :key="l">{{line}}</span>
+          <span
+            v-for="(line, l) in content"
+            :key="l"
+          >{{line}}</span>
         </div>
       </li>
     </ul>
@@ -16,7 +25,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
   data() {
     return {
       updates: {
@@ -29,7 +40,7 @@ export default {
       },
     };
   },
-};
+});
 </script>
 
 <style lang="scss" scoped>