How to load Vue.js using Require.js

2019-07-23 09:29发布

问题:

I am using Angularjs in my application and I'm trying to create a page inside using Vue.js. For that, I installed Vue using bower and called it's directory inside my require.js file, like this:

'vue': '../vendor/vue/dist/vue'

shim: {
  'vue': {
    deps: ['jquery']
  },
}

After that I have dashboard.js that is a base/parent file, where I call angular and vue (among others)

require([
  'angular',
  'vue',
  'i18next',
  'translations',
  'raven-js',
  'raven-angular',

], function (angular, Vue, i18next, Translations, Raven) {
  'use strict';

Finally I've got my index.html.twig where I'm using Vue, but I got an error telling me Uncaught ReferenceError: Vue is not defined even tho that vue.js inside vendor is showing with the other scripts when inspecting the page. I also have this inside that twig:

<script>
  var ProjectController = new Vue({
    el: '#ProjectController',
    data: {
      projects: null
    },
    methods:{
     getProjects: function(){
         fetch('/projects/personal').then(function (response) {
            return response.json();
         }).then(function (result) {
            this.projects =  result;
         });
      }
    },
    mounted: function () {
      this.getProjects();
    }
  })
</script>

I'm guessing it's not the right way to load it (?)