> For the complete documentation index, see [llms.txt](https://devworkshops.gitbook.io/masteringvuejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devworkshops.gitbook.io/masteringvuejs/getting-started/overview.md).

# Hello, World!

### Creating a new app

Start by creating a new project folder named **getting-started**. Open the newly created folder within Visual Studio Code, and create a new file named **index.html**. This will be the home page. Update the file with the following template:&#x20;

{% code title="index.html" %}

```markup
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
    
</body>
</html>
```

{% endcode %}

Next, reference **Vue** within the head tag using the following script reference:

{% code title="index.html" %}

```markup
...
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
...
```

{% endcode %}

Then, add a `div` element to contain a simple message:

{% code title="index.html" %}

```markup
...
<div id="app">
    <h1>{{ title }}</h1>    
</div>
...
```

{% endcode %}

Finally, add a script block to contain the root **Vue** instance. It's important to mention here that this script block needs to come after everything else.

{% code title="index.html" %}

```javascript
...
<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: 'Hello, World!'
        }
    })
</script>
...
```

{% endcode %}

### Run the app

Launch the application by opening the **index.html** file in a browser. You will see the following message:

> Hello, World!

If not, go back and double-check the previous steps.

This simple application has a single purpose, to display the 'Hello, World!' message. However what you have accomplished is quite significant! You have created a modern web application without any special tools, such as npm or webpack. No build step was required! This is the same approach you might take if you wanted to upgrade an existing application or enhance a single page. Just add a reference to Vue and get started!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://devworkshops.gitbook.io/masteringvuejs/getting-started/overview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
