Mudança para compositionAPI

formbrickstest/src/components/EssentialLink.vue

@@ -3,47 +3,42 @@
     clickable
     tag="a"
     target="_blank"
-    :href="link"
+    :href="props.link"
   >
     <q-item-section
-      v-if="icon"
+      v-if="props.icon"
       avatar
     >
-      <q-icon :name="icon" />
+      <q-icon :name="props.icon" />
     </q-item-section>
 
     <q-item-section>
-      <q-item-label>{{ title }}</q-item-label>
-      <q-item-label caption>{{ caption }}</q-item-label>
+      <q-item-label>{{ props.title }}</q-item-label>
+      <q-item-label caption>{{ props.caption }}</q-item-label>
     </q-item-section>
   </q-item>
 </template>
 
-<script>
-import { defineComponent } from 'vue'
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
 
-export default defineComponent({
-  name: 'EssentialLink',
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
+  caption: {
+    type: String,
+    default: ''
+  },
 
-    caption: {
-      type: String,
-      default: ''
-    },
+  link: {
+    type: String,
+    default: '#'
+  },
 
-    link: {
-      type: String,
-      default: '#'
-    },
-
-    icon: {
-      type: String,
-      default: ''
-    }
+  icon: {
+    type: String,
+    default: ''
   }
 })
 </script>