[Vuejs]-Message is Not displayed (vue.js 2)

by

0👍

✅

<script>
export default {
  data() {
    return {
      message: 'Hello !'
    }
  }
}
</script>

Just do like this.

0👍

From what I can see, you have already mounted your vue instance in your main.js, so there’s no need to create another vue instance and mount it again in the About.vue file.

You only need the following lines of code in the About.vue file

In Vue 2

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data: {
    message: "Hello World!"
  }
}
</script>

In Vue 3

In vue 3, the data property is now a method.

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
   return {
    message: "Hello World!"
   }
  }
}
</script>

Leave a comment