Use composition API for more components, enable more type checking (#914)

* Activate more linting rules from eslint and typescript

* Properly add VForm as type information

* Fix usage of native types

* Fix more linting issues

* Rename vuetify types file, add VTooltip

* Fix some more typing problems

* Use composition API for more components

* Convert RecipeRating

* Convert RecipeNutrition

* Convert more components to composition API

* Fix globals plugin for type checking

* Add missing icon types

* Fix vuetify types in Nuxt context

* Use composition API for RecipeActionMenu

* Convert error.vue to composition API

* Convert RecipeContextMenu to composition API

* Use more composition API and type checking in recipe/create

* Convert AppButtonUpload to composition API

* Fix some type checking in RecipeContextMenu

* Remove unused components BaseAutoForm and BaseColorPicker

* Convert RecipeCategoryTagDialog to composition API

* Convert RecipeCardSection to composition API

* Convert RecipeCategoryTagSelector to composition API

* Properly import vuetify type definitions

* Convert BaseButton to composition API

* Convert AutoForm to composition API

* Remove unused requests API file

* Remove static routes from recipe API

* Fix more type errors

* Convert AppHeader to composition API, fixing some search bar focus problems

* Convert RecipeDialogSearch to composition API

* Update API types from pydantic models, handle undefined values

* Improve more typing problems

* Add types to other plugins

* Properly type the CRUD API access

* Fix typing of static image routes

* Fix more typing stuff

* Fix some more typing problems

* Turn off more rules

frontend/pages/admin/manage/groups/_id.vue

@@ -31,6 +31,7 @@ import { useGroups } from "~/composables/use-groups";
 import { alert } from "~/composables/use-toast";
 import { useUserForm } from "~/composables/use-users";
 import { validators } from "~/composables/use-validators";
+import { VForm } from "~/types/vuetify";
 
 export default defineComponent({
   components: {

frontend/pages/admin/manage/groups/index.vue

@@ -126,7 +126,7 @@ export default defineComponent({
     const router = useRouter();
 
     function handleRowClick(item: Group) {
-      router.push("/admin/manage/groups/" + item.id);
+      router.push(`/admin/manage/groups/${item.id}`);
     }
 
     return { ...toRefs(state), groups, refreshAllGroups, deleteGroup, createGroup, openDialog, handleRowClick };

frontend/pages/admin/manage/users/_id.vue

@@ -44,6 +44,7 @@ import { useGroups } from "~/composables/use-groups";
 import { alert } from "~/composables/use-toast";
 import { useUserForm } from "~/composables/use-users";
 import { validators } from "~/composables/use-validators";
+import { VForm } from "~/types/vuetify";
 
 export default defineComponent({
   layout: "admin",

frontend/pages/admin/manage/users/create.vue

@@ -39,6 +39,7 @@ import { useAdminApi } from "~/composables/api";
 import { useGroups } from "~/composables/use-groups";
 import { useUserForm } from "~/composables/use-users";
 import { validators } from "~/composables/use-validators";
+import { VForm } from "~/types/vuetify";
 
 export default defineComponent({
   layout: "admin",
@@ -92,4 +93,4 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-</style>
+</style>

frontend/pages/admin/manage/users/index.vue

@@ -77,7 +77,7 @@ export default defineComponent({
     const { loading, deleteUser } = useUser(refreshAllUsers);
 
     function handleRowClick(item: UserOut) {
-      router.push("/admin/manage/users/" + item.id);
+      router.push(`/admin/manage/users/${item.id}`);
     }
 
     // ==========================================================
@@ -114,4 +114,4 @@ export default defineComponent({
     };
   },
 });
-</script>
+</script>

frontend/pages/admin/site-settings.vue

@@ -74,7 +74,7 @@
     </section>
   </v-container>
 </template>
-    
+
 <script lang="ts">
 import {
   computed,
@@ -199,7 +199,7 @@ export default defineComponent({
       return false;
     });
 
-    function getColor(booly: boolean | any, warning = false) {
+    function getColor(booly: unknown, warning = false) {
       const falsey = warning ? "warning" : "error";
       return booly ? "success" : falsey;
     }
@@ -207,7 +207,6 @@ export default defineComponent({
     // ============================================================
     // General About Info
 
-    // @ts-ignore
     const { $globals, i18n } = useContext();
 
     // @ts-ignore
@@ -295,6 +294,6 @@ export default defineComponent({
   },
 });
 </script>
-    
+
 <style scoped>
-</style>
+</style>

frontend/pages/admin/toolbox/notifications.vue

@@ -144,14 +144,13 @@
     </v-data-table>
   </v-container>
 </template>
-    
+
 <script lang="ts">
 import { defineComponent, reactive, useContext, toRefs, ref } from "@nuxtjs/composition-api";
 import { useNotifications } from "@/composables/use-notifications";
 export default defineComponent({
   layout: "admin",
   setup() {
-    // @ts-ignore -> Ignore missing $globals
     const { i18n } = useContext();
 
     const state = reactive({
@@ -222,6 +221,6 @@ export default defineComponent({
   },
 });
 </script>
-    
+
 <style scoped>
-</style>
+</style>

frontend/pages/login.vue

@@ -209,7 +209,7 @@ export default defineComponent({
 
     const loggingIn = ref(false);
 
-    const allowSignup = computed(() => context.env.ALLOW_SIGNUP);
+    const allowSignup = computed(() => context.env.ALLOW_SIGNUP as boolean);
 
     async function authenticate() {
       loggingIn.value = true;
@@ -221,7 +221,11 @@ export default defineComponent({
       try {
         await $auth.loginWith("local", { data: formData });
       } catch (error) {
-        if (error.response.status === 401) {
+        // TODO Check if error is an AxiosError, but isAxiosError is not working right now
+        // See https://github.com/nuxt-community/axios-module/issues/550
+        // Import $axios from useContext()
+        // if ($axios.isAxiosError(error) && error.response?.status === 401) {
+        if (error.response?.status === 401) {
           alert.error("Invalid Credentials");
         } else {
           alert.error("Something Went Wrong!");
@@ -250,4 +254,4 @@ export default defineComponent({
 .max-button {
   width: 300px;
 }
-</style>
+</style>

frontend/pages/meal-plan/planner.vue

@@ -210,6 +210,7 @@ import { useMealplans, planTypeOptions } from "~/composables/use-group-mealplan"
 import { useRecipes, allRecipes } from "~/composables/recipes";
 import RecipeCardImage from "~/components/Domain/Recipe/RecipeCardImage.vue";
 import RecipeCard from "~/components/Domain/Recipe/RecipeCard.vue";
+import { PlanEntryType } from "~/types/api-types/meal-plan";
 
 export default defineComponent({
   components: {
@@ -238,7 +239,7 @@ export default defineComponent({
     useRecipes(true, true);
 
     function filterMealByDate(date: Date) {
-      if (!mealplans.value) return;
+      if (!mealplans.value) return [];
       return mealplans.value.filter((meal) => {
         const mealDate = parseISO(meal.date);
         return isSameDay(mealDate, date);
@@ -263,14 +264,12 @@ export default defineComponent({
         // The drop was cancelled, unsure if anything needs to be done?
         console.log("Cancel Move Event");
       } else {
-        // A Meal was moved, set the new date value and make a update request and refresh the meals
-        const fromMealsByIndex = evt.from.getAttribute("data-index");
-        const toMealsByIndex = evt.to.getAttribute("data-index");
+        // A Meal was moved, set the new date value and make an update request and refresh the meals
+        const fromMealsByIndex = parseInt(evt.from.getAttribute("data-index") ?? "");
+        const toMealsByIndex = parseInt(evt.to.getAttribute("data-index") ?? "");
 
-        if (fromMealsByIndex) {
-          // @ts-ignore
+        if (!isNaN(fromMealsByIndex) && !isNaN(toMealsByIndex)) {
           const mealData = mealsByDate.value[fromMealsByIndex].meals[evt.oldIndex as number];
-          // @ts-ignore
           const destDate = mealsByDate.value[toMealsByIndex].date;
 
           mealData.date = format(destDate, "yyyy-MM-dd");
@@ -282,13 +281,12 @@ export default defineComponent({
 
     const mealsByDate = computed(() => {
       return days.value.map((day) => {
-        return { date: day, meals: filterMealByDate(day as any) };
+        return { date: day, meals: filterMealByDate(day) };
       });
     });
 
     const days = computed(() => {
       return Array.from(Array(8).keys()).map(
-        // @ts-ignore
         (i) => new Date(weekRange.value.start.getTime() + i * 24 * 60 * 60 * 1000)
       );
     });
@@ -304,7 +302,7 @@ export default defineComponent({
 
     watch(dialog, () => {
       if (dialog.note) {
-        newMeal.recipeId = null;
+        newMeal.recipeId = undefined;
       }
       newMeal.title = "";
       newMeal.text = "";
@@ -314,13 +312,12 @@ export default defineComponent({
       date: "",
       title: "",
       text: "",
-      recipeId: null as Number | null,
-      entryType: "dinner",
+      recipeId: undefined as number | undefined,
+      entryType: "dinner" as PlanEntryType,
     });
 
     function openDialog(date: Date) {
       newMeal.date = format(date, "yyyy-MM-dd");
-      // @ts-ignore
       state.createMealDialog = true;
     }
 
@@ -329,21 +326,20 @@ export default defineComponent({
       newMeal.title = "";
       newMeal.text = "";
       newMeal.entryType = "dinner";
-      newMeal.recipeId = null;
+      newMeal.recipeId = undefined;
     }
 
     async function randomMeal(date: Date) {
       // TODO: Refactor to use API call to get random recipe
-      // @ts-ignore
-      const randomRecipe = allRecipes.value[Math.floor(Math.random() * allRecipes.value.length)];
+      const randomRecipe = allRecipes.value?.[Math.floor(Math.random() * allRecipes.value.length)];
+      if (!randomRecipe) return;
 
       newMeal.date = format(date, "yyyy-MM-dd");
 
-      newMeal.recipeId = randomRecipe.id || null;
+      newMeal.recipeId = randomRecipe.id;
 
       console.log(newMeal.recipeId, randomRecipe.id);
 
-      // @ts-ignore
       await actions.createOne({ ...newMeal });
       resetDialog();
     }

frontend/pages/recipe/_slug/cook.vue

@@ -94,12 +94,12 @@ export default defineComponent({
 
     const { recipeImage } = useStaticRoutes();
 
-    function getIngredientByRefId(refId: String) {
+    function getIngredientByRefId(refId: string) {
       if (!recipe.value) {
         return;
       }
 
-      const ing = recipe?.value.recipeIngredient.find((ing) => ing.referenceId === refId) || "";
+      const ing = recipe?.value.recipeIngredient?.find((ing) => ing.referenceId === refId) || "";
       if (ing === "") {
         return "";
       }

frontend/pages/recipe/_slug/index.vue

@@ -34,7 +34,7 @@
           :key="imageKey"
           :max-width="enableLandscape ? null : '50%'"
           :min-height="hideImage ? '50' : imageHeight"
-          :src="recipeImage(recipe.slug, imageKey)"
+          :src="recipeImage(recipe.slug, '', imageKey)"
           class="d-print-none"
           @error="hideImage = true"
         >
@@ -561,7 +561,6 @@ export default defineComponent({
 
     const { recipeImage } = useStaticRoutes();
 
-    // @ts-ignore
     const { $vuetify } = useContext();
 
     // ===========================================================================
@@ -623,7 +622,7 @@ export default defineComponent({
     });
 
     async function uploadImage(fileObject: File) {
-      if (!recipe.value) {
+      if (!recipe.value || !recipe.value.slug) {
         return;
       }
       const newVersion = await api.recipes.updateImage(recipe.value.slug, fileObject);
@@ -656,8 +655,8 @@ export default defineComponent({
             referenceId: uuid4(),
             title: "",
             note: x,
-            unit: null,
-            food: null,
+            unit: undefined,
+            food: undefined,
             disableAmount: true,
             quantity: 1,
           };
@@ -671,8 +670,8 @@ export default defineComponent({
           referenceId: uuid4(),
           title: "",
           note: "",
-          unit: null,
-          food: null,
+          unit: undefined,
+          food: undefined,
           disableAmount: true,
           quantity: 1,
         });
@@ -762,7 +761,6 @@ export default defineComponent({
   head: {},
   computed: {
     imageHeight() {
-      // @ts-ignore
       return this.$vuetify.breakpoint.xs ? "200" : "400";
     },
   },

frontend/pages/recipe/_slug/ingredient-parser.vue

@@ -80,20 +80,21 @@
     </v-container>
   </v-container>
 </template>
-  
+
 <script lang="ts">
 import { defineComponent, ref, useRoute, useRouter } from "@nuxtjs/composition-api";
-import { until, invoke } from "@vueuse/core";
-import { Food, ParsedIngredient, Parser } from "~/api/class-interfaces/recipes/types";
+import { invoke, until } from "@vueuse/core";
+import { ParsedIngredient, Parser } from "~/api/class-interfaces/recipes/types";
+import { CreateIngredientFood, CreateIngredientUnit, IngredientFood, IngredientUnit } from "~/types/api-types/recipe";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
 import { useUserApi } from "~/composables/api";
-import { useRecipe, useFoods, useUnits } from "~/composables/recipes";
-import { RecipeIngredientUnit } from "~/types/api-types/recipe";
+import { useFoods, useRecipe, useUnits } from "~/composables/recipes";
+
 interface Error {
   ingredientIndex: number;
-  unitError: Boolean;
+  unitError: boolean;
   unitErrorMessage: string;
-  foodError: Boolean;
+  foodError: boolean;
   foodErrorMessage: string;
 }
 
@@ -125,10 +126,10 @@ export default defineComponent({
     const parsedIng = ref<ParsedIngredient[]>([]);
 
     async function fetchParsed() {
-      if (!recipe.value) {
+      if (!recipe.value || !recipe.value.recipeIngredient) {
         return;
       }
-      const raw = recipe.value.recipeIngredient.map((ing) => ing.note);
+      const raw = recipe.value.recipeIngredient.map((ing) => ing.note ?? "");
       const { data } = await api.recipes.parseIngredients(parser.value, raw);
 
       if (data) {
@@ -187,7 +188,7 @@ export default defineComponent({
 
     const errors = ref<Error[]>([]);
 
-    function checkForUnit(unit: RecipeIngredientUnit | null) {
+    function checkForUnit(unit?: IngredientUnit | CreateIngredientUnit) {
       if (!unit) {
         return false;
       }
@@ -197,7 +198,7 @@ export default defineComponent({
       return false;
     }
 
-    function checkForFood(food: Food | null) {
+    function checkForFood(food?: IngredientFood | CreateIngredientFood) {
       if (!food) {
         return false;
       }
@@ -207,7 +208,7 @@ export default defineComponent({
       return false;
     }
 
-    async function createFood(food: Food, index: number) {
+    async function createFood(food: CreateIngredientFood, index: number) {
       workingFoodData.name = food.name;
       await actions.createOne();
       errors.value[index].foodError = false;
@@ -227,16 +228,14 @@ export default defineComponent({
           return ing;
         }
         // Get food from foods
-        const food = foods.value.find((f) => f.name === ing.food?.name);
-        ing.food = food || null;
+        ing.food = foods.value.find((f) => f.name === ing.food?.name);
 
         // Get unit from units
-        const unit = units.value.find((u) => u.name === ing.unit?.name);
-        ing.unit = unit || null;
+        ing.unit = units.value.find((u) => u.name === ing.unit?.name);
         return ing;
       });
 
-      if (!recipe.value) {
+      if (!recipe.value || !recipe.value.slug) {
         return;
       }
 
@@ -272,4 +271,4 @@ export default defineComponent({
   },
 });
 </script>
-  
+

frontend/pages/recipe/create.vue

@@ -314,7 +314,17 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref, useRouter, useContext } from "@nuxtjs/composition-api";
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  ref,
+  useRouter,
+  useContext,
+  computed,
+  useRoute
+} from "@nuxtjs/composition-api";
+import { AxiosResponse } from "axios";
 // @ts-ignore No Types for v-jsoneditor
 import VJsoneditor from "v-jsoneditor";
 import { useUserApi } from "~/composables/api";
@@ -322,6 +332,8 @@ import RecipeCategoryTagSelector from "~/components/Domain/Recipe/RecipeCategory
 import { validators } from "~/composables/use-validators";
 import { Recipe } from "~/types/api-types/recipe";
 import { alert } from "~/composables/use-toast";
+import { VForm} from "~/types/vuetify";
+
 export default defineComponent({
   components: { VJsoneditor, RecipeCategoryTagSelector },
   setup() {
@@ -330,7 +342,6 @@ export default defineComponent({
       loading: false,
     });
 
-    // @ts-ignore - $globals not found in type definition
     const { $globals } = useContext();
 
     const tabs = [
@@ -362,20 +373,39 @@ export default defineComponent({
     ];
 
     const api = useUserApi();
+    const route = useRoute();
     const router = useRouter();
 
-    function handleResponse(response: any, edit: Boolean = false) {
+    function handleResponse(response: AxiosResponse<string> | null, edit = false) {
       if (response?.status !== 201) {
         state.error = true;
         state.loading = false;
         return;
       }
-      router.push(`/recipe/${response.data}?edit=${edit}`);
+      router.push(`/recipe/${response.data}?edit=${edit.toString()}`);
     }
 
+    const tab = computed({
+      set(tab: string) {
+        router.replace({ query: { ...route.value.query, tab } });
+      },
+      get() {
+        return route.value.query.tab as string;
+      },
+    });
+
+    const recipeUrl = computed({
+      set(recipe_import_url: string) {
+        recipe_import_url = recipe_import_url.trim()
+        router.replace({ query: { ...route.value.query, recipe_import_url } });
+      },
+      get() {
+        return route.value.query.recipe_import_url as string;
+      },
+    });
+
     // ===================================================
     // Recipe Debug URL Scraper
-    // @ts-ignore
 
     const debugTreeView = ref(false);
 
@@ -425,6 +455,8 @@ export default defineComponent({
         return;
       }
       const { response } = await api.recipes.createOne({ name });
+      // TODO createOne claims to return a Recipe, but actually the API only returns a string
+      // @ts-ignore
       handleResponse(response, true);
     }
 
@@ -467,6 +499,8 @@ export default defineComponent({
     }
 
     return {
+      tab,
+      recipeUrl,
       bulkCreate,
       bulkUrls,
       lockBulkImport,
@@ -490,30 +524,6 @@ export default defineComponent({
       title: this.$t("general.create") as string,
     };
   },
-  // Computed State is used because of the limitation of vue-composition-api in v2.0
-  computed: {
-    tab: {
-      set(tab) {
-        // @ts-ignore
-        this.$router.replace({ query: { ...this.$route.query, tab } });
-      },
-      get() {
-        // @ts-ignore
-        return this.$route.query.tab;
-      },
-    },
-    recipeUrl: {
-      set(recipe_import_url) {
-        // @ts-ignore
-        recipe_import_url = recipe_import_url.trim()
-        this.$router.replace({ query: { ...this.$route.query, recipe_import_url } });
-      },
-      get() {
-        // @ts-ignore
-        return this.$route.query.recipe_import_url;
-      },
-    },
-  },
 });
 </script>
 

frontend/pages/register.vue

@@ -104,6 +104,7 @@ import { validators } from "@/composables/use-validators";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
 import { useRouterQuery } from "@/composables/use-router";
+import { VForm} from "~/types/vuetify";
 
 export default defineComponent({
   layout: "basic",
@@ -179,4 +180,4 @@ export default defineComponent({
     };
   },
 });
-</script>
+</script>

frontend/pages/shared/recipes/_id.vue

@@ -325,11 +325,11 @@ export default defineComponent({
       if (data) {
         if (data && data !== undefined) {
           console.log("Computed Meta. RefKey=");
-          const imageURL = recipeImage(data.slug);
+          const imageURL = data.slug ? recipeImage(data.slug) : undefined;
           title.value = data.name;
 
           meta.value = [
-            { hid: "og:title", property: "og:title", content: data.name },
+            { hid: "og:title", property: "og:title", content: data.name ?? "" },
             // @ts-ignore
             {
               hid: "og:desc",
@@ -339,7 +339,7 @@ export default defineComponent({
             {
               hid: "og-image",
               property: "og:image",
-              content: imageURL,
+              content: imageURL ?? "",
             },
             // @ts-ignore
             {
@@ -360,7 +360,6 @@ export default defineComponent({
       }
     });
 
-    // @ts-ignore
     const { $vuetify } = useContext();
 
     const enableLandscape = computed(() => {
@@ -400,9 +399,8 @@ export default defineComponent({
   head: {},
   computed: {
     imageHeight() {
-      // @ts-ignore
       return this.$vuetify.breakpoint.xs ? "200" : "400";
     },
   },
 });
-</script>
+</script>

frontend/pages/user/group/data/migrations.vue

@@ -79,7 +79,6 @@ const MIGRATIONS = {
 
 export default defineComponent({
   setup() {
-    // @ts-ignore
     const { $globals } = useContext();
 
     const api = useUserApi();
@@ -303,4 +302,4 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-</style>
+</style>

frontend/pages/user/group/data/recipes.vue

@@ -152,7 +152,7 @@
     </section>
   </v-container>
 </template>
-    
+
 <script lang="ts">
 import { defineComponent, reactive, ref, useContext, onMounted } from "@nuxtjs/composition-api";
 import RecipeDataTable from "~/components/Domain/Recipe/RecipeDataTable.vue";
@@ -176,7 +176,6 @@ export default defineComponent({
   setup() {
     const { getAllRecipes, refreshRecipes } = useRecipes(true, true);
 
-    // @ts-ignore
     const { $globals } = useContext();
 
     const selected = ref<Recipe[]>([]);
@@ -272,7 +271,7 @@ export default defineComponent({
     async function exportSelected() {
       loading.value = true;
       const { data } = await api.bulk.bulkExport({
-        recipes: selected.value.map((x: Recipe) => x.slug),
+        recipes: selected.value.map((x: Recipe) => x.slug ?? ""),
         exportType: "json",
       });
 
@@ -289,7 +288,7 @@ export default defineComponent({
     async function tagSelected() {
       loading.value = true;
 
-      const recipes = selected.value.map((x: Recipe) => x.slug);
+      const recipes = selected.value.map((x: Recipe) => x.slug ?? "");
       await api.bulk.bulkTag({ recipes, tags: toSetTags.value });
       await refreshRecipes();
       resetAll();
@@ -300,7 +299,7 @@ export default defineComponent({
     async function categorizeSelected() {
       loading.value = true;
 
-      const recipes = selected.value.map((x: Recipe) => x.slug);
+      const recipes = selected.value.map((x: Recipe) => x.slug ?? "");
       await api.bulk.bulkCategorize({ recipes, categories: toSetCategories.value });
       await refreshRecipes();
       resetAll();
@@ -309,7 +308,7 @@ export default defineComponent({
     async function deleteSelected() {
       loading.value = true;
 
-      const recipes = selected.value.map((x: Recipe) => x.slug);
+      const recipes = selected.value.map((x: Recipe) => x.slug ?? "");
 
       const { response, data } = await api.bulk.bulkDelete({ recipes });
 
@@ -327,6 +326,7 @@ export default defineComponent({
       title: "Tag Recipes",
       mode: MODES.tag,
       tag: "",
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
       callback: () => {},
       icon: $globals.icons.tags,
     });
@@ -389,4 +389,4 @@ export default defineComponent({
     };
   },
 });
-</script>
+</script>

frontend/pages/user/group/data/reports/_id.vue

@@ -30,7 +30,7 @@
   </v-container>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent, useRoute, reactive, toRefs, onMounted } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 
@@ -73,4 +73,4 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-</style>
+</style>

frontend/pages/user/profile/api-tokens.vue

@@ -62,10 +62,11 @@
     </section>
   </v-container>
 </template>
-    
+
 <script lang="ts">
 import { computed, defineComponent, useContext, ref } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
+import { VForm } from "~/types/vuetify";
 
 export default defineComponent({
   setup() {
@@ -125,4 +126,4 @@ export default defineComponent({
   },
 });
 </script>
-    
+

frontend/pages/user/profile/edit.vue

@@ -110,11 +110,12 @@
     </section>
   </v-container>
 </template>
-    
+
 <script lang="ts">
 import { ref, reactive, defineComponent, computed, useContext, watch } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
+import { VForm } from "~/types/vuetify";
 
 export default defineComponent({
   components: {
@@ -179,4 +180,4 @@ export default defineComponent({
   },
 });
 </script>
-    
+