potentially fixed ingredient render component

vue3/src/components/display/Instructions.vue

@@ -1,6 +1,6 @@
 <template>
-<!--    <component :is="compiled_instructions" :ingredient_factor="ingredient_factor" :instructions_html="instructions_html"></component>-->
+    <component :is="compiled_instructions" :ingredient_factor="ingredient_factor" :instructions_html="instructions_html"></component>
-    <div v-html="instructions_html"></div>
+<!--    <div v-html="instructions_html"></div>-->
 </template>
 
 <script>

vue3/src/components/display/ScalableNumber.vue

@@ -1,25 +1,27 @@
 <template>
-  <span class="step__scalable-num" :class="[this.factor===1 ? 'step__scalable-num_scaled_false' : (this.factor > 1 ? 'step__scalable-num_scaled_up':'step__scalable-num_scaled_down')]" v-html="calculateAmount(number)"></span>
+    <span class="step__scalable-num"
+          :class="[props.factor===1 ? 'step__scalable-num_scaled_false' : (props.factor > 1 ? 'step__scalable-num_scaled_up':'step__scalable-num_scaled_down')]"
+          v-html="calculateAmount(number)"></span>
 </template>
 
-<script>
+<script lang="ts" setup>
 
+const props = defineProps({
+    number: Number,
+    factor: {
+        type: Number,
+        default: 4
+    },
+})
 
 import {calculateFoodAmount} from "@/utils/number_utils.ts";
 
-export default {
+/**
-  name: 'ScalableNumber',
+ * call external calculateFoodAmount function
-  props: {
+ * @param x
-    number: Number,
+ * @return {number | string}
-    factor: {
+ */
-      type: Number,
+function calculateAmount(x) {
-      default: 4
+    return calculateFoodAmount(x, props.factor) // TODO reactive bind props
-    },
-  },
-  methods: {
-    calculateAmount: function (x) {
-      return calculateFoodAmount(x, this.factor)
-    }
-  }
 }
 </script>

vue3/src/components/inputs/GlobalSearchDialog.vue

@@ -51,6 +51,7 @@
 
             </v-card-text>
             <v-card-actions>
+                <v-btn @click="dialog=false"  :to="{name: 'view_search'}" variant="plain" prepend-icon="$search">{{ $t('Advanced') }}</v-btn>
                 <v-btn @click="dialog=false" variant="plain">{{ $t('Close') }}</v-btn>
             </v-card-actions>
         </v-card>

vue3/vite.config.ts

@@ -17,7 +17,8 @@ export default defineConfig({
     ],
     resolve: {
         alias: {
-            '@': fileURLToPath(new URL('./src', import.meta.url))
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
+            vue: fileURLToPath(new URL("./node_modules/vue/dist/vue.esm-bundler.js", import.meta.url)),
         },
         extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue',],
     },