munch-ease-frontend/src/components/ActionsPage.vue

<template>
    <div>
        <action-item title="Add to next shop" :image="require('@/assets/add-cart.svg')" @click="addToNextShop" />
        <action-item title="Add Recipe" :image="require('@/assets/add-recipe.svg')" @click="addRecipe" />
        <action-item title="Plan Meal" :image="require('@/assets/plan-meal.svg')" @click="planMeal" />
    </div>
</template>
<script>
import ActionItem from './ActionItem.vue'

export default {
    name: 'ActionsPage',
    components: {
        ActionItem
    },
    methods: {
        addToNextShop() {
            console.log('Add to next shop')
        },
        addRecipe() {
            console.log('Add Recipe')
            this.$router.push('/recipes/add')
        },
        planMeal() {
            console.log('Plan Meal')
            this.$router.push('/meals/add')
        }
    }
}
</script>