Where Mistakes Show

Mistakes are a normal part of programming, and Vue tells you about them in two places.

A mistake in a file, such as a missing end tag, keeps the app from running at all. The preview stays empty, and under it, a message in red says what's wrong and where:

App.vue(13,5): Element is missing end tag.

The numbers are the line and the column: the element that starts on line 13 of App.vue, at its 5th character, has no end tag. Fix the mistake and click Run again.

Mistakes while the app runs show in the console under the preview, as in the JavaScript course. Besides errors, Vue writes warnings there, which start with [Vue warn]:. After a warning, the app keeps running, but something isn't right. The most common one says that the template uses a name that the script doesn't have:

[Vue warn]: Property "price" was accessed during render but is not defined on instance.
  at <App>

It means that the template used price while Vue was making the page (Vue calls that rendering), but the component has nothing of that name. The last line says which component it happened in, here App. It's usually a typo, in the template or in the script, and the page shows nothing in place of the name.

An error in a function says the file and the line, after the function's name:

ReferenceError: total is not defined
    at addToOrder (App.vue:9)

Before it, Vue writes a warning of its own, [Vue warn]: Unhandled error during execution of native event handler: an error happened in a function that an event ran. Read the error under the warning; it says what went wrong.

Before you start, try the first kind of mistake: in the template, delete the </h1> after the heading and click Run. Read the message under the preview, and then put </h1> back.