diff --git a/cookbook/serializer.py b/cookbook/serializer.py
index 19582969..d3c5d032 100644
--- a/cookbook/serializer.py
+++ b/cookbook/serializer.py
@@ -34,8 +34,7 @@ class ExtendedRecipeMixin(serializers.ModelSerializer):
         except KeyError:
             api_serializer = None
         # extended values are computationally expensive and not needed in normal circumstances
-        # another choice is to only return the fields when self.__class__ = serializer and not worry about 'extended'
-        if self.context['request'] and bool(int(self.context['request'].query_params.get('extended', False))) and self.__class__ == api_serializer:
+        if self.context.get('request', False) and bool(int(self.context['request'].query_params.get('extended', False))) and self.__class__ == api_serializer:
             return fields
         else:
             del fields['image']
diff --git a/vue/src/apps/ChecklistView/ChecklistView.vue b/vue/src/apps/ChecklistView/ChecklistView.vue
new file mode 100644
index 00000000..8990ce6e
--- /dev/null
+++ b/vue/src/apps/ChecklistView/ChecklistView.vue
@@ -0,0 +1,255 @@
+<template>
+  <div id="app" style="margin-bottom: 4vh" v-if="this_model">
+    <div class="row">
+      <div class="col-md-2 d-none d-md-block">
+      </div>
+      <div class="col-xl-8 col-12">
+        <div class="container-fluid d-flex flex-column flex-grow-1">
+
+          <div class="row">
+            <div class="col-md-6" style="margin-top: 1vh">
+              <h3>
+                <!-- <model-menu/>  Replace with a List Menu or a Checklist Menu? -->
+                <span>{{ this.this_model.name }}</span>
+                <span><b-button variant="link" @click="startAction({'action':'new'})"><i
+                    class="fas fa-plus-circle fa-2x"></i></b-button></span>
+              </h3>
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col col-md-12">
+              <b-table small :items="items" :fields="fields" :busy="loading">
+                <template #cell(checked)="data">
+                  <b-form-checkbox
+                    v-model="data.item.checked"
+                    @change="checkboxChanged(data.item)"
+                  />
+                </template>
+                <template #cell(all_notes)="data">
+                  {{ formatNotes(data.item) }}
+                </template>
+              </b-table>
+              <!-- <div v-for="i in items" v-bind:key="i.id">
+                {{i.supermarket_category}} --- {{i.food && i.food.name || 'null'}} --- {{i.id}} --- {{i.checked}} --- {{i.amount}} --- {{i.unit && i.unit.name || 'null'}} --- {{i.list_recipe && i.list_recipe.recipe_name || 'null'}} --- {{allNotes(i)}}
+              </div> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import Vue from 'vue'
+import {BootstrapVue} from 'bootstrap-vue'
+
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
+import {ApiMixin} from "@/utils/utils";
+import {StandardToasts} from "@/utils/utils";
+
+Vue.use(BootstrapVue)
+
+export default {
+  // TODO ApiGenerator doesn't capture and share error information - would be nice to share error details when available 
+  // or i'm capturing it incorrectly
+  name: 'ChecklistView',
+  mixins: [ApiMixin],
+  components: { },
+  data() {
+    return {
+      // this.Models and this.Actions inherited from ApiMixin
+      items: [],
+      this_model: undefined,
+      model_menu: undefined,
+      this_action: undefined,
+      this_item: {},
+      show_modal: false,
+      fields: [
+        {
+          'key': 'checked',
+          'label': '',
+          class: 'text-center'
+        },
+        {
+          'key': 'food.supermarket_category.name',
+          'label': this.$t('Category'),
+          'formatter': 'formatCategory',
+        },
+        {
+          'key': 'amount',
+          class: 'text-center'
+        },
+        {
+          'key': 'unit.name',
+          'label': this.$t('Unit')
+        },
+        {
+          'key': 'food.name',
+          'label': this.$t('Food')
+        },
+        {
+          'key': 'recipe_mealplan.name',
+          'label': this.$t('Recipe'),
+        },
+        {
+          'key': 'all_notes',
+          'label': this.$t('Notes'),
+          'formatter': 'formatNotes',
+        },
+        {
+          'key': 'created_by.username',
+          'label': this.$t('Added_by'),
+        },
+        {
+          'key': 'created_at',
+          'label': this.$t('Added_on'),
+          'formatter': 'formatDate',
+        },
+      ],
+      loading: true
+    }
+  },
+  mounted() {
+    // value is passed from lists.py
+    let model_config = JSON.parse(document.getElementById('model_config').textContent)
+    this.this_model = this.Models[model_config?.model]
+    this.getItems()
+  },
+  methods: {
+    // this.genericAPI inherited from ApiMixin
+    startAction: function (e, param) {
+      let source = e?.source ?? {}
+      this.this_item = source
+      // remove recipe from shopping list
+      // mark on-hand
+      // mark puchased
+      // edit shopping category on food
+      // delete food from shopping list
+      // add food to shopping list
+      // add other to shopping list
+      // edit unit conversion
+      // edit purchaseable unit
+      switch (e.action) {
+        case 'delete':
+          this.this_action = this.Actions.DELETE
+          this.show_modal = true
+          break;
+        case 'new':
+          this.this_action = this.Actions.CREATE
+          this.show_modal = true
+          break;
+        case 'edit':
+          this.this_item = e.source
+          this.this_action = this.Actions.UPDATE
+          this.show_modal = true
+          break;
+      }
+    },
+    finishAction: function (e) {
+      let update = undefined
+      switch (e?.action) {
+        case 'save':
+          this.saveThis(e.form_data)
+          break;
+      }
+      if (e !== 'cancel') {
+        switch (this.this_action) {
+          case this.Actions.DELETE:
+            this.deleteThis(this.this_item.id)
+            break;
+          case this.Actions.CREATE:
+            this.saveThis(e.form_data)
+            break;
+          case this.Actions.UPDATE:
+            update = e.form_data
+            update.id = this.this_item.id
+            this.saveThis(update)
+            break;
+          case this.Actions.MERGE:
+            this.mergeThis(this.this_item, e.form_data.target, false)
+            break;
+          case this.Actions.MOVE:
+            this.moveThis(this.this_item.id, e.form_data.target.id)
+            break;
+        }
+      }
+      this.clearState()
+    },
+    getItems: function (params={}) {
+      params.options = {'query':{'extended': 1}} // returns extended values in API response
+      this.genericAPI(this.this_model, this.Actions.LIST, params).then((results) => {
+        console.log('generic', results, results.data?.length)
+        if (results.data?.length) {
+          this.items = results.data
+        } else {
+          console.log('no data returned')
+        }
+      }).catch((err) => {
+        console.log(err)
+        StandardToasts.makeStandardToast(StandardToasts.FAIL_FETCH)
+      })
+    },
+    getThis: function (id) {
+      return this.genericAPI(this.this_model, this.Actions.FETCH, {'id': id})
+    },
+    saveThis: function (thisItem, toast=true) {
+      if (!thisItem?.id) { // if there is no item id assume it's a new item
+        this.genericAPI(this.this_model, this.Actions.CREATE, thisItem).then((result) => {
+          // this.items = result.data - refresh the list here
+          if (toast) { StandardToasts.makeStandardToast(StandardToasts.SUCCESS_CREATE) }
+        }).catch((err) => {
+          console.log(err)
+          if (toast) { StandardToasts.makeStandardToast(StandardToasts.FAIL_CREATE) }
+        })
+      } else {
+        this.genericAPI(this.this_model, this.Actions.UPDATE, thisItem).then((result) => {
+          // this.refreshThis(thisItem.id) refresh the list here
+          if (toast) { StandardToasts.makeStandardToast(StandardToasts.SUCCESS_UPDATE) }
+        }).catch((err) => {
+          console.log(err, err.response)
+          if (toast) { StandardToasts.makeStandardToast(StandardToasts.FAIL_UPDATE) }
+        })
+      }
+    },
+    getRecipe: function (item) {
+      // change to get pop up card?  maybe same for unit and food?
+    },
+    deleteThis: function (id) {
+      this.genericAPI(this.this_model, this.Actions.DELETE, {'id': id}).then((result) => {
+        StandardToasts.makeStandardToast(StandardToasts.SUCCESS_DELETE)
+      }).catch((err) => {
+        console.log(err)
+        StandardToasts.makeStandardToast(StandardToasts.FAIL_DELETE)
+      })
+    },
+    clearState: function () {
+      this.show_modal = false
+      this.this_action = undefined
+      this.this_item = undefined
+    },
+    formatCategory: function(value) {
+      return value || this.$t('Undefined')
+    },
+    formatNotes: function (item) {     
+      return [item?.recipe_mealplan?.mealplan_note, item?.ingredient_note,].filter(String).join("\n")
+    },
+    formatDate: function (datetime) {
+      return Intl.DateTimeFormat(window.navigator.language, { dateStyle: 'short', timeStyle: 'short' }).format(Date.parse(datetime))
+    },
+    checkboxChanged: function(item) {
+      this.saveThis(item, false)
+    }
+  }
+}
+
+</script>
+
+<!--style src="vue-multiselect/dist/vue-multiselect.min.css"></style-->
+
+<style>
+
+</style>
diff --git a/vue/src/apps/ModelListView/ModelListView.vue b/vue/src/apps/ModelListView/ModelListView.vue
index c8a6bec7..e73053af 100644
--- a/vue/src/apps/ModelListView/ModelListView.vue
+++ b/vue/src/apps/ModelListView/ModelListView.vue
@@ -64,7 +64,7 @@ import { BootstrapVue } from "bootstrap-vue"
 
 import "bootstrap-vue/dist/bootstrap-vue.css"
 
