CODEWITHSUNDEEP
vue.jsrequirejs
Olaf
Olaf

Reputation: 1122

'Vue not defined' issue in combination with RequireJS

I have an issue where the Vue object is undefined in the browser, after I load in Vue with RequireJS. I'm not sure what's going on, I hope someone has some pointers to focus on.

Something worth noting is that I'm placing this code through our custom framework into a MVC C# application. Ultimately the code is placed in views and served along all other JS / HTML.

The HTML is placed first, after which the script is executed.

HTML: 

<div id="aapje">
  {{ message }}
</div>

JS: 

require(['https://unpkg.com/vue'], function() {
  var appje = new Vue({
    el: '#aapje',
    data: {
      message: 'Hello Vue!'
    }
  });
});

Console dump:

enter image description here

Codepen: https://codepen.io/olafjuh/pen/oKWKXG

Upvotes: 2

Views: 97

Answers (1)

Naga Sai A
Naga Sai A

Reputation: 10975

To achieve expected result, pass 'Vue' as parameter to callback funtion of require

working code sample 

require(['https://unpkg.com/vue'], function(Vue) {
   var appje = new Vue({
    el: '#aapje',
    data: {
      message: 'Hello Vue!'
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>
<div id="aapje">
  {{ message }}
</div>

codepen - https://codepen.io/nagasai/pen/WVjVoV

Upvotes: 2

Related Questions