Vue js with simple JavaScript Vue is undefined

Question

I am trying to understand how vue works. To do that I simplify it as much as possible, hence no webpack no CDNs or any other packages (unless its a necessity).

So, Came up with this but trying to inject a simple a variable into html gives vue is undefined error.

*vue.js file is taken from npm vue package.

<html>
<head>
  <script src="vue.js"></script>

  <script>
  new vue({
    data: 'This must be injected'
  }).$mount('#app');
  </script>

</head>
<body>
  <div id="app">
    <p> {{ data }} </p>
  </div>

  <h1>This is a sample header</h1>
</body>
</html>

new Vue (uppercase "V")

Phil
– Phil

2018-12-27 23:09:54 +00:00
Commented Dec 27, 2018 at 23:09 — Phil
– Phil, Commented Dec 27, 2018 at 23:09

tony19 · Accepted Answer · 2022-07-15 22:03:18Z

3

You need to have Vue load after the Dom is ready so it can find the element to attach itself to — don't put it in the head. Also it's upper-case Vue. And Data can't just be a naked property it should be a function that returns an object with your properties (it can also be an an object, but it's not recommended once the app starts getting bigger).

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <p> {{ data }} </p>

</div>

<h1>This is a sample header</h1>
<script>
  Vue.config.productionTip = false
  new Vue({
    data(){ return {
      data: 'This must be injected'
    }
  }
  }).$mount('#app');
</script>

edited Jul 15, 2022 at 22:03

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 27, 2018 at 23:12

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 01:08:15Z

1

There are a few problems in your code.

vue should be Vue
data should be an Object or Function - https://v2.vuejs.org/v2/api/#data

<html>
<head>  
</head>

<body>
  <div id="app">

    <p> {{ myText }} </p>

  </div>

  <h1>This is a sample header</h1>

  <script src="vue.js"></script>

  <script>
    new Vue({
      data: {
        myText: 'This must be injected'
      }
    }).$mount('#app');

  </script>

</body>
</html>

edited Jul 15, 2022 at 1:08

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 27, 2018 at 23:21

Mintonne

612 silver badges5 bronze badges

2 Comments

Boussadjra Brahim Over a year ago

this will not work since you're placing that script inside head element

Mintonne Over a year ago

@BoussadjraBrahim Fixed. Thanks

Ahmed Hammad · Accepted Answer · 2018-12-27 23:14:31Z

0

I think the data must have an object as it's value.

<html>
  <head>
  <script src="vue.js"></script>

<script>

new Vue({
  data: {
     txt: 'This must be injected'
  }
}).$mount('#app');

</script>

  </head>
  <body>
  <div id="app">

  <p> {{ txt }} </p>

  </div>

  <h1>This is a sample header</h1>
  </body>
</html>

answered Dec 27, 2018 at 23:14

Ahmed Hammad

3,1255 gold badges22 silver badges43 bronze badges

Collectives™ on Stack Overflow

Vue js with simple JavaScript Vue is undefined

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related