diff --git a/vue/src/apps/RecipeView/RecipeView.vue b/vue/src/apps/RecipeView/RecipeView.vue
index 996f8a7b..4b0f01ab 100644
--- a/vue/src/apps/RecipeView/RecipeView.vue
+++ b/vue/src/apps/RecipeView/RecipeView.vue
@@ -25,7 +25,7 @@
       </div>
 
       <div style="text-align: center">
-        <keywords :recipe="recipe"></keywords>
+        <keywords-component :recipe="recipe"></keywords-component>
       </div>
 
       <hr/>
@@ -97,8 +97,8 @@
                         <b v-bind:key="s.id">{{s.name}}</b>
                       </template>
                       <template v-for="i in s.ingredients">
-                        <Ingredient :ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id"
-                                    @checked-state-changed="updateIngredientCheckedState"></Ingredient>
+                        <ingredient-component :ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id"
+                                    @checked-state-changed="updateIngredientCheckedState"></ingredient-component>
                       </template>
                     </template>
                     <!-- eslint-enable vue/no-v-for-template-key-on-child -->
@@ -120,7 +120,7 @@
 
           <div class="row" style="margin-top: 2vh; margin-bottom: 2vh">
             <div class="col-12">
-              <Nutrition :recipe="recipe" :ingredient_factor="ingredient_factor"></Nutrition>
+              <Nutrition-component :recipe="recipe" :ingredient_factor="ingredient_factor"></Nutrition-component>
             </div>
           </div>
         </div>
@@ -140,8 +140,8 @@
 
 
       <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
-        <Step :recipe="recipe" :step="s" :ingredient_factor="ingredient_factor" :index="index" :start_time="start_time"
-              @update-start-time="updateStartTime" @checked-state-changed="updateIngredientCheckedState"></Step>
+        <step-component :recipe="recipe" :step="s" :ingredient_factor="ingredient_factor" :index="index" :start_time="start_time"
+              @update-start-time="updateStartTime" @checked-state-changed="updateIngredientCheckedState"></step-component>
       </div>
     </div>
 
@@ -164,21 +164,25 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
 
 import {apiLoadRecipe} from "@/utils/api";
 
-import Step from "@/components/Step";
+import Step from "@/components/StepComponent";
 import RecipeContextMenu from "@/components/RecipeContextMenu";
 import {ResolveUrlMixin, ToastMixin} from "@/utils/utils";
-import Ingredient from "@/components/Ingredient";
+import Ingredient from "@/components/IngredientComponent";
 
 import PdfViewer from "@/components/PdfViewer";
 import ImageViewer from "@/components/ImageViewer";
-import Nutrition from "@/components/Nutrition";
+import Nutrition from "@/components/NutritionComponent";
 
 import moment from 'moment'
-import Keywords from "@/components/Keywords";
+import Keywords from "@/components/KeywordsComponent";
 import LoadingSpinner from "@/components/LoadingSpinner";
 import AddRecipeToBook from "@/components/AddRecipeToBook";
 import RecipeRating from "@/components/RecipeRating";
 import LastCooked from "@/components/LastCooked";
+import IngredientComponent from "@/components/IngredientComponent";
+import StepComponent from "@/components/StepComponent";
+import KeywordsComponent from "@/components/KeywordsComponent";
+import NutritionComponent from "@/components/NutritionComponent";
 
 Vue.prototype.moment = moment
 
@@ -195,11 +199,11 @@ export default {
     RecipeRating,
     PdfViewer,
     ImageViewer,
-    Ingredient,
-    Step,
+    IngredientComponent,
+    StepComponent,
     RecipeContextMenu,
-    Nutrition,
-    Keywords,
+    NutritionComponent,
+    KeywordsComponent,
     LoadingSpinner,
     AddRecipeToBook,
   },
diff --git a/vue/src/components/IngredientComponent.vue b/vue/src/components/IngredientComponent.vue
index 843aac60..3685ef14 100644
--- a/vue/src/components/IngredientComponent.vue
+++ b/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: {
diff --git a/vue/src/components/KeywordsComponent.vue b/vue/src/components/KeywordsComponent.vue
index eff7fb1a..1829f0bc 100644
--- a/vue/src/components/KeywordsComponent.vue
+++ b/vue/src/components/KeywordsComponent.vue
@@ -9,7 +9,7 @@
 <script>
 
 export default {
-  name: 'Keywords',
+  name: 'KeywordsComponent',
   props: {
     recipe: Object,
   },
diff --git a/vue/src/components/NutritionComponent.vue b/vue/src/components/NutritionComponent.vue
index b4ad36bb..b8ad4494 100644
--- a/vue/src/components/NutritionComponent.vue
+++ b/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,
diff --git a/vue/src/components/RecipeCard.vue b/vue/src/components/RecipeCard.vue
index 1e976551..0ebae44b 100755
--- a/vue/src/components/RecipeCard.vue
+++ b/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,
diff --git a/vue/src/components/StepComponent.vue b/vue/src/components/StepComponent.vue
index bf7492de..403b5829 100644
--- a/vue/src/components/StepComponent.vue
+++ b/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,