CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvuejs3
RAHULKONSCIOUSNESS
RAHULKONSCIOUSNESS

Reputation: 343

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

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

Upvotes: 24

Views: 37576

Answers (3)

Dan
Dan

Reputation: 63139

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>

Upvotes: 53

Nand
Nand

Reputation: 813

You can use createApp function in Vue 3

<script src="https://unpkg.com/[email protected]"></script>

Add this script in the header of your index file

Upvotes: -1

Fritzdultimate
Fritzdultimate

Reputation: 460

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.

Upvotes: 8

Related Questions