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 (?)