renamed components to match recommended naming

vue/src/components/IngredientComponent.vue

@@ -49,7 +49,7 @@
 import {calculateAmount, ResolveUrlMixin} from "@/utils/utils";
 
 export default {
-  name: 'Ingredient',
+  name: 'IngredientComponent',
   props: {
     ingredient: Object,
     ingredient_factor: {

vue/src/components/KeywordsComponent.vue

@@ -9,7 +9,7 @@
 <script>
 
 export default {
-  name: 'Keywords',
+  name: 'KeywordsComponent',
   props: {
     recipe: Object,
   },

vue/src/components/NutritionComponent.vue

@@ -57,7 +57,7 @@
 import {calculateAmount, calculateEnergy, energyHeading} from "@/utils/utils";
 
 export default {
-  name: 'Nutrition',
+  name: 'NutritionComponent',
   props: {
     recipe: Object,
     ingredient_factor: Number,

vue/src/components/RecipeCard.vue

@@ -42,7 +42,7 @@
           </template>
           <p class="mt-1">
             <last-cooked :recipe="recipe"></last-cooked>
-            <keywords :recipe="recipe" style="margin-top: 4px"></keywords>
+            <keywords-component :recipe="recipe" style="margin-top: 4px"></keywords-component>
           </p>
           <transition name="fade" mode="in-out">
             <div class="row mt-3" v-if="detailed">
@@ -52,7 +52,7 @@
                   <!-- eslint-disable vue/no-v-for-template-key-on-child -->
                   <template v-for="s in recipe.steps">
                     <template v-for="i in s.ingredients">
-                      <Ingredient :detailed="false" :ingredient="i" :ingredient_factor="1" :key="i.id"></Ingredient>
+                      <Ingredient-component :detailed="false" :ingredient="i" :ingredient_factor="1" :key="i.id"></Ingredient-component>
                     </template>
                   </template>
                   <!-- eslint-enable vue/no-v-for-template-key-on-child -->
@@ -82,13 +82,13 @@
 
 <script>
 import RecipeContextMenu from "@/components/RecipeContextMenu";
-import Keywords from "@/components/Keywords";
 import {resolveDjangoUrl, ResolveUrlMixin} from "@/utils/utils";
 import RecipeRating from "@/components/RecipeRating";
 import moment from "moment/moment";
 import Vue from "vue";
 import LastCooked from "@/components/LastCooked";
-import Ingredient from "./Ingredient";
+import KeywordsComponent from "@/components/KeywordsComponent";
+import IngredientComponent from "@/components/IngredientComponent";
 
 Vue.prototype.moment = moment
 
@@ -97,7 +97,7 @@ export default {
   mixins: [
     ResolveUrlMixin,
   ],
-  components: {LastCooked, RecipeRating, Keywords, RecipeContextMenu, Ingredient},
+  components: {LastCooked, RecipeRating, KeywordsComponent, RecipeContextMenu, IngredientComponent},
   props: {
     recipe: Object,
     meal_plan: Object,

vue/src/components/StepComponent.vue

@@ -169,7 +169,7 @@ import IngredientComponent from "@/components/IngredientComponent";
 Vue.prototype.moment = moment
 
 export default {
-  name: 'Step',
+  name: 'StepComponent',
   mixins: [
     GettextMixin,
     ResolveUrlMixin,