Basic VueJs Component

Defining and using a component - http://coligo.io

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  <inline-edit :edit-component="SomeInputComponent"
               :view-component="SomeViewComponent" 
               :value="val" @input.native="onInput" />
</div>

JavaScript

const InlineEdit = Vue.component('inline-edit', {
  template: `
<div>
  <component :is="isEditing ? editComponent : viewComponent" :value="value"/>
  <button @click="isEditing = !isEditing">Toggle edit</button>
</div>
  `,
  props: ["edit-component", "view-component", "value"],
  data() {
     return { isEditing: true }
  }
});

const SomeInputComponent = Vue.component("edit-component", {
	template: `<input type="text" :value="value" />`,
  props: ["value"]
})

const SomeViewComponent = Vue.component("view-component", { 
	template: `<p>{{value}}</p>`, 
  props: ["value"] 
})

const vm = new Vue({
  el: '#app',
  data: {
     val: "Hello",
     SomeInputComponent,
     SomeViewComponent
  },
  methods: {
     onInput(e){
        this.val = e.target.value;
     }
  }
});