[Vuejs]-Vue.js can't see my variables

by

0👍

I found the problem. It is syntax related for some reason, I have to include 

<script lang="css"></script>

before

<script>
export default {
 name: 'chat-message',
 data () {
    return {
        message: 'message',
        user: "John Ham"
     }
 }
}
</script>

0👍

This could be taking place because of a ‘wrongly dated script’.
You have got to know the latest version of Vue.js out there and use the correct script according to your project.

As of the time of this response:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

is the correct script for Vue 3.

However you can check the https://unpkg.com/ page in order to see what is the latest script out there, or test out the best fit for the node version you have gotten on your machine.

Also, here’s my current project folders structure

.
├── app
│   ├── index.html
└── src
│   └── app.js

My code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Vue</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="src/app.js" defer></script>
</head>
<body>
    <div id="app">
        <p>My name is: {{ name }}</p>
        <p>This is just a {{ title }}</p>
    </div>
</body>
</html>

app.js

const MyNameApp = {
    data() {
        return {
            name: "Kolis",
            title: "F***ING TEST"
        }
    }
}

Vue.createApp(MyNameApp).mount("#app");

Peace!

Leave a comment