'Vue not defined' issue in combination with RequireJS

Question

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:

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

Naga Sai A · Accepted Answer · 2019-07-31 14:11:53Z

2

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

answered Jul 31, 2019 at 14:11

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

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

2 Comments

Olaf Over a year ago

I literally just stumbled across an example and tried that.. It's the curse of posting a question on SO and instantly finding the answer. Thanks for the response though! Hope this will save someone else time! Will mark your answer in a few minutes.

Naga Sai A Over a year ago

Thanks @Devilscomrade , happy coding :)

Collectives™ on Stack Overflow

'Vue not defined' issue in combination with RequireJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related