Vue.createApp is not working but Is working with new Vue() method

javascript vue.js vuejs2 vue-component vuejs3

17,288

Solution 1

The createApp method is for Vue 3, and the error indicates that you're using Vue 2. Here are equivalent example apps with correct syntax for Vue 2 and Vue 3.

Vue 2:

CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>

new Vue({
  el: "#app",
  data() {
    return {
      someValue: 10
    }
  },
  computed: {
    someComputed() {
      return this.someValue * 10;
    }
  }
});

<div id="app">
  Some value: {{ someValue }} <br />
  Some computed value: {{ someComputed }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>

Vue 3:

CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.30/vue.global.min.js"></script>

const { createApp, ref, computed } = Vue;
const app = createApp({
  setup() {
    const someValue = ref(10);
    const someComputed = computed(() => someValue.value * 10);
    return {
      someValue,
      someComputed
    }
  }
});
app.mount("#app");

<div id="app">
  Some value: {{ someValue }} <br />
  Some computed value: {{ someComputed }}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.30/vue.global.min.js"></script>

Solution 2

You linked the previous version of VueJs

Note: Prior to Vue3 if you want to link the latest version you have prepend @next to the URI

It's expected that by the end of this year, the URI will be straight forward, even the docs will be officially Vue3

So, to make use of Vue3 use the below CDN

<script src="https://unpkg.com/vue@next"></script>

Now you can you the createApp(elem) api.

17,288

Author by

Admin

Updated on June 13, 2022

Comments

Admin almost 2 years

I'm getting this error tesyya.js:16 Uncaught TypeError: Vue.createApp is not a function mycode follows like this:

const app = Vue.createApp({
  data() {
    return {
      count: 4
    }
  }
})

const vm = app.mount('#app')

console.log(vm.count)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My GK</title>
</head>

<body>
  <div class="app">
    <h1>this might be challenging for you</h1>
    <ul id="addhere">
      <li v-for="goal in goals">{{goal}}</li>
    </ul>
    <input type="text" name="text" id="addthis" v-model="enteredval" />
    <input type="button" value="ADD" id="add" v-on:click="add()" />
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script src="tesyya.js"></script>
</body>

</html>

please let me my mistake I'm a beginner