Menu
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
491
The createApp API allows multiple Vue applications to co-exist on the same page, each with its own scope for configuration and global assets: js const app1 = createApp({ /* ... */ }) app1.
Explanation : The correct syntax for creating instance is var text = new Vue({// options }) .
A Vue instance is essentially a ViewModel as defined in the MVVM pattern, hence the variable name vm you will see throughout the docs. When you instantiate a Vue instance, you need to pass in an options object which can contain options for data, template, element to mount on, methods, lifecycle callbacks and more.
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.
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>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>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.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
