I'm trying to create a vue component that utilizes the FullCalendar vue component:
<script>
import FullCalendar from '#fullcalendar/core'
import interactionPlugin from '#fullcalendar/interaction'
import dayGridPlugin from '#fullcalendar/daygrid'
export default {
components: {
FullCalendar
},
data: function() {
return {
calendarOptions: {
plugins: [ dayGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
events: '/schedule/month_events',
eventOrder: "building_id",
selectable: true,
defaultAllDay: true,
editable: true,
dateClick: this.handleDateClick,
headerToolbar: {
left: '',
center: 'title',
right: 'prev today next'
}
}
}
},
methods: {
handleDateClick: function(arg) {
console.log('test');
}
}
}
</script>
<template>
<FullCalendar :config="calendarOptions" />
</template>
<style scoped>
</style>
and I get the following error:
[Vue warn]: Unknown custom element: <FullCalendar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
If I create my own component, it displays the template and finds the component just fine.
How do I properly use FullCalendar component in my Vue JS component?
Since you are using Vue component, you need to import from #fullcalendar/vue. You are currently importing from #fullcalendar/core.
Related
i'm new to vue js an wanted to write a fancy little demo.
I was trying to use tailwindcss in a new project.
I've created the project with
vue create vue-tailwind-template
and added tailwind with
vue add tailwind
I removed the demo component "helloworld" an all styles. In App.vue i try to use an div with class "bg-red", but no red background in output. These are my project files. Does anybody see the problem? Thank you in advance.
Sven
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<div class="bg-red"><p>Hallo</p></div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
main.js
import { createApp } from 'vue'
import App from './App.vue'
import './assets/tailwind.css'
createApp(App).mount('#app')
Problem solved.
Classname "bg-red" doesn't exist. I had to use a number to define color intensity, e.g. "bg-red-500"
I'm using queries Apollo and i want to know how to wait datas to display my page.
Because i'm getting warning and errors. See screen
import TemplatePresentationPage from "./../components/TemplatePresentationPage.vue";
import gql from 'graphql-tag'
export default {
apollo: {
entry: gql`MY QUERY`
},
components: { TemplatePresentationPage },
name: "PresentationRoyalArmy",
props: {},
setup() {
},
};
</script>
<template :v-if="entry">
<TemplatePresentationPage
:resultOfQuery="entry.datas"
/>
</template>
<style lang="scss" scoped></style>
Ok i found a solution:
Need ton install vue composable (https://v4.apollo.vuejs.org/guide-composable/setup.html)
See this page (https://v4.apollo.vuejs.org/guide-composable/query.html#usequery)
After fullcalendar updated their props to go outside of the <FullCalendar /> element I have some problems rendering events.
I know that the state request is fulfilled in Vuex because I've tested this so many this without a getter and with a getter and nothing seems to work...
<template>
<v-container>
<FullCalendar :options="calendarOptions" />
<li v-for="event in events" :key="event.id">
{{event.name + ' ' + event.start}}
</li>
</v-container>
</template>
<script>
import FullCalendar from '#fullcalendar/vue'
import dayGridPlugin from '#fullcalendar/daygrid'
import interactionPlugin from '#fullcalendar/interaction'
import timeGridPlugin from '#fullcalendar/timegrid'
import listPlugin from '#fullcalendar/list'
import { mapState, mapActions, mapGetters } from 'vuex'
export default {
components: {
FullCalendar
},
data() {
return {
calendarOptions: {
plugins: [timeGridPlugin, listPlugin ,dayGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
selectable: true,
events: this.allEvents,
}
}
},
computed: {
...mapState({
events: state => state.calendar.events
}),
...mapGetters('calendar', ['allEvents']),
},
created () {
this.getAll();
},
methods: {
...mapActions('calendar', {
getAll: 'getAll',
}),
}
}
</script>
Is there any way to render the elements with just the state? I thought that setting events to this.events would be working, but I'm probably way off here. I'm new to Vue and Vuex so help is much appreciated! :) The list is just to know that the state is working as it should be.
You can still bind the events in template by doing something like this:
<FullCalendar :options="{
...calendarOptions,
events: events
}" />
I'm faced with a problem while implementing Highmaps.
In my vue project with Webpack, I followed each step explained https://github.com/highcharts/highcharts-vue to use Highmaps.
Here's my main.js file
//highchart
import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'
import WorldMap from '#highcharts/map-collection/custom/world.geo.json'
import USMap from '#highcharts/map-collection/countries/us/us-all.geo.json'
import mapInit from 'highcharts/modules/map.js'
import DrillDown from 'highcharts/modules/drilldown.js'
mapInit(Highcharts);
DrillDown(Highcharts);
Highcharts.maps['world'] = WorldMap;
Highcharts.maps['us'] = USMap;
And, here's my vue file
<template>
<div>
<mymap :mapOptions="mapOptions.options"></mymap>
</div>
</template>
<script>
export default{
data(){
return {
mapOptions: {
options: {
chart: {
map: 'us',
events: {
drilldown: function(e){
var chart = this;
this.addSeriesAsDrilldown(e.point, {
data: 'world',
dataLabels: {
enabled: true,
format: '{point.name}'
}
})
},
drillup: function(){
}
}
},
series: [{
data: data,
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled:true,
color: '#FFFFFF',
format: '{point.name}'
}
}],
}
}
}
},
}
</script>
Because the chart has 'chart': 'us' option, it renders US map first. Then, when I click any state (just for a test) it switches US map to world map.
It renders world map. However, it also render US map too. That is, it renders both two maps. How can I fix it??
Im currently trying to import vue2-dropzone into my Laravel project so it is using Laravel mix.
I am importing it in my bootstrap.js as below:
import vueDropzone from "vue2-dropzone";
Vue.component('vueDropzone', vueDropzone)
I then want to be able to use in one of my components which is inside a file called "CreatePersonalExpense.vue". This component is accessed using Vue router.
Below is a snippet of how it is being used in my component:
<template>
<div class="form-row py-2">
<div class="col-md-12">
<h4>Upload</h4>
<vue-dropzone v-on:vdropzone-sending="sendingFiles" id="drop1" ref="myVueDropzone" #vdropzone-complete-multiple="afterAllFilesUploaded" :options="dropOptions"></vue-dropzone>
</div>
</div>
</template>
<script>
export default {
data() {
return {
type: "personal",
id: "",
total: "",
files: {
},
dropOptions: {
url: '/api/expenses/files',
autoProcessQueue: false,
uploadMultiple: true,
headers: { "x-csrf-token": document.querySelector('meta[name="csrf-token"]').getAttribute('content') },
params: {}
},
errors: new Errors(),
form: new Form(),
}
},
components: {
vueDropzone
}
}
</script>
However the dropzone is not recognised and I get the error:
Uncaught ReferenceError: vueDropzone is not defined
However if I were to import the dropzone directly into this Vue component by putting import vueDropzone from "vue2-dropzone"; at the beginning of the script tag, dropzone works fine. Why can't I just include it in the bootstrap.js file and have it work for there?
If you already register vueDropzone in bootstrap.js, you don't need to register it again in your component. You should remove this in CreatePersonalExpense.vue
components: {
vueDropzone
}
vueDropzone is an undefined variable. Just remove it and it should work.
Try defining as below =>
Vue.component('vue-dropzone', vueDropzone)