CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuejs3
Kin
Kin

Reputation: 4596

Is Vue 3 backwards compatible with Vue 2?

In different posts around the internet (for example this one) I found that Vue 2 code should work with Vue 3 but for me it does not. For example I have simple component

<template>
    <div class="overflow-x-auto bg-white rounded-lg shadow overflow-y-auto relative">
        <table class="table">
            <thead>
                <tr class="text-left">
                    <th>
                        <label>
                            <input type="checkbox">
                        </label>
                    </th>
                    <th>User ID</th>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                    <th>Gender</th>
                    <th>Phone</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <label>
                            <input type="checkbox" name="1">
                        </label>
                    </td>
                    <td> <span>{{ id }}</span> </td>
                    <td> <span>Cort</span> </td>
                    <td> <span>Tosh</span> </td>
                    <td> <span>{{ email }}</span> </td>
                    <td> <span>Male</span> </td>
                    <td> <span>327-626-5542</span> </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            id: 1,
            email: '[email protected]'
        }
    },

    mounted() {
        alert('mounted');
    },

    created() {
        alert('created');
    }
};
</script>

The table is generated just fine, but both mounted and created not fired when component made. Also the email and id not shown. Only the table is shown.

Upvotes: 0

Views: 2592

Answers (1)

wittgenstein
wittgenstein

Reputation: 4462

Your code works:

Vue.createApp({
  data() {
    return {
      id: 1,
      email: '[email protected]'
    }
  },
  created() {
    alert('created')
  },
  mounted() {
    alert('mounted')
  }
}).mount('#app')
<script src="https://unpkg.com/vue@next"></script>

  <div id="app" class="overflow-x-auto bg-white rounded-lg shadow overflow-y-auto relative">
      <table class="table">
          <thead>
              <tr class="text-left">
                  <th>
                      <label>
                          <input type="checkbox">
                      </label>
                  </th>
                  <th>User ID</th>
                  <th>Firstname</th>
                  <th>Lastname</th>
                  <th>Email</th>
                  <th>Gender</th>
                  <th>Phone</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>
                      <label>
                          <input type="checkbox" name="1">
                      </label>
                  </td>
                  <td> <span>{{ id }}</span> </td>
                  <td> <span>Cort</span> </td>
                  <td> <span>Tosh</span> </td>
                  <td> <span>{{ email }}</span> </td>
                  <td> <span>Male</span> </td>
                  <td> <span>327-626-5542</span> </td>
              </tr>
          </tbody>
      </table>
  </div>

Upvotes: 2

Related Questions