diff --git a/cookbook/helper/template_helper.py b/cookbook/helper/template_helper.py
index 48c6aa9f..e88e7548 100644
--- a/cookbook/helper/template_helper.py
+++ b/cookbook/helper/template_helper.py
@@ -16,7 +16,7 @@ class IngredientObject(object):
         if ingredient.no_amount:
             self.amount = ""
         else:
-            self.amount = f'[[calculateAmount({ingredient.amount})]]'
+            self.amount = f"<scalable-number v-bind:number='{ingredient.amount}' v-bind:factor='servings'></scalable-number>"
         if ingredient.unit:
             self.unit = ingredient.unit
         else:
@@ -32,17 +32,7 @@ class IngredientObject(object):
 
 
 def render_instructions(step):  # TODO deduplicate markdown cleanup code
-
-    ingredients = []
-
-    for i in step.ingredients.all():
-        ingredients.append(IngredientObject(i))
-
-    try:
-        template = Template(step.instruction)
-        instructions = template.render(ingredients=ingredients)
-    except TemplateSyntaxError:
-        instructions = step.instruction
+    instructions = step.instruction
 
     tags = markdown_tags + [
         'pre', 'table', 'td', 'tr', 'th', 'tbody', 'style', 'thead'
@@ -56,4 +46,17 @@ def render_instructions(step):  # TODO deduplicate markdown cleanup code
     )
     markdown_attrs['*'] = markdown_attrs['*'] + ['class']
 
-    return bleach.clean(parsed_md, tags, markdown_attrs)
+    instructions = bleach.clean(parsed_md, tags, markdown_attrs)
+
+    ingredients = []
+
+    for i in step.ingredients.all():
+        ingredients.append(IngredientObject(i))
+
+    try:
+        template = Template(instructions)
+        instructions = template.render(ingredients=ingredients)
+    except TemplateSyntaxError:
+        pass
+
+    return instructions
diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index 9da52d5f..d2b6bf13 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -158,11 +158,15 @@ class IngredientSerializer(WritableNestedModelSerializer):
 
 class StepSerializer(WritableNestedModelSerializer):
     ingredients = IngredientSerializer(many=True)
+    ingredients_markdown = serializers.SerializerMethodField('get_ingredients_markdown')
+
+    def get_ingredients_markdown(self, obj):
+        return obj.get_instruction_render()
 
     class Meta:
         model = Step
         fields = (
-            'id', 'name', 'type', 'instruction', 'ingredients',
+            'id', 'name', 'type', 'instruction', 'ingredients', 'ingredients_markdown',
             'time', 'order', 'show_as_header'
         )
 
diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 5186dedb..264df13b 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -34,7 +34,7 @@
               <div class="col col-md-3">
                 <div class="input-group d-print-none">
                   <input type="number" value="1" maxlength="3" class="form-control" style="min-width: 2vw"
-                         v-model="servings"/>
+                         v-model.number="servings"/>
                   <div class="input-group-append">
                     <span class="input-group-text"><i class="fas fa-calculator"></i></span>
                   </div>
@@ -68,10 +68,14 @@
       </div>
     </div>
 
+    <!--TODO timers -->
     <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
       <Step v-bind:step="s" v-bind:servings="servings" v-bind:index="index"></Step>
     </div>
 
+
+    <!--TODO Comments -->
+
   </div>
 </template>
 
@@ -88,6 +92,8 @@ import RecipeContextMenu from "@/components/RecipeContextMenu";
 import {GettextMixin, ToastMixin} from "@/utils/utils";
 import Ingredient from "@/components/Ingredient";
 
