Migrate to Vue 3 and Vite

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/User/SettingsOnboard.vue

@@ -1,19 +1,23 @@
 <template>
-  <div class="section container">
+  <div class="container mx-auto">
     <h1 class="title">{{ $t("Let's define a few settings") }}</h1>
-    <b-steps v-model="stepIndex" :has-navigation="false">
-      <b-step-item step="1" :label="$t('Settings')">
+    <o-steps v-model="stepIndex" :has-navigation="false">
+      <o-step-item step="1" :label="$t('Settings')">
         <settings-onboarding />
-      </b-step-item>
-      <b-step-item step="2" :label="$t('Participation notifications')">
+      </o-step-item>
+      <o-step-item step="2" :label="$t('Participation notifications')">
         <notifications-onboarding />
-      </b-step-item>
-      <b-step-item step="3" :label="$t('Profiles and federation')">
-        <profile-onboarding />
-      </b-step-item>
-    </b-steps>
+      </o-step-item>
+      <o-step-item step="3" :label="$t('Profiles and federation')">
+        <ProfileOnboarding
+          v-if="currentActor && instanceName"
+          :current-actor="currentActor"
+          :instance-name="instanceName"
+        />
+      </o-step-item>
+    </o-steps>
     <section class="has-text-centered section buttons">
-      <b-button
+      <o-button
         outlined
         :disabled="stepIndex < 1"
         tag="router-link"
@@ -23,10 +27,10 @@
         }"
       >
         {{ $t("Previous") }}
-      </b-button>
-      <b-button
+      </o-button>
+      <o-button
         outlined
-        type="is-success"
+        variant="success"
         v-if="stepIndex < 2"
         tag="router-link"
         :to="{
@@ -35,61 +39,63 @@
         }"
       >
         {{ $t("Next") }}
-      </b-button>
-      <b-button
+      </o-button>
+      <o-button
         v-if="stepIndex >= 2"
-        type="is-success"
+        variant="success"
         size="is-big"
         tag="router-link"
         :to="{ name: RouteName.HOME }"
       >
         {{ $t("All good, let's continue!") }}
-      </b-button>
+      </o-button>
     </section>
   </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { USER_SETTINGS } from "@/graphql/user";
-import { Component, Prop, Vue, Watch } from "vue-property-decorator";
-import { TIMEZONES } from "../../graphql/config";
-import RouteName from "../../router/name";
-import { IConfig } from "../../types/config.model";
+import { IUser } from "@/types/current-user.model";
+import { useQuery } from "@vue/apollo-composable";
+import { useHead } from "@vueuse/head";
+import { computed, defineAsyncComponent, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import RouteName from "@/router/name";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { useInstanceName } from "@/composition/apollo/config";
 
-@Component({
-  components: {
-    NotificationsOnboarding: () =>
-      import("../../components/Settings/NotificationsOnboarding.vue"),
-    SettingsOnboarding: () =>
-      import("../../components/Settings/SettingsOnboarding.vue"),
-    ProfileOnboarding: () =>
-      import("../../components/Account/ProfileOnboarding.vue"),
-  },
-  apollo: {
-    config: TIMEZONES,
-    loggedUser: USER_SETTINGS,
-  },
-  metaInfo() {
-    return {
-      title: this.$t("First steps") as string,
-    };
-  },
-})
-export default class SettingsOnboard extends Vue {
-  @Prop({ required: false, default: 1, type: Number }) step!: number;
+const { currentActor } = useCurrentActorClient();
+const { instanceName } = useInstanceName();
+const { refetch } = useQuery<{ loggedUser: IUser }>(USER_SETTINGS);
 
-  config!: IConfig;
+const NotificationsOnboarding = defineAsyncComponent(
+  () => import("@/components/Settings/NotificationsOnboarding.vue")
+);
+const SettingsOnboarding = defineAsyncComponent(
+  () => import("@/components/Settings/SettingsOnboarding.vue")
+);
+const ProfileOnboarding = defineAsyncComponent(
+  () => import("@/components/Account/ProfileOnboarding.vue")
+);
 
-  RouteName = RouteName;
-
-  get stepIndex(): number {
-    return this.step - 1;
+const props = withDefaults(
+  defineProps<{
+    step?: number;
+  }>(),
+  {
+    step: 1,
   }
+);
 
-  @Watch("stepIndex")
-  refetchUserSettings() {
-    this.$apollo.queries.loggedUser.refetch();
-  }
-}
+const stepIndex = computed(() => props.step - 1);
+
+watch(stepIndex, () => {
+  refetch();
+});
+
+const { t } = useI18n({ useScope: "global" });
+useHead({
+  title: computed(() => t("First steps")),
+});
 </script>
 <style scoped lang="scss">
 .section.container {