Client - use <script setup> in components

fittrackee_client/src/views/user/LoginOrRegister.vue

@@ -11,25 +11,18 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue'
+<script setup lang="ts">
+  import { toRefs } from 'vue'
 
   import BikePic from '@/components/BikePic.vue'
   import LoginOrRegisterForm from '@/components/User/UserAuthForm.vue'
 
-  export default defineComponent({
-    name: 'NavBar',
-    components: {
-      BikePic,
-      LoginOrRegisterForm,
-    },
-    props: {
-      action: {
-        type: String,
-        required: true,
-      },
-    },
-  })
+  interface Props {
+    action: string
+  }
+  const props = defineProps<Props>()
+
+  const { action } = toRefs(props)
 </script>
 
 <style lang="scss">

fittrackee_client/src/views/user/PasswordResetView.vue

@@ -11,37 +11,28 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { computed, defineComponent, onBeforeMount } from 'vue'
+<script setup lang="ts">
+  import { computed, toRefs, onBeforeMount } from 'vue'
   import { useRoute, useRouter } from 'vue-router'
 
   import PasswordEmailSent from '@/components/User/PasswordReset/PasswordActionDone.vue'
   import PasswordResetRequest from '@/components/User/PasswordReset/PasswordResetForm.vue'
-  export default defineComponent({
-    name: 'PasswordResetView',
-    components: {
-      PasswordEmailSent,
-      PasswordResetRequest,
-    },
-    props: {
-      action: {
-        type: String,
-        required: true,
-      },
-    },
-    setup(props) {
-      const route = useRoute()
-      const router = useRouter()
-      const token = computed(() => route.query.token)
 
-      onBeforeMount(() => {
-        if (props.action === 'reset' && !token.value) {
-          router.push('/')
-        }
-      })
+  interface Props {
+    action: string
+  }
+  const props = defineProps<Props>()
 
-      return { token }
-    },
+  const route = useRoute()
+  const router = useRouter()
+
+  const { action } = toRefs(props)
+  const token = computed(() => route.query.token)
+
+  onBeforeMount(() => {
+    if (props.action === 'reset' && !token.value) {
+      router.push('/')
+    }
   })
 </script>
 

fittrackee_client/src/views/user/ProfileView.vue

@@ -4,23 +4,18 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { computed, ComputedRef, defineComponent } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, computed } from 'vue'
 
   import { AUTH_USER_STORE } from '@/store/constants'
   import { IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
 
-  export default defineComponent({
-    name: 'ProfileView',
-    setup() {
-      const store = useStore()
-      const authUser: ComputedRef<IUserProfile> = computed(
-        () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
-      )
-      return { authUser }
-    },
-  })
+  const store = useStore()
+
+  const authUser: ComputedRef<IUserProfile> = computed(
+    () => store.getters[AUTH_USER_STORE.GETTERS.AUTH_USER_PROFILE]
+  )
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/views/user/UserView.vue

@@ -7,14 +7,8 @@
   </div>
 </template>
 
-<script lang="ts">
-  import {
-    ComputedRef,
-    computed,
-    defineComponent,
-    onBeforeMount,
-    onBeforeUnmount,
-  } from 'vue'
+<script setup lang="ts">
+  import { ComputedRef, computed, onBeforeMount, onBeforeUnmount } from 'vue'
   import { useRoute } from 'vue-router'
 
   import UserHeader from '@/components/User/ProfileDisplay/UserHeader.vue'
@@ -23,35 +17,21 @@
   import { IUserProfile } from '@/types/user'
   import { useStore } from '@/use/useStore'
 
-  export default defineComponent({
-    name: 'UserView',
-    components: {
-      UserHeader,
-      UserInfos,
-    },
-    setup() {
-      const route = useRoute()
-      const store = useStore()
+  const route = useRoute()
+  const store = useStore()
 
-      const user: ComputedRef<IUserProfile> = computed(
-        () => store.getters[USERS_STORE.GETTERS.USER]
-      )
+  const user: ComputedRef<IUserProfile> = computed(
+    () => store.getters[USERS_STORE.GETTERS.USER]
+  )
 
-      onBeforeMount(() => {
-        if (
-          route.params.username &&
-          typeof route.params.username === 'string'
-        ) {
-          store.dispatch(USERS_STORE.ACTIONS.GET_USER, route.params.username)
-        }
-      })
+  onBeforeMount(() => {
+    if (route.params.username && typeof route.params.username === 'string') {
+      store.dispatch(USERS_STORE.ACTIONS.GET_USER, route.params.username)
+    }
+  })
 
-      onBeforeUnmount(() => {
-        store.dispatch(USERS_STORE.ACTIONS.EMPTY_USER)
-      })
-
-      return { user }
-    },
+  onBeforeUnmount(() => {
+    store.dispatch(USERS_STORE.ACTIONS.EMPTY_USER)
   })
 </script>