Mudança para compositionAPI

formbrickstest/src/App.vue

@@ -2,10 +2,6 @@
   <router-view />
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'App'
-});
+<script setup>
+//
 </script>

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>

formbrickstest/src/layouts/MainLayout.vue

@@ -45,8 +45,8 @@
   </q-layout>
 </template>
 
-<script>
-import { defineComponent} from 'vue'
+<script setup>
+import { ref } from 'vue'
 import EssentialLink from 'components/EssentialLink.vue'
 
 const linksList = [
@@ -94,24 +94,9 @@ const linksList = [
   }
 ]
 
-export default defineComponent({
-  name: 'MainLayout',
+const leftDrawerOpen = ref(false)
 
-  components: {
-    EssentialLink
-  },
-
-  data () {
-    return {
-      linksList,
-      leftDrawerOpen: false
-    }
-  },
-
-  methods: {
-    toggleLeftDrawer () {
-      this.leftDrawerOpen = !this.leftDrawerOpen
-    }
-  }
-})
+function toggleLeftDrawer () {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
 </script>

formbrickstest/src/pages/ErrorNotFound.vue

@@ -22,10 +22,6 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ErrorNotFound'
-});
+<script setup>
+//
 </script>

formbrickstest/src/pages/IndexPage.vue

@@ -8,10 +8,6 @@
   </q-page>
 </template>
 
-<script>
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'IndexPage'
-});
+<script setup>
+//
 </script>