Unable to load variables in vuejs for a simple script

I’m trying to get the variables to show from a simple vuejs script in main.js
It seems that index.html only shows the following and doesn’t load the variables in.

{{ product }}
{{ description}}

I have also perform the following

npm install vue

What else is missing from this?

index.html

<html>
<head><title>Test</title></head>
<body>
    <div id="example">
        <h2>{{ product }}</h2>
        <p>{{ description }}</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>

main.js

var app = new Vue({
    el: '#example',
    data: {
        product: "Socks",
        description: "A pair of socks"
    }
})

Hi

It works for me if I just open the index.html file in firefox or Chrome
Is that how you do it or do you use some kind of webbserver? Try looking in the developer tools for your browser and check on the network panel that main.js is found

1 Like

That was a good hint. Thank you.
I found out from developer’s tools that the “<script …>” tags were not in the right syntax. It seems that vscode actually added some special characters in for unknown reasons.

1 Like

Yes. Nice you solved it.

1 Like