Question

10

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

rated 0 times [ 16] [ 6] / answers: 1 / hits: 30039 / 4 Years ago, fri, december 4, 2020, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

reed

Add To Favorites

Follow

Total Points: 725

Total Questions: 85

Total Answers: 89

Location: Singapore

Member since Sat, Jul 25, 2020

4 Years ago

reed questions

1 npx react-native link command not working in latest version of react native. How can we link custom font family in my project

Tue, Jul 5, 22, 00:00, 2 Years ago

1 Alpine.js: How do I access x-data from a function in an external file?

Fri, Apr 16, 21, 00:00, 3 Years ago

1 I have an error : Cannot find module './utils'

Sun, Aug 16, 20, 00:00, 4 Years ago

1 react drag,drop, and connect arrow(or anything else) with animation between elements

Tue, Jun 16, 20, 00:00, 4 Years ago

1 Lodash.uniqueId always returns 1

Thu, May 23, 19, 00:00, 5 Years ago

View All

answered 4 Years ago leifw · Accepted Answer

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>