+import ScalableNumber from "@/components/ScalableNumber";
+
 Vue.use(BootstrapVue)
 
 export default {
@@ -100,6 +106,7 @@ export default {
     Ingredient,
     Step,
     RecipeContextMenu,
+    ScalableNumber, // eslint-disable-line
   },
   data() {
     return {
diff --git a/vue/src/components/CompileComponent.vue b/vue/src/components/CompileComponent.vue
new file mode 100644
index 00000000..7a14335b
--- /dev/null
+++ b/vue/src/components/CompileComponent.vue
@@ -0,0 +1,42 @@
+<template>
+
+  <div>
+    <component :is="compiled" :servings="servings"></component>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+
+import ScalableNumber from "@/components/ScalableNumber";
+
+var res = Vue.compile('<div><span>{{servings}}  Test <scalable-number v-bind:number="2" :factor="servings"></scalable-number></span></div>')
+
+export default {
+  name: 'CompileComponent',
+  props: ['code', 'servings'],
+  data() {
+    return {
+      compiled: null,
+      test: '<div><span>{{servings}}  Test <scalable-number v-bind:number="2" :factor="servings"></scalable-number></span></div>'
+    }
+  },
+  components: {
+    ScalableNumber, // eslint-disable-line
+  },
+  mounted() {
+    setTimeout(() => {
+      this.compiled = Vue.component('button-counter', {
+        props: ['servings'],
+        data: function () {
+          return {
+            count: 0
+          }
+        },
+        template: '<button v-on:click="count++">You clicked me {{ servings }} times.</button>'
+      })
+    }, 500)
+
+  }
+}
+</script>
diff --git a/vue/src/components/ScalableNumber.vue b/vue/src/components/ScalableNumber.vue
new file mode 100644
index 00000000..8761b9d7
--- /dev/null
+++ b/vue/src/components/ScalableNumber.vue
@@ -0,0 +1,25 @@
+<template>
+  <p>{{ calculateAmount(number) }}</p>
+</template>
+
+<script>
+
+import {calculateAmount} from "@/utils/utils";
+
+export default {
+  name: 'ScalableNumber',
+  props: {
+    number: Number,
+    factor: {
+      type: Number,
+      default: 4
+    },
+  },
+  methods: {
+    calculateAmount: function (x) {
+      console.log("calculated amount")
+      return calculateAmount(x, this.factor)
+    }
+  }
+}
+</script>
diff --git a/vue/src/components/Step.vue b/vue/src/components/Step.vue
index 658ea42c..d7ce5ac4 100644
--- a/vue/src/components/Step.vue
+++ b/vue/src/components/Step.vue
@@ -4,7 +4,7 @@
 
     <h5 class="text-secondary">
       <template v-if="step.name">{{ step.name }}</template>
-      <template v-else>{{ _('Step') }} {{index + 1}}</template>
+      <template v-else>{{ _('Step') }} {{ index + 1 }}</template>
     </h5>
 
     <div class="row">
@@ -16,25 +16,32 @@
           <div v-for="i in step.ingredients" v-bind:key="i.id">
             <Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
           </div>
-
         </table>
       </div>
 
       <div class="col-md-9">
         <i class="fas fa-paragraph text-secondary"></i>
-        {{ step.instruction }}
+        <span v-html="step.ingredients_markdown">
+
+        </span>
+
+         <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
       </div>
     </div>
 
-
   </div>
 
 </template>
 
 <script>
 
+import {calculateAmount} from "@/utils/utils";
+
 import Ingredient from "@/components/Ingredient";
 import {GettextMixin} from "@/utils/utils";
+import ScalableNumber from "@/components/ScalableNumber";
+
+import CompileComponent from "@/components/CompileComponent";
 
 export default {
   name: 'Step',
@@ -43,11 +50,22 @@ export default {
   ],
   components: {
     Ingredient,
+    CompileComponent, //eslint-disable-line
+    ScalableNumber, // eslint-disable-line
   },
   props: {
     step: Object,
     servings: Number,
     index: Number,
+  },
+  mounted() {
+
+  },
+  methods: {
+    calculateAmount: function (x) {
+      // used by the jinja2 template
+      return calculateAmount(x, this.servings)
+    }
   }
 }
 </script>
diff --git a/vue/vue.config.js b/vue/vue.config.js
index 73e0543a..6925020e 100644
--- a/vue/vue.config.js
+++ b/vue/vue.config.js
@@ -15,7 +15,7 @@ module.exports = {
         ? ''
         : 'http://localhost:8080/',
     outputDir: '../cookbook/static/vue/',
-
+    runtimeCompiler: true,
     chainWebpack: config => {
 
         config.optimization
diff --git a/vue/webpack-stats.json b/vue/webpack-stats.json
index 00784bbf..8abe5ca4 100644
--- a/vue/webpack-stats.json
+++ b/vue/webpack-stats.json
@@ -1 +1 @@
-{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.e165d99965cf62182119.hot-update.js","publicPath":"http://localhost:8080/recipe_view.e165d99965cf62182119.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.e165d99965cf62182119.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Step.vue\n  22:37  error  Parsing error: duplicate-attribute  vue/no-parsing-error\n  22:37  error  Duplicate attribute 'class'         vue/no-duplicate-attributes\n\n✖ 2 problems (2 errors, 0 warnings)\n"}
\ No newline at end of file
+{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.6895bd28654af90f46e1.hot-update.js","publicPath":"http://localhost:8080/recipe_view.6895bd28654af90f46e1.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.6895bd28654af90f46e1.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\CompileComponent.vue\n  1:1  error  The template requires child element  vue/valid-template-root\n\n✖ 1 problem (1 error, 0 warnings)\n"}
\ No newline at end of file