markdown support in ingredients

frontend/src/components/Recipe/RecipeCard.vue

@@ -26,8 +26,6 @@
       </v-card-title>
 
       <v-card-actions class="">
-        <v-row dense align="center">
-          <v-col>
         <v-rating
           class="mr-2"
           color="secondary"
@@ -37,10 +35,7 @@
           size="15"
           :value="rating"
         ></v-rating>
-          </v-col>
+        <v-spacer></v-spacer>
-          <v-col></v-col>
-          <v-col align="end"> </v-col>
-        </v-row>
       </v-card-actions>
     </v-card>
   </v-hover>
@@ -55,6 +50,7 @@ export default {
     description: String,
     rating: Number,
     image: String,
+
     route: {
       default: true,
     },

frontend/src/components/Recipe/RecipeViewer/Ingredients.vue

@@ -5,20 +5,30 @@
       v-for="(ingredient, index) in ingredients"
       :key="generateKey('ingredient', index)"
     >
+      <v-card flat>
+        <v-card-text class="text-subtitle-1">
+          <v-row class="flex row ">
             <v-checkbox
               hide-details
-        class="ingredients"
+              class=" pt-0 ingredients my-auto py-auto"
-        :label="ingredient"
               color="secondary"
             >
             </v-checkbox>
+            <vue-markdown class="my-auto" :source="ingredient"> </vue-markdown>
+          </v-row>
+        </v-card-text>
+      </v-card>
     </div>
   </div>
 </template>
 
 <script>
+import VueMarkdown from "@adapttive/vue-markdown";
 import utils from "@/utils";
 export default {
+  components: {
+    VueMarkdown,
+  },
   props: {
     ingredients: Array,
   },
@@ -31,4 +41,7 @@ export default {
 </script>
 
 <style>
+p {
+  margin-bottom: auto !important;
+}
 </style>

frontend/src/components/UI/CardSection.vue

@@ -99,6 +99,11 @@ export default {
       default: 999,
     },
   },
+  watch: {
+    recipes() {
+      console.log(this.recipes);
+    },
+  },
   computed: {
     viewScale() {
       switch (this.$vuetify.breakpoint.name) {