The Vue.createApp function seems to be malfunctioning, whereas using the new Vue() method is functioning correctly

When running my code, I encountered the following error message:

tesyya.js:16 Uncaught TypeError: Vue.createApp is not a function
. My code snippet looks 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>

I am new to coding and would appreciate any help in identifying my mistake.

Answer №1

The createApp function is specifically designed for Vue 3, and the error message suggests that you are still working with Vue 2. To help you transition smoothly, here are comparative example applications showcasing the correct syntax for both 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>

Answer №2

You have connected the prior version of VueJs

Remember: Before Vue3, if you wish to link the most recent version, you must add @next before the URI

It is anticipated that by the end of the year, the URI will be more direct and even the documentation will officially support Vue3

To utilize Vue3, use the following CDN

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

Now you can utilize the createApp(elem) API.

Answer №3

To implement Vue 3, utilize the createApp function

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a3c3f2f0a79647a647b78">[email protected]</a>"></script>

Make sure to include this script in the header section of your main index file

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I convert duplicate code into a function in JavaScript?

I have successfully bound values to a view in my code, but I am concerned about the duplicate nested forEach loops that are currently present. I anticipate that Sonarcube will flag this as redundant code. Can anyone advise me on how to refactor this to avo ...

"Discover the process of sending a JSON value from a PHP page to an HTML page using AJAX, and learn how to display the resulting data

I am currently validating an email ID using PHP and AJAX, with the intention of returning a value from the PHP page to the HTML in JSON format. My goal is to store this return value in a PHP variable for future use. All of this is being executed within C ...

Error: The function gethostname has not been declared

I attempted to set a variable using gethostname() (1) and with $_SERVER(2), but I always receive an error message saying ReferenceError: gethostname is not defined. My goal is simply to fetch the current system name into a variable using JavaScript within ...

What is the best way to incorporate a variable in the find() method to search for similar matches?

I've been working on a dictionary web application and now I'm in the process of developing a search engine. My goal is to allow users to enter part of a word and receive all similar matches. For instance, if they type "ava", they should get back ...

Angular in conjunction with socket.io does not immediately show messages on screen

I am currently working on developing an instant messaging app (chat) using socket.io and Angular. I have two main files: index.html and index.js as shown below. The chat functionality is working well, but I am facing an issue where the messages do not appe ...

Using a javascript variable in php within the Laravel framework

I am trying to retrieve an id from a button for use in my ajax request. Below is the code snippet for the button: <form> <div class="form-group"> <button class="btn btn-primary" name="deletecar" id="{{$car->id}}">Delet ...

Ways to verify the presence of an element in a list

I found this interesting JS code snippet: ;(function ($) { $('.filter-opts .opt').click(function(){ var selectedName = $(this).html(); $('.append').append('<li>' + selectedName + '</li> ...

In Node.js, the mongodb+srv URI does not support including a port number

Currently, I am working on a project in nodejs using express js. I have encountered the following error: MongoDB connection error: MongoParseError: MongoDB+srv URI cannot contain a port number. In my "MongoDB Atlas" dashboard, I have obtained my "connecti ...

Display a loading spinner on the browser while the form is being submitted

My current project involves using AJAX to retrieve data and populate a form. The data being fetched is quite large, resulting in a delay as it is fetched from the database and filled into the form fields. During this process, I display a loading icon to in ...

The CSS stylesheet is not being applied to the components in Next.js

I am currently facing an issue with styling my React/Next component. Despite trying to apply a stylesheet to enhance its appearance, the CSS doesn't seem to be taking effect. Could someone please provide guidance on how I can resolve this? I have att ...

Encountering an "undefined" error when implementing the useReducer hook in React

I'm encountering an error when using the UseReducer hook in React. Even though I have destructured the state object, I still receive this error: const [{previousOperand,currentOperand,operation},dispatch] = useReducer(reducer,{}); return ( ...

Running a Python script through a Javascript event

I'm looking to enhance my webpage by implementing a feature where users can generate a personalized QR code with the click of a button. My current setup involves a Python script that creates the QR code image and saves it as a .png file. I want to int ...

Is it possible in RxJS to configure a ReplaySubject (or equivalent) that replays the latest messages with a distinctive identifier?

Is it possible to create a generic code that behaves like a ReplaySubject but emits each most recent message with a unique name upon subscribing? In the script below, the current output is... I want this to be logged once ... received the latest bbb 5 I c ...

Angular JS sending a message to various views, including a pop-up modal

One of the services I have created is designed to manage message broadcasting to controllers that require it. The service implementation: .factory('mySharedService', function($rootScope) { var sharedService = {}; sharedService.message = &a ...

What is the best way to perform a multi-link latency check, display the ping results, and use JavaScript to determine the fastest URL?

click here for image description I have noticed that many websites offer this feature, making it easier for users to choose the best URL or server based on their location. As a JavaScript novice, I'm wondering if someone could demonstrate how this is ...

Mastering sorting in AngularJS: ascending or descending, the choice is yours!

I have set up a table view with infinite scroll functionality. The table contains 2000 objects, but only shows 25 at a time. As the user scrolls to the bottom, it loads an additional 25 elements and so on. There is a "V" or "^" button in the header that sh ...

The React Bit Dev module is showing a 404 error

Attempting to incorporate the semantic-ui-react table reusable component from the Bit.dev community into my application. The link I am using is: To add this component to your application, use: npm i @bit/semantic-org.semantic-ui-react.table However, when ...

Safari experiencing hang after successful CORS OPTIONS request

Safari (10 - OSX El Capitan) Issue with CORS Encountering a problem with CORS while performing a POST request from an AngularJS front-end to a Laravel back-end. In Chrome and Firefox, both OPTIONS and POST requests return http status 200 OK In Safari 10 ...

Exploring the Differences between Angular's Http Module and the Fetch API

While I grasp the process Angular uses for HTTP requests, I find myself leaning towards utilizing the Fetch API instead. It eliminates the need to subscribe and unsubscribe just for a single request, making it more straightforward. When I integrated it int ...

Kendo Grid with locked height

Using a grid with some elements locked, we have established a CSS-defined minimum and maximum height for the grid. .k-grid-content { max-height: 400px; min-height: 0px; } An issue arises when setting the height of the locked grid. If the grid&a ...