diff --git a/.gitignore b/.gitignore
index b0c415482056..e356f2f9db67 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,6 +9,7 @@ mealie/temp/*
 mealie/temp/api.html
 .temp/
 .secret
+!*/components/Recipe/Parts
 
 dev/data/backups/*
 dev/data/debug/*
diff --git a/frontend/src/components/Recipe/Parts/Assets.vue b/frontend/src/components/Recipe/Parts/Assets.vue
new file mode 100644
index 000000000000..65d4ec0ae992
--- /dev/null
+++ b/frontend/src/components/Recipe/Parts/Assets.vue
@@ -0,0 +1,160 @@
+<template>
+  <div v-if="value.length > 0 || edit">
+    <v-card class="mt-2">
+      <v-card-title class="py-2">
+        {{ $t("recipe.assets") }}
+      </v-card-title>
+      <v-divider class="mx-2"></v-divider>
+      <v-list :flat="!edit" v-if="value.length > 0">
+        <v-list-item v-for="(item, i) in value" :key="i">
+          <v-list-item-icon class="ma-auto">
+            <v-icon v-text="item.icon"></v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title
+              class="pl-2"
+              v-text="item.name"
+            ></v-list-item-title>
+          </v-list-item-content>
+          <v-list-item-action>
+            <v-btn
+              v-if="!edit"
+              color="primary"
+              icon
+              :href="`/api/recipes/${slug}/asset?file_name=${item.fileName}`"
+              target="_blank"
+              top
+            >
+              <v-icon> mdi-download</v-icon>
+            </v-btn>
+            <v-btn v-else color="error" icon @click="deleteAsset(i)" top>
+              <v-icon>mdi-delete</v-icon>
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item>
+      </v-list>
+    </v-card>
+    <div class="d-flex ml-auto mt-2">
+      <v-spacer></v-spacer>
+      <base-dialog
+        @submit="addAsset"
+        title="New Asset"
+        :title-icon="newAsset.icon"
+      >
+        <template v-slot:open="{ open }">
+          <v-btn color="secondary" dark @click="open" v-if="edit">
+            <v-icon>mdi-plus</v-icon>
+          </v-btn>
+        </template>
+        <v-card-text class="pt-2">
+          <v-text-field
+            dense
+            v-model="newAsset.name"
+            :label="$t('general.name')"
+          ></v-text-field>
+          <div class="d-flex justify-space-between">
+            <v-select
+              dense
+              :prepend-icon="newAsset.icon"
+              v-model="newAsset.icon"
+              :items="iconOptions"
+              class="mr-2"
+            >
+              <template v-slot:item="{ item }">
+                <v-list-item-avatar>
+                  <v-icon class="mr-auto">
+                    {{ item }}
+                  </v-icon>
+                </v-list-item-avatar>
+                {{ item }}
+              </template>
+            </v-select>
+            <TheUploadBtn
+              @uploaded="setFileObject"
+              :post="false"
+              file-name="file"
+              :text-btn="false"
+            />
+          </div>
+          {{ fileObject.name }}
+        </v-card-text>
+      </base-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
+import BaseDialog from "@/components/UI/Dialogs/BaseDialog";
+import { api } from "@/api";
+export default {
+  components: {
+    BaseDialog,
+    TheUploadBtn,
+  },
+  props: {
+    slug: String,
+    value: {
+      type: Array,
+    },
+    edit: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      fileObject: {},
+      newAsset: {
+        name: "",
+        icon: "mdi-file",
+      },
+      iconOptions: [
+        "mdi-file",
+        "mdi-file-pdf-box",
+        "mdi-file-image",
+        "mdi-code-json",
+        "mdi-silverware-fork-knife",
+      ],
+      menu: [
+        {
+          title: "Link 1",
+          icon: "mdi-file",
+          action: "Do Something",
+        },
+        {
+          title: "Link 1",
+          icon: "mdi-file",
+          action: "Do Something",
+        },
+        {
+          title: "Link 1",
+          icon: "mdi-file",
+          action: "Do Something",
+        },
+      ],
+    };
+  },
+  methods: {
+    setFileObject(obj) {
+      this.fileObject = obj;
+    },
+    async addAsset() {
+      const serverAsset = await api.recipes.createAsset(
+        this.slug,
+        this.fileObject,
+        this.newAsset.name,
+        this.newAsset.icon
+      );
+      this.value.push(serverAsset.data);
+      this.newAsset = { name: "", icon: "mdi-file" };
+    },
+    deleteAsset(index) {
+      this.value.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Recipe/Parts/Helpers/BulkAdd.vue b/frontend/src/components/Recipe/Parts/Helpers/BulkAdd.vue
new file mode 100644
index 000000000000..aba3835c53b3
--- /dev/null
+++ b/frontend/src/components/Recipe/Parts/Helpers/BulkAdd.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="600">
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn
+        
+          color="secondary lighten-2"
+          dark
+          v-bind="attrs"
+          v-on="on"
+          @click="inputText = ''"
+        >
+          {{$t('new-recipe.bulk-add')}}
+        </v-btn>
+      </template>
+
+      <v-card>
+        <v-card-title class="headline"> {{$t('new-recipe.bulk-add')}} </v-card-title>
+
+        <v-card-text>
+          <p>
+            {{$t('new-recipe.paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list')}}
+          </p>
+          <v-textarea v-model="inputText"> </v-textarea>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="success" text @click="save"> {{$t('general.save')}} </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dialog: false,
+      inputText: "",
+    };
+  },
+  methods: {
+    splitText() {
+      let split = this.inputText.split("\n");
+
+      split.forEach((element, index) => {
+        if ((element === "\n") | (element == false)) {
+          split.splice(index, 1);
+        }
+      });
+
+      return split;
+    },
+    save() {
+      this.$emit("bulk-data", this.splitText());
+      this.dialog = false;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/frontend/src/components/Recipe/Parts/Helpers/ExtrasEditor.vue b/frontend/src/components/Recipe/Parts/Helpers/ExtrasEditor.vue
new file mode 100644
index 000000000000..6acf9165b076
--- /dev/null
+++ b/frontend/src/components/Recipe/Parts/Helpers/ExtrasEditor.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="700">
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn color="accent" dark v-bind="attrs" v-on="on"> {{ $t("recipe.api-extras") }} </v-btn>
+      </template>
+
+      <v-card>
+        <v-card-title> {{ $t("recipe.api-extras") }} </v-card-title>
+
+        <v-card-text :key="formKey">
+          <v-row
+            align="center"
+            v-for="(value, key, index) in extras"
+            :key="index"
+          >
+            <v-col cols="12" sm="1">
+              <v-btn
+                fab
+                text
+                x-small
+                color="white"
+                elevation="0"
+                @click="removeExtra(key)"
+              >
+                <v-icon color="error">mdi-delete</v-icon>
+              </v-btn>
+            </v-col>
+            <v-col cols="12" md="3" sm="6">
+              <v-text-field
+                :label="$t('recipe.object-key')"
+                :value="key"
+                @input="updateKey(index)"
+              >
+              </v-text-field>
+            </v-col>
+            <v-col cols="12" md="8" sm="6">
+              <v-text-field :label="$t('recipe.object-value')" v-model="extras[key]">
+              </v-text-field>
+            </v-col>
+          </v-row>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions>
+          <v-form ref="addKey">
+            <v-text-field
+              :label="$t('recipe.new-key-name')"
+              v-model="newKeyName"
+              class="pr-4"
+              :rules="[rules.required, rules.whiteSpace]"
+            ></v-text-field>
+          </v-form>
+          <v-btn color="info" text @click="append"> {{ $t("recipe.add-key") }} </v-btn>
+
+          <v-spacer></v-spacer>
+
+          <v-btn color="success" text @click="save"> {{ $t("general.save") }} </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    extras: Object,
+  },
+  data() {
+    return {
+      newKeyName: null,
+      dialog: false,
+      formKey: 1,
+      rules: {
+        required: (v) => !!v || this.$i18n.t("recipe.key-name-required"),
+        whiteSpace: (v) =>
+          !v || v.split(" ").length <= 1 || this.$i18n.t("recipe.no-white-space-allowed"),
+      },
+    };
+  },
+
+  methods: {
+    save() {
+      this.$emit("save", this.extras);
+      this.dialog = false;
+    },
+    append() {
+      if (this.$refs.addKey.validate()) {
+        this.extras[this.newKeyName] = "value";
+        this.formKey += 1;
+      }
+    },
+    removeExtra(key) {
+      delete this.extras[key];
+      this.formKey += 1;
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Recipe/Parts/Helpers/ImageUploadBtn.vue b/frontend/src/components/Recipe/Parts/Helpers/ImageUploadBtn.vue
new file mode 100644
index 000000000000..5f8f5483aa0e
--- /dev/null
+++ b/frontend/src/components/Recipe/Parts/Helpers/ImageUploadBtn.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="text-center">
+    <v-menu offset-y top nudge-top="6" :close-on-content-click="false">
+      <template v-slot:activator="{ on, attrs }">
+        <v-btn color="accent" dark v-bind="attrs" v-on="on">
+          <v-icon left>
+            mdi-image
+          </v-icon>
+          {{ $t("recipe.image") }}
+        </v-btn>
+      </template>
+      <v-card width="400">
+        <v-card-title class="headline flex mb-0">
+          <div>
+            {{ $t("recipe.recipe-image") }}
+          </div>
+          <TheUploadBtn
+            class="ml-auto"
+            url="none"
+            file-name="image"
+            :text-btn="false"
+            @uploaded="uploadImage"
+            :post="false"
+          />
+        </v-card-title>
+        <v-card-text class="mt-n5">
+          <div>
+            <v-text-field
+              :label="$t('general.url')"
+              class="pt-5"
+              clearable
+              v-model="url"
+            >
+              <template v-slot:append-outer>
+                <v-btn
+                  class="ml-2"
+                  color="primary"
+                  @click="getImageFromURL"
+                  :loading="loading"
+                >
+                  {{ $t("general.get") }}
+                </v-btn>
+              </template>
+            </v-text-field>
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-menu>
+  </div>
+</template>
+
+<script>
+const REFRESH_EVENT = "refresh";
+const UPLOAD_EVENT = "upload";
+import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
+import { api } from "@/api";
+export default {
+  components: {
+    TheUploadBtn,
+  },
+  props: {
+    slug: String,
+  },
+  data: () => ({
+    url: "",
+    loading: false,
+  }),
+  methods: {
+    uploadImage(fileObject) {
+      this.$emit(UPLOAD_EVENT, fileObject);
+    },
+    async getImageFromURL() {
+      this.loading = true;
+      const response = await api.recipes.updateImagebyURL(this.slug, this.url);
+      if (response) this.$emit(REFRESH_EVENT);
+      this.loading = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/frontend/src/components/Recipe/Parts/Ingredients.vue b/frontend/src/components/Recipe/Parts/Ingredients.vue
new file mode 100644
index 000000000000..b1a8c8fe138e
--- /dev/null
+++ b/frontend/src/components/Recipe/Parts/Ingredients.vue
@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
+    <div v-if="edit">
+      <draggable
+        :value="value"
+        @input="updateIndex"
+        @start="drag = true"
+        @end="drag = false"
+        handle=".handle"
+      >
+        <transition-group type="transition" :name="!drag ? 'flip-list' : null">
+          <div
+            v-for="(ingredient, index) in value"
+            :key="generateKey('ingredient', index)"
+          >
+            <v-row align="center">
+              <v-textarea
+                class="mr-2"
+                :label="$t('recipe.ingredient')"
+                v-model="value[index]"
+                mdi-move-resize
+                auto-grow
+                solo
+                dense
+                rows="1"
+              >
+                <template slot="append-outer">
+                  <v-icon class="handle">mdi-arrow-up-down</v-icon>
+                </template>
+                <v-icon
+                  class="mr-n1"
+                  slot="prepend"
+                  color="error"
+                  @click="removeByIndex(value, index)"
+                >
+                  mdi-delete
+                </v-icon>
+              </v-textarea>
+            </v-row>
+          </div>
+        </transition-group>
+      </draggable>
+
+      <div class="d-flex row justify-end">
+        <BulkAdd @bulk-data="addIngredient" class="mr-2" />
+        <v-btn color="secondary" dark @click="addIngredient" class="mr-4">
+          <v-icon>mdi-plus</v-icon>
+        </v-btn>
+      </div>
+    </div>
+    <div v-else>
+      <v-list-item
+        dense
+        v-for="(ingredient, index) in value"
+        :key="generateKey('ingredient', index)"
+        @click="toggleChecked(index)"
+      >
+        <v-checkbox
+          hide-details
+          :value="checked[index]"
+          class="pt-0 my-auto py-auto"
+          color="secondary"
+        >
+        </v-checkbox>
+
+        <v-list-item-content>
+          <vue-markdown
+            class="ma-0 pa-0 text-subtitle-1 dense-markdown"
+            :source="ingredient"
+          >
+          </vue-markdown>
+        </v-list-item-content>
+      </v-list-item>
+    </div>
+  </div>
+</template>
+
+<script>
+import BulkAdd from "@/components/Recipe/Parts/Helpers/BulkAdd";
+import VueMarkdown from "@adapttive/vue-markdown";
+import draggable from "vuedraggable";
+import utils from "@/utils";
+export default {
+  components: {
+    BulkAdd,
+    draggable,
+    VueMarkdown,
+  },
+  props: {
+    value: {
+      type: Array,
+    },
+
+    edit: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      drag: false,
+      checked: [],
+    };
+  },
+  mounted() {
+    this.checked = this.value.map(() => false);
+  },
+  methods: {
+    addIngredient(ingredients = null) {
+      if (ingredients.length) {
+        this.value.push(...ingredients);
+      } else {
+        this.value.push("");
+      }
+    },
+    generateKey(item, index) {
+      return utils.generateUniqueKey(item, index);
+    },
+    updateIndex(data) {
+      this.$emit("input", data);
+    },
+    toggleChecked(index) {
+      this.$set(this.checked, index, !this.checked[index]);
+    },
+    removeByIndex(list, index) {
+      list.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style >
+.dense-markdown p {
+  margin: auto !important;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Recipe/Parts/Instructions.vue b/frontend/src/components/Recipe/Parts/Instructions.vue
new file mode 100644
index 000000000000..9b222d5bb5e8
--- /dev/null
+++ b/frontend/src/components/Recipe/Parts/Instructions.vue
@@ -0,0 +1,148 @@
+<template>
+  <div>
+    <h2 class="mb-4">{{ $t("recipe.instructions") }}</h2>
+    <div>
+      <div v-for="(step, index) in value" :key="index">
+        <v-app-bar
+          v-if="showTitleEditor[index]"
+          class="primary mx-1 mt-6"
+          dark
+          dense
+          rounded
+        >
+          <v-toolbar-title class="headline" v-if="!edit">
+            <v-app-bar-title v-text="step.title"> </v-app-bar-title>
+          </v-toolbar-title>
+          <v-text-field
+            v-if="edit"
+            class="headline pa-0 mt-5"
+            v-model="step.title"
+            dense
+            solo
+            flat
+            placeholder="Section Title"
+            background-color="primary"
+          >
+          </v-text-field>
+        </v-app-bar>
+        <v-hover v-slot="{ hover }">
+          <v-card
+            class="ma-1"
+            :class="[{ 'on-hover': hover }, isDisabled(index)]"
+            :elevation="hover ? 12 : 2"
+            :ripple="!edit"
+            @click="toggleDisabled(index)"
+          >
+            <v-card-title>
+              <v-btn
+                v-if="edit"
+                fab
+                x-small
+                color="white"
+                class="mr-2"
+                elevation="0"
+                @click="removeByIndex(value, index)"
+              >
+                <v-icon size="24" color="error">mdi-delete</v-icon>
+              </v-btn>
+              {{ $t("recipe.step-index", { step: index + 1 }) }}
+              <v-btn
+                v-if="edit"
+                text
+                color="primary"
+                class="ml-auto"
+                @click="toggleShowTitle(index)"
+              >
+                {{
+                  !showTitleEditor[index] ? "Insert Section" : "Remove Section"
+                }}
+              </v-btn>
+            </v-card-title>
+            <v-card-text v-if="edit">
+              <v-textarea
+                auto-grow
+                dense
+                v-model="value[index]['text']"
+                :key="generateKey('instructions', index)"
+                rows="4"
+              >
+              </v-textarea>
+            </v-card-text>
+            <v-card-text v-else>
+              <vue-markdown :source="step.text"> </vue-markdown>
+            </v-card-text>
+          </v-card>
+        </v-hover>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueMarkdown from "@adapttive/vue-markdown";
+import utils from "@/utils";
+export default {
+  components: {
+    VueMarkdown,
+  },
+  props: {
+    value: {
+      type: Array,
+    },
+
+    edit: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      disabledSteps: [],
+      showTitleEditor: [],
+    };
+  },
+
+  mounted() {
+    this.showTitleEditor = this.value.map(x => this.validateTitle(x.title));
+  },
+  methods: {
+    generateKey(item, index) {
+      return utils.generateUniqueKey(item, index);
+    },
+    removeByIndex(list, index) {
+      list.splice(index, 1);
+    },
+    validateTitle(title) {
+      return !(title === null || title === "");
+    },
+    toggleDisabled(stepIndex) {
+      if (this.edit) return;
+      if (this.disabledSteps.includes(stepIndex)) {
+        let index = this.disabledSteps.indexOf(stepIndex);
+        if (index !== -1) {
+          this.disabledSteps.splice(index, 1);
+        }
+      } else {
+        this.disabledSteps.push(stepIndex);
+      }
+    },
+    isDisabled(stepIndex) {
+      if (this.disabledSteps.includes(stepIndex) && !this.edit) {
+        return "disabled-card";
+      } else {
+        return;
+      }
+    },
+    toggleShowTitle(index) {
+      const newVal = !this.showTitleEditor[index];
+      if (!newVal) {
+        this.value[index].title = "";
+      }
+      this.$set(this.showTitleEditor, index, newVal);
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Recipe/Parts/Notes.vue b/frontend/src/components/Recipe/Parts/Notes.vue
new file mode 100644
index 000000000000..2827f2482aba
--- /dev/null
+++ b/frontend/src/components/Recipe/Parts/Notes.vue
@@ -0,0 +1,87 @@
+<template>
+  <div v-if="value.length > 0 || edit">
+    <h2 class="my-4">{{ $t("recipe.note") }}</h2>
+    <v-card
+      class="mt-1"
+      v-for="(note, index) in value"
+      :key="generateKey('note', index)"
+    >
+      <div v-if="edit">
+        <v-card-text>
+          <v-row align="center">
+            <v-btn
+              fab
+              x-small
+              color="white"
+              class="mr-2"
+              elevation="0"
+              @click="removeByIndex(value, index)"
+            >
+              <v-icon color="error">mdi-delete</v-icon>
+            </v-btn>
+            <v-text-field
+              :label="$t('recipe.title')"
+              v-model="value[index]['title']"
+            ></v-text-field>
+          </v-row>
+
+          <v-textarea
+            auto-grow
+            :placeholder="$t('recipe.note')"
+            v-model="value[index]['text']"
+          >
+          </v-textarea>
+        </v-card-text>
+      </div>
+      <div v-else>
+        <v-card-title class="py-2">
+          {{ note.title }}
+        </v-card-title>
+        <v-divider class="mx-2"></v-divider>
+        <v-card-text>
+          <vue-markdown :source="note.text"> </vue-markdown>
+        </v-card-text>
+      </div>
+    </v-card>
+
+    <div class="d-flex justify-end" v-if="edit">
+      <v-btn class="mt-1" color="secondary" dark @click="addNote">
+        <v-icon>mdi-plus</v-icon>
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueMarkdown from "@adapttive/vue-markdown";
+import utils from "@/utils";
+export default {
+  components: {
+    VueMarkdown,
+  },
+  props: {
+    value: {
+      type: Array,
+    },
+
+    edit: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  methods: {
+    generateKey(item, index) {
+      return utils.generateUniqueKey(item, index);
+    },
+    addNote() {
+      this.value.push({ text: "" });
+    },
+    removeByIndex(list, index) {
+      list.splice(index, 1);
+    },
+  },
+};
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/Recipe/Parts/Nutrition.vue b/frontend/src/components/Recipe/Parts/Nutrition.vue
new file mode 100644
index 000000000000..9686913a1b6f
--- /dev/null
+++ b/frontend/src/components/Recipe/Parts/Nutrition.vue
@@ -0,0 +1,101 @@
+<template>
+  <div v-if="valueNotNull || edit">
+    <v-card class="mt-2">
+      <v-card-title class="py-2">
+        {{ $t("recipe.nutrition") }}
+      </v-card-title>
+      <v-divider class="mx-2"></v-divider>
+      <v-card-text v-if="edit">
+        <div v-for="(item, key, index) in value" :key="index">
+          <v-text-field
+            dense
+            :value="value[key]"
+            :label="labels[key].label"
+            :suffix="labels[key].suffix"
+            type="number"
+            autocomplete="off"
+            @input="updateValue(key, $event)"
+          ></v-text-field>
+        </div>
+      </v-card-text>
+      <v-list dense v-if="showViewer" class="mt-0 pt-0">
+        <v-list-item v-for="(item, key, index) in labels" :key="index">
+          <v-list-item-content>
+            <v-list-item-title class="pl-4 text-subtitle-1 flex row ">
+              <div>{{ item.label }}</div>
+              <div class="ml-auto mr-1">{{ value[key] }}</div>
+              <div>{{ item.suffix }}</div>
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {},
+    edit: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      labels: {
+        calories: {
+          label: this.$t("recipe.calories"),
+          suffix: this.$t("recipe.calories-suffix"),
+        },
+        fatContent: {
+          label: this.$t("recipe.fat-content"),
+          suffix: this.$t("recipe.grams"),
+        },
+        fiberContent: {
+          label: this.$t("recipe.fiber-content"),
+          suffix: this.$t("recipe.grams"),
+        },
+        proteinContent: {
+          label: this.$t("recipe.protein-content"),
+          suffix: this.$t("recipe.grams"),
+        },
+        sodiumContent: {
+          label: this.$t("recipe.sodium-content"),
+          suffix: this.$t("recipe.milligrams"),
+        },
+        sugarContent: {
+          label: this.$t("recipe.sugar-content"),
+          suffix: this.$t("recipe.grams"),
+        },
+        carbohydrateContent: {
+          label: this.$t("recipe.carbohydrate-content"),
+          suffix: this.$t("recipe.grams"),
+        },
+      },
+    };
+  },
+  computed: {
+    showViewer() {
+      return !this.edit && this.valueNotNull;
+    },
+    valueNotNull() {
+      for (const property in this.value) {
+        const valueProperty = this.value[property];
+        if (valueProperty && valueProperty !== "") return true;
+      }
+      return false;
+    },
+  },
+
+  methods: {
+    updateValue(key, value) {
+      this.$emit("input", { ...this.value, [key]: value });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file