-import { CardMixin, ApiMixin, getConfig, StandardToasts, getUserPreference, makeToast } from "@/utils/utils"
+import { CardMixin, ApiMixin, getConfig, StandardToasts } from "@/utils/utils"
 
 import GenericInfiniteCards from "@/components/GenericInfiniteCards"
 import GenericHorizontalCard from "@/components/GenericHorizontalCard"
diff --git a/vue/src/components/Ingredient.vue b/vue/src/components/Ingredient.vue
new file mode 100644
index 00000000..a15c0ff7
--- /dev/null
+++ b/vue/src/components/Ingredient.vue
@@ -0,0 +1,236 @@
+<template>
+    <tr>
+        <template v-if="ingredient.is_header">
+            <td colspan="5" @click="done">
+                <b>{{ ingredient.note }}</b>
+            </td>
+        </template>
+
+        <template v-else>
+            <td class="d-print-non" v-if="detailed && !add_shopping_mode" @click="done">
+                <i class="far fa-check-circle text-success" v-if="ingredient.checked"></i>
+                <i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
+            </td>
+            <td class="text-nowrap" @click="done">
+                <span v-if="ingredient.amount !== 0" v-html="calculateAmount(ingredient.amount)"></span>
+            </td>
+            <td @click="done">
+                <span v-if="ingredient.unit !== null && !ingredient.no_amount">{{ ingredient.unit.name }}</span>
+            </td>
+            <td @click="done">
+                <template v-if="ingredient.food !== null">
+                    <i
+                        v-if="show_shopping && !add_shopping_mode"
+                        class="far fa-edit fa-sm px-1"
+                        @click="editFood()"
+                    ></i>
+                    <a
+                        :href="resolveDjangoUrl('view_recipe', ingredient.food.recipe.id)"
+                        v-if="ingredient.food.recipe !== null"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        >{{ ingredient.food.name }}</a
+                    >
+                    <span v-if="ingredient.food.recipe === null">{{ ingredient.food.name }}</span>
+                </template>
+            </td>
+            <td v-if="detailed && !show_shopping">
+                <div v-if="ingredient.note">
+                    <span v-b-popover.hover="ingredient.note" class="d-print-none touchable">
+                        <i class="far fa-comment"></i>
+                    </span>
+                    <!-- v-if="ingredient.note.length > 15" -->
+                    <!--          <span v-else>-->
+                    <!--            {{ ingredient.note }}-->
+                    <!--          </span>-->
+
+                    <div class="d-none d-print-block">
+                        <i class="far fa-comment-alt d-print-none"></i> {{ ingredient.note }}
+                    </div>
+                </div>
+            </td>
+            <td v-else-if="show_shopping" class="text-right text-nowrap">
+                <!-- in shopping mode and ingredient is not ignored -->
+                <div v-if="!ingredient.food.ignore_shopping">
+                    <b-button
+                        class="btn text-decoration-none fas fa-shopping-cart px-2 user-select-none"
+                        variant="link"
+                        v-b-popover.hover.click.blur.html.top="{ title: ShoppingPopover, variant: 'outline-dark' }"
+                        :class="{
+                            'text-success': shopping_status === true,
+                            'text-muted': shopping_status === false,
+                            'text-warning': shopping_status === null,
+                        }"
+                    />
+                    <span class="px-2">
+                        <input type="checkbox" class="align-middle" v-model="shop" @change="changeShopping" />
+                    </span>
+                    <on-hand-badge :item="ingredient.food" />
+                </div>
+                <div v-else>
+                    <!-- or in shopping mode and food is ignored: Shopping Badge bypasses linking ingredient to Recipe which would get ignored -->
+                    <shopping-badge :item="ingredient.food" :override_ignore="true" class="px-1" />
+                    <span class="px-2">
+                        <input
+                            type="checkbox"
+                            class="align-middle"
+                            disabled
+                            v-b-popover.hover.click.blur
+                            :title="$t('IgnoredFood', { food: ingredient.food.name })"
+                        />
+                    </span>
+                    <on-hand-badge :item="ingredient.food" />
+                </div>
+            </td>
+        </template>
+    </tr>
+</template>
+
+<script>
+import { calculateAmount, ResolveUrlMixin, ApiMixin } from "@/utils/utils"
+import OnHandBadge from "@/components/Badges/OnHand"
+import ShoppingBadge from "@/components/Badges/Shopping"
+
+export default {
+    name: "Ingredient",
+    components: { OnHandBadge, ShoppingBadge },
+    props: {
+        ingredient: Object,
+        ingredient_factor: { type: Number, default: 1 },
+        detailed: { type: Boolean, default: true },
+        recipe_list: { type: Number }, // ShoppingListRecipe ID, to filter ShoppingStatus
+        show_shopping: { type: Boolean, default: false },
+        add_shopping_mode: { type: Boolean, default: false },
+        shopping_list: {
+            type: Array,
+            default() {
+                return []
+            },
+        }, // list of unchecked ingredients in shopping list
+    },
+    mixins: [ResolveUrlMixin, ApiMixin],
+    data() {
+        return {
+            checked: false,
+            shopping_status: null,
+            shopping_items: [],
+            shop: false,
+            dirty: undefined,
+        }
+    },
+    watch: {
+        ShoppingListAndFilter: {
+            immediate: true,
+            handler(newVal, oldVal) {
+                let filtered_list = this.shopping_list
+                // if a recipe list is provided, filter the shopping list
+                if (this.recipe_list) {
+                    filtered_list = filtered_list.filter((x) => x.list_recipe == this.recipe_list)
+                }
+                // how many ShoppingListRecipes are there for this recipe?
+                let count_shopping_recipes = [...new Set(filtered_list.map((x) => x.list_recipe))].length
+                let count_shopping_ingredient = filtered_list.filter((x) => x.ingredient == this.ingredient.id).length
+
+                if (count_shopping_recipes > 1) {
+                    this.shop = false // don't check any boxes until user selects a shopping list to edit
+                    if (count_shopping_ingredient >= 1) {
+                        this.shopping_status = true
+                    } else if (this.ingredient.food.shopping) {
+                        this.shopping_status = null // food is in the shopping list, just not for this ingredient/recipe
+                    } else {
+                        this.shopping_status = false // food is not in any shopping list
+                    }
+                } else {
+                    // mark checked if the food is in the shopping list for this ingredient/recipe
+                    if (count_shopping_ingredient >= 1) {
+                        // ingredient is in this shopping list
+                        this.shop = true
+                        this.shopping_status = true
+                    } else if (count_shopping_ingredient == 0 && this.ingredient.food.shopping) {
+                        // food is in the shopping list, just not for this ingredient/recipe
+                        this.shop = false
+                        this.shopping_status = null
+                    } else {
+                        // the food is not in any shopping list
+                        this.shop = false
+                        this.shopping_status = false
+                    }
+                }
+                // if we are in add shopping mode start with all checks marked
+                if (this.add_shopping_mode) {
+                    this.shop =
+                        !this.ingredient.food.on_hand &&
+                        !this.ingredient.food.ignore_shopping &&
+                        !this.ingredient.food.recipe
+                }
+            },
+        },
+    },
+    mounted() {},
+    computed: {
+        ShoppingListAndFilter() {
+            // hack to watch the shopping list and the recipe list at the same time
+            return this.shopping_list.map((x) => x.id).join(this.recipe_list)
+        },
+        ShoppingPopover() {
+            if (this.shopping_status == false) {
+                return this.$t("NotInShopping", { food: this.ingredient.food.name })
+            } else {
+                let list = this.shopping_list.filter((x) => x.food.id == this.ingredient.food.id)
+                let category =
+                    this.$t("Category") + ": " + this.ingredient?.food?.supermarket_category?.name ??
+                    this.$t("Undefined")
+                let popover = []
+
+                list.forEach((x) => {
+                    popover.push(
+                        [
+                            "<tr style='border-bottom: 1px solid #ccc'>",
+                            "<td style='padding: 3px;'><em>",
+                            x?.recipe_mealplan?.name ?? "",
+                            "</em></td>",
+                            "<td style='padding: 3px;'>",
+                            x?.amount ?? "",
+                            "</td>",
+                            "<td style='padding: 3px;'>",
+                            x?.unit?.name ?? "" + "</td>",
+                            "<td style='padding: 3px;'>",
+                            x?.food?.name ?? "",
+                            "</td></tr>",
+                        ].join("")
+                    )
+                })
+                return (
+                    "<table class='table-small'><th colspan='4'>" + category + "</th>" + popover.join("") + "</table>"
+                )
+            }
+        },
+    },
+    methods: {
+        calculateAmount: function(x) {
+            return calculateAmount(x, this.ingredient_factor)
+        },
+        // sends parent recipe ingredient to notify complete has been toggled
+        done: function() {
+            this.$emit("checked-state-changed", this.ingredient)
+        },
+        // sends true/false to parent to save all ingredient shopping updates as a batch
+        changeShopping: function() {
+            this.$emit("add-to-shopping", { item: this.ingredient, add: this.shop })
+        },
+        editFood: function() {
+            console.log("edit the food")
+        },
+    },
+}
+</script>
+
+<style scoped>
+/* increase size of hover/touchable space without changing spacing */
+.touchable {
+    padding-right: 2em;
+    padding-left: 2em;
+    margin-right: -2em;
+    margin-left: -2em;
+}
+</style>
diff --git a/vue/vue.config.js b/vue/vue.config.js
index 90cdf729..25c539f4 100644
--- a/vue/vue.config.js
+++ b/vue/vue.config.js
@@ -91,9 +91,9 @@ module.exports = {
             },
             // TODO make this conditional on .env DEBUG = FALSE
             config.optimization.minimize(false)
-        )
+        );
 
-        config.plugin("BundleTracker").use(BundleTracker, [{ relativePath: true, path: "../vue/" }])
+        config.plugin('BundleTracker').use(BundleTracker, [{relativePath: true, path: '../vue/'}]);
 
         config.resolve.alias.set("__STATIC__", "static")