Super Simple example of use Mura.js to manage an entity with VueJS. It assumes you created an entity named widget in your admin assembler with two atributes named `name` and `description`.

simple widget manager

<script>
app=()=>{
	var app = new Vue({
		template: '#app-template',
		el: '#app',
		data: function(){
			return{
				entityName:'widget',
				collection:false,
				entity:false,
				sort:'',
				keywords:'',
				itemsPerPage:10,
				maxItems:100,
				applyingKeywords:false,
				itemsPerPageOptions:[1,5,10,25,50,100],
				permissions:{
					read:false,
					save:false,
					delete:false
				}
			}
		},
		watch: {
			itemsPerPage() {
				this.load();
			},
			maxItems() {
				this.load();
			},
			sort() {
				this.load(false);
			 },
			entity() {
			},
			keywords() {
				this.load(false);
			}
		},
		mounted: function() {
			Mura.getEntity(this.entityName).get('permissions').then(
				(permissions)=>{
					this.permissions=permissions.getAll();
					if(this.permissions.read){
						this.load();
					}
				}
			)
		},
		methods: {
			load(reset){
				if(typeof reset == 'undefined'){
					reset=true;
				}

				if(reset){
					this.collection=false;
					this.entity=false;
				}

				let feed=Mura.getFeed(this.entityName);

				if(this.sort){
					feed.sort(this.sort);
				}

				if(this.keywords){
					feed
						.where().prop('name').contains(this.keywords)
						.orProp('description').contains(this.keywords)
				}

				feed
					.maxItems(this.maxItems)
					.itemsPerPage(this.itemsPerPage)
					.getQuery().then((collection)=>{

					this.collection=collection;

					if(this.applyingKeywords){
						setTimeout(()=>{
							Mura('#keywordsinput').focus();
							this.applyingKeywords=false
							}
							,100
						);
					}
				})
			},
			setSort(sortby){
				if(typeof sortby=='undefined'){
					this.sort="";
				} else if(this.sort == sortby){
					this.sort="-" + this.sort;
				} else{
					this.sort=sortby;
				}
			},
			setKeywords(e){
				if(e.charCode==13){
					this.applyingKeywords=true;
					this.keywords=Mura('#keywordsinput').val();
				}
			},
			saveEntity(){
				this.entity.save().then(()=>this.load());
			},
			deleteEntity(){
				this.entity.delete().then(()=>this.load());
			},
			goToPage(link){
				link=link || 'missing';
				if(this.collection.has(link)){
					this.collection.get(link).then((collection)=>{
						this.collection=collection;
					})
				}
			},
			closeForm(){
				this.entity='';
			},
			viewEntity(entityInstance){
				if(typeof entityInstance != 'undefined'){
					this.entity=Mura.getEntity(this.entityName).set(Object.assign({},entityInstance.getAll()));
				} else {
					Mura.getEntity(this.entityName).new().then((entityInstance)=>{
						this.entity=entityInstance;
					});
				}
				return false;
			}
		}
	})
};

Mura(()=>{
	Mura.loader().loadjs('https://cdn.jsdelivr.net/npm/vue/dist/vue.js',
		app
	)
})
</script>

<template id="app-template">
	<div>
		<h3>Widget Manager</h3>
		<div v-if="entity">
			<div>
				<div>
					<button class="btn btn-light" v-on:click="closeForm()">Back</button>
				</div>
				<div class="alert alert-danger" role="alert" v-for="error in entity.get('errors')">
					{{error}}
				</div>
				<div class="form-group">
					<label for="name">Name</label><br/>
					<input class="form-control" name="name" v-model="entity.properties.name"/>
				</div>
				<div class="form-group">
					<label for="description">Description</label><br/>
					<textarea class="form-control" v-model="entity.properties.description"></textarea>
				</div>
				<div v-if="this.permissions.save">
					<button class="btn btn-primary" v-on:click="saveEntity()">Save</button>
					<button class="btn btn-danger" v-if="!entity.get('isnew') && this.permissions.delete" v-on:click="deleteEntity()">Delete</button>
				</div>
			</div>
		</div>
		<div v-else-if="collection">
			<div v-if="permissions.save">
				<button class="btn btn-primary" v-on:click="viewEntity()">Add</button>
			</div>
			<div class="form-group">
				<label for="description">Keyword Search</label><br/>
				<input class="form-control" id="keywordsinput" type=text" v-bind:value="keywords" v-on:keypress="setKeywords"/>
			</div>
			<table>
				<tr>
					<th v-on:click="setSort('name')">
						Name <span v-if="this.sort=='-name'">&#9660</span><span v-else>&#9650;</span>
					</th>
					<th></th>
				</tr>
				<tr v-for="item in collection.get('items')">
					<td><a href="#" v-on:click.prevent="viewEntity(item);">{{item.get('name')}}</a></td><td><button class="btn btn-light" v-on:click="viewEntity(item)">View</button></td>
				</tr>
			</table>
			<div>
				<strong>{{collection.get('startindex')}}</strong> to <strong>{{collection.get('endindex')}}</strong> of <strong>{{collection.get('totalitems')}}</strong>
				<select v-model="itemsPerPage">
					<option v-for="option in itemsPerPageOptions" v-bind:value="option">
						{{option}}
					</option>
				</select>
				<button class="btn btn-light" v-if="collection.has('first')"  v-on:click="goToPage('first')">First</button>
				<button class="btn btn-light" v-if="collection.has('previous')"  v-on:click="goToPage('previous')">&lt; Previous</button>
				<button class="btn btn-light" v-if="collection.has('next')"  v-on:click="goToPage('next')">Next &gt;</button>
				<button class="btn btn-light" v-if="collection.has('last')"  v-on:click="goToPage('last')">Last</button>
			</div>
		</div>
		<div v-else-if="!this.permissions.read">
			<div class="alert alert-info">
				You currently do not have access to view this data.
			</div>
		</div>
		<div v-else>
			..loading...
		</div>
	</div>
</template>

<div id="app"></div>