[Vuejs]-Vue component not defined

by

2👍

There are a couple of issues on your code but below is a working code:

<div id="app" style="align:center">
  <h5> Chat Application </h5>
  <p> {{ this.owner }} </p>
  <br />
    <p>{{ this.msg }} </p>
    <app-data></app-data>
</div>

Vue.component('app-data', {
  data() {
    return {
      owner: '',
      msg: ''
    }
  },
  methods: {
    postMessage() {
        //write your code
    }
  },
    template: `
  <div>
        <input type="text" id="txtOwner" v-model="owner">
        <input type="text" id="txtMsg" v-model="msg">
        <button @click="postMessage">Post</button>
  </div>  
    `
});

new Vue({
  el: "#app",
  data: {
        owner: '',
    msg: ''
  },
})

See it in action by clicking here

Note: My answer, just helps you with the issues of the code, but it does not helps you to create chatbox component.You have to write the code on your own.

Hope I helped you.

👤Roland

Leave a comment