working on a recipe view

vue/src/components/HelloWorld.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    {{ text }}
-  </div>
-</template>
-
-<script>
-import {myCustomTestFunction} from "@/utils";
-
-export default {
-  name: 'HelloWorld',
-  data() {
-    return {
-      text: ''
-    }
-  },
-  props: {
-    msg: String
-  },
-  mounted() {
-    this.text = myCustomTestFunction("Neuer Text")
-  }
-}
-</script>

vue/src/components/Ingredient.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <input type="checkbox">
+    {{ingredient.amount}}
+    {{ingredient.unit}}
+    {{ingredient.food}}
+    {{ingredient.note}}
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Ingredient',
+  props: {
+    ingredient: Object,
+    servings: Number
+  }
+}
+</script>

vue/src/components/Step.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+
+    <div v-for="i in step.ingredients" v-bind:key="i.id">
+      <Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
+    </div>
+
+    <br/>
+
+    Servings Step: {{servings}}
+
+    {{ step.instruction }}
+
+    <br/>
+    <br/>
+  </div>
+
+</template>
+
+<script>
+
+import Ingredient from "@/components/Ingredient";
+
+export default {
+  name: 'Step',
+  components: {
+    Ingredient
+  },
+  props: {
+    step: Object,
+    servings: Number,
+  }
+}
+</script>

vue/src/components/ToastComponent.vue

@@ -1,27 +0,0 @@
-<template>
-
-</template>
-
-<script>
-import Vue from 'vue'
-
-import {BootstrapVue} from 'bootstrap-vue'
-
-Vue.use(BootstrapVue)
-
-export default {
-  name: "ToastComponent",
-  methods: {
-    this.$bvToast.toast(message, {
-      title: title,
-      variant: variant,
-      toaster: 'b-toaster-top-center',
-      solid: true
-    })
-  }
-}
-</script>
-
-<style scoped>
-
-</style>