quite nice

vue/src/components/KeywordsComponent.vue

@@ -1,6 +1,6 @@
 <template>
     <div v-if="recipe.keywords.length > 0">
-      <span :key="k.id" v-for="k in recipe.keywords.filter((kk) => { return kk.show || kk.show === undefined })" class="pl-1">
+      <span :key="k.id" v-for="k in recipe.keywords.slice(0,keyword_splice).filter((kk) => { return kk.show || kk.show === undefined })" class="pl-1">
           <a :href="`${resolveDjangoUrl('view_search')}?keyword=${k.id}`"><b-badge pill variant="light"
                                                                                    class="font-weight-normal">{{ k.label }}</b-badge></a>
 
@@ -17,6 +17,15 @@ export default {
     mixins: [ResolveUrlMixin],
     props: {
         recipe: Object,
+        limit: Number,
     },
+    computed: {
+        keyword_splice: function (){
+            if(this.limit){
+                return this.limit
+            }
+            return this.recipe.keywords.lenght
+        }
+    }
 }
 </script>