anchor.diff:  					this.ingredients = json; 
   				}.bind(this));
   			}
  -		});
  -	</script>
  -
  -	<header class="w3-container w3-theme-l3 w3-margin-bottom">
  -  		<h1>Kochbuch chez René</h1>
  -	</header> 
  -	
  -	<div id="app" class="w3-row">
  -		<div class="w3-third w3-container w3-margin-top">
  -			<div class="w3-container w3-theme">
  -				<h3>Liste aller Rezepte <span id="loading"><i class="fa fa-refresh"></i></span></h3>
  -			</div>
  -			<div id="recipes">
  -				<ul class="w3-ul w3-hoverable w3-large" id="list">
  -					<li v-for="recipe in recipes" style="cursor:pointer;" v-on:click="selectRecipe(recipe)">{{ recipe.title }}</li>
  -				</ul>
  -				<div class="w3-bar w3-center" id="paging">
  -					<button v-bind:disabled="pageNo == 0" v-on:click="prevPage" class="w3-button w3-xxlarge" title="previous">&laquo;</button>
  -					<button v-on:click="nextPage" class="w3-button w3-xxlarge" title="next">&raquo;</button>
  -				</div>
  -			</div>
  -		</div>
  -		<div class="w3-twothird w3-container">
  -			<!-- ************************** einzelnes Rezept anzeigen ********************* -->
  -			<div id="recipe">
  -				<p v-if="!recipe.uuid">Wähle ein Rezept aus der Liste aus ...</p>
  -				<div v-else>
  -				    <h1>{{ recipe.title }}</h1>
  -				    <p v-html="recipe.preamble"></p>
  -				    <h3>Zutaten für <span id="noofperson">{{ recipe.noOfPerson }}</span> Personen</h3>
  -				    <div>
  -				    	<ingredients-list inline-template>
  -							<table class="w3-table w3-bordered" style="max-width: 50%">
  -								<tr v-for="ingredient in ingredients">
  -									<td>{{ ingredient.portion }}</td>
  -									<td>{{ ingredient.description }}&nbsp;{{ ingredient.comment ? "(" + ingredient.comment + ")" : "" }}</td>
  -								</tr>
  -							</table>
  -						</ingredients-list>
  -			    	</div>
  -			    	<p>&nbsp;</p>
  -				    <h3>Zubereitung</h3>
  -				    <p v-html="recipe.preparation"></p>
  -				    <p>&nbsp;</p>
  -				    <p>Rating <span class="w3-badge w3-theme-l3" id="rating">{{ recipe.rating }}</span></p>
  -				    <p class="w3-tiny">
  -				    	Erfasst: <span id="adding">{{ formatDate(recipe.addingDate) }}</span><br>
  -				    	Aktualisiert: <span id="update">{{ formatDate(recipe.editingDate) }}</span><br>
  -				    </p>
  -					<p class="w3-tiny">Stichworte:&nbsp;<span v-for="tag in recipe.tags"><span class='w3-tag w3-theme-l3'>{{ tag }}</span>&nbsp;</span></p>
  -				</div>
  -		    </div>
  -		</div>
  -	</div>
  -	<p>&nbsp;</p>
  -	<footer class="w3-container w3-center w3-theme-d5" style="display: none;">
  -		<p>© 1996-2018 René Anderes | www.anderes.org | design and implemented by René Anderes | Powered by w3.css, jQuery &amp; vue.js</p>
  -	</footer> 
  -
  -	<script>
  -		var recipeViewModel = new Vue({
  -			el: '#recipe',
  -			data: {
  -				recipe: {}
  +		};
  +		
  +		var recipeComponent = {
  +			data: function() {
  +				return {
  +					recipe: {}
  +				}
  +			},
  +			components: {
  +				'ingredients' : ingredientsComponent	
   			},
   			beforeUpdate: function() {
   				$( this.$el ).hide();
  
positive.code: 					return url;
  				}
  			}
  		});
  		
  		var recipesViewModel = new Vue({
  			el: '#list',
  			data: { 
  				recipes: {} 
  			},
  			beforeUpdate: function() {
  				$( this.$el ).hide();
  			},
  			updated: function() {
  				$( this.$el ).fadeIn( "slow" );
  			},
  			methods: {
  				selectRecipe: function( recipe ) {
  					var url = "";
  					$.each(recipe.links, function(idx, link) {
  						if (link.rel == "self") {
  							url = link.href;
  						}
  					});
  					cookbook.load( url ).then( function( json ) {
  						recipeViewModel.recipe = json;
  					})
  				}
  			}
  		});
  
  		var pagingViewModel = new Vue({
  			el: '#paging',
  			data: {
  				pageSize: 10,
  				pageNo: 0	
  			},
  			methods: {
  				nextPage: function() {
  					this.pageNo++;
  					url = cookbook.getRecipesUrl(this.pageNo, this.pageSize);
  					cookbook.load( url ).then( function( json ) {
  						recipesViewModel.recipes = json.content;
  					})
  				},
  				prevPage: function() {
  					if (this.pageNo > 0) {
  						this.pageNo--;
  						url = cookbook.getRecipesUrl(this.pageNo, this.pageSize);
  						cookbook.load(url).then( function( json ) {
  							recipesViewModel.recipes = json.content;
  						})
  					}
  				},
  				init: function() {
  					url = cookbook.getRecipesUrl(this.pageNo, this.pageSize);
  					cookbook.load( url ).then( function( json ) {
  						recipesViewModel.recipes = json.content;
  						$( "#recipes" ).fadeIn( "slow" );
  					})
  				}
  			}
  		});
  		
  
  		$(function() {
  			pagingViewModel.init();
  		});
  		$(document).ajaxStart( function() {
  			$( "#loading" ).show();
  			$( "footer" ).hide();
  
negative.code: 				}
  			}
  		});
  		
  		var pagingComponent = {
  			data: function() {
  				return {
  					pageSize: 10,
  					pageNo: 0
  				}	
  			},
  			created: function() { 
  				this.processLoad();
  			},
  			methods: {
  				nextPage: function() {
  					this.pageNo++;
  					this.processLoad();
  				},
  				prevPage: function() {
  					if (this.pageNo > 0) {
  						this.pageNo--;
  						this.processLoad();
  					};
  				},
  				processLoad: function() {
  					url = cookbook.getRecipesUrl(this.pageNo, this.pageSize);
  					cookbook.load( url ).then( function( json ) {
  						EventBus.$eventbus.$emit( 'recipes-update', json.content );
  					});
  				}, 
  			}
  		};
  		
  		var recipesComponent = {
  			data: function() {
  				return { 
  					recipes: {} 
  				}
  			},
  			components: {
  				'paging-comp' : pagingComponent	
  			},
  			beforeUpdate: function() {
  				$( this.$el ).hide();
  			},
  			updated: function() {
  				$( this.$el ).fadeIn( "slow" );
  			},
  			created: function() { 
  				this.$eventbus.$on( 'recipes-update', function( json ) {
  					this.recipes = json; 
  				}.bind(this));
  			},
  			methods: {
  				selectRecipe: function( recipe ) {
  					var url = "";
  					$.each(recipe.links, function(idx, link) {
  						if (link.rel == "self") {
  							url = link.href;
  						}
  					});
  					cookbook.load( url ).then( function( json ) {
  						EventBus.$eventbus.$emit( 'recipe-update', json );
  					})
  				}
  			}
  		};
  		
  		var ingredientsComponent = {
  			data: function() {
  				return {
  					ingredients: [ ]
  