CODEWITHSUNDEEP
javascriptvue.jsvisual-studio-codevuejs3
Aaron Cloud
Aaron Cloud

Reputation: 315

VSCode not properly importing my main.js file

VScode is not importing my main.js file. I don't understand what I am doing wrong either. The index.html is right next to the main.js but it is not able to find it. I have imported many js files into html before so why is it breaking on me now? Does anyone have any idea's?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Mastery</title>
    <!-- Import Styles -->
    <link rel="stylesheet" href="./assets/styles.css" />
    <!-- Import Vue.js -->
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <div id="app">
      <h1>{{ product }}</h1>
    </div>

    <!-- Import Js -->
    <script src="./main.js"></script>
    <!--Mount App-->
    <script>
      const mountedApp = app.mount;
    </script>
  </body>
</html>

Here is the js file, I am not able to use it because it's not connecting to the html so there is it is just spiting out how Vue is not defined.

const app = Vue.createApp({
    data() {
        return{
            product: 'Socks'
        }
    }
})

And the directory looks like this

Intro-to-Vue
-Assest
 -Images
  Socks.png
Index.html
main.js

Any help would be awesome. Thanks

Upvotes: 0

Views: 117

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You're using the vue 3 syntax with vue 2 CDN script :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Mastery</title>
    <!-- Import Styles -->
    <link rel="stylesheet" href="./assets/styles.css" />
    <!-- Import Vue.js -->
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <div id="app">
      <h1>{{ product }}</h1>
    </div>

    <!-- Import Js -->
    <script src="./main.js"></script>
   
  </body>
</html>

and main.js like :

   new Vue({
      el: '#app',
      data() {
        return {
          product: 'Socks'
        }
      }
    })

Upvotes: 3

Related Questions