Recently delving into Vue, I'm working on constructing an app that incorporates Typescript and the vue-property-decorator. Venturing into using external modules within a Single File Component (SFC), my aim is to design a calendar component utilizing the v-calendar library and display it on a page named schedule.vue.
After executing yarn add command and attempting to adhere to the guidance provided in the documentation for utilizing v-calendar as a component, I encountered a situation where there were no compilation errors, yet the entire page turned blank upon rendering. Seek assistance in diagnosing the issue accurately. Your valuable input is highly appreciated!
// pages/schedule.vue
<template lang="pug">
VCalendar
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import VCalendar from '../components/calendar.vue';
@Component({
components: {
VCalendar
}
})
export default class Schedule extends Vue {
}
// components/calendar.vue
<template lang="pug">
<v-calendar :attributes="attrs" />
</template>
<script lang="ts">
import 'v-calendar/lib/v-calendar.min.css';
import { Calendar, setupCalendar } from 'v-calendar';
import { Component, Vue } from 'vue-property-decorator';
@Component({
components: {
setupCalendar,
Calendar
}
})
export default class VCalendar extends Vue {
data() {
return {
attrs: [
{
key: 'today',
highlight: {
backgroundColor: '#ff8080',
},
dates: new Date(2018, 0, 1)
}
],
};
}
mounted():any {
setupCalendar({
firstDayOfWeek: 2,
});
}
}
</script>
Despite reviewing similar inquiries, confusion persists:
- Guidance on integrating external vue npm components
- Incorporating external JavaScript within a vue component