Uncaught Reference Error: Vue is not Defined (Despite Direct Script Included in file) - vuejs2

Question

I have been trying to implement this vue.js template into my vue project and it has been returning "Uncaught ReferenceError: Vue is not defined" despite the direct script set on the first line.
<script type="text/javascript" src="https://vuejs.org/js/vue.min.js"</script>
<template>
<div id="app" class="wrapper">
<fullcalendar class="full-Calendar" :events="events" :editable="true"></fullcalendar>
</div>
</template>
<script>
Vue.component('full-calendar', {
template: '<div></div>',
props: {
events: {
type: Array,
required: true
},
editable: {
type: Boolean,
required: false,
default: false
},
droppable: {
type: Boolean,
required: false,
default: false
}
},
data: function()
{
return {
cal: null
};
},
ready: function()
{
var self = this;
self.cal = $(self.$el);
var args = {
lang: 'en',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
height: "auto",
allDaySlot: false,
slotEventOverlap: false,
timeFormat: 'HH:mm',
events: self.events,
dayClick: function(date)
{
self.$dispatch('day::clicked', date);
self.cal.fullCalendar('gotoDate', date.start);
self.cal.fullCalendar('changeView', 'agendaDay');
},
eventClick: function(event)
{
self.$dispatch('event::clicked', event);
}
};
if (self.editable)
{
args.editable = true;
args.eventResize = function(event)
{
self.$dispatch('event::resized', event);
}
args.eventDrop = function(event)
{
self.$dispatch('event::dropped', event);
}
};
if (self.droppable)
{
args.droppable = true;
args.eventReceive = function(event)
{
self.$dispatch('event::received', event);
}
};
this.cal.fullCalendar(args);
}
});
new Vue({
el: '#app',
data: {
events: [
{
title: 'Event1',
start: '2018-08-10 12:30:00',
end: '2018-08-10 16:30:00'
},
{
title: 'Event2',
start: '2018-08-07 17:30:00',
end: '2018-08-07 21:30:00'
}
]
},
events: {
'day::clicked': function(date)
{
console.log(date);
}
}
});
</script>
<style>
.wrapper {
margin: 2rem;
}
</style>
I've also tried adding the direct script to index.html and it leads to "[Vue warn]: Unknown custom element"

Answer 1

you are allowed to use only one <script> tag in the component.
since 2 are present it will give preference to the default syntax flow
<templete></templete>
<script></script>
<style></style>
check out this
https://github.com/vuejs/vue-loader/issues/228
and
https://medium.com/#lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8