How to add in nuxt?

[lillodipiazza]

Help me 🙂

[iNeoO]

HI wish version of nuxt are you using ?

[iNeoO]

Hi i tried with this version https://codesandbox.io/s/suspicious-haze-lcgiil

[lillodipiazza]

thankyou

i use 2.15.8

i copied your example but 500 - Cannot read properties of undefined (reading 'tabClass')

[lillodipiazza]

Nothing? :(

[iNeoO]

Hi, could you provide a repo or a code sandbox to reproduce?

[iNeoO]

Hi can u provide some code ? did you define date, loading, classnames ? how did u geneeratee meetingsDays ?

[jUll3n]

thankyou

i use 2.15.8

i copied your example but 500 - Cannot read properties of undefined (reading 'tabClass')

You need 2.6.x version of Nuxtjs

[iNeoO]

these properties must be defined in the component using this components. It's some props

[jUll3n]

these properties must be defined in the component using this components. It's some props

Well this is where I am struggling. I am using

<vue-meeting-selector class="simple-example__meeting-selector" v-model="meeting" :date="date" :loading="loading" :class-names="classNames" :meetings-days="meetingsDays" @next-date="nextDate" @previous-date="previousDate" />

I can't find any examples with filled properties.

[iNeoO]

most of them are in the doc only the generation of meetingsDays is missing

meetingsDays is supposed to be generated by an api call anyway i wrote a script to generate them in TS (to create exemple) in the last version (using vue3 the file is available in JS) if you don t have api, you can use this file to generate slots.

meeting: is an array or null (date) depends if you set possible to select multiple slots date: is the the first date of meetings slots available loading: is to display a loading screen (boolean) ClassNames: Is to set some custom class to the meeting-selector, it s optional nextDate/previousDate: Is function used to update meetingsDays (make api call or generate again slots)

[jUll3n]

most of them are in the doc only the generation of meetingsDays is missing

meetingsDays is supposed to be generated by an api call anyway i wrote a script to generate them in TS (to create exemple) in the last version (using vue3 the file is available in JS) if you don t have api, you can use this file to generate slots.

meeting: is an array or null (date) depends if you set possible to select multiple slots date: is the the first date of meetings slots available loading: is to display a loading screen (boolean) ClassNames: Is to set some custom class to the meeting-selector, it s optional nextDate/previousDate: Is function used to update meetingsDays (make api call or generate again slots)

Ok thanx for your kind explanations. So I am missing the api or the script, the tabs are not generated because of the empty meetingsDays. Where can I find the Api or js file ?

[iNeoO]

It's your own api, for the script, he isn't available for the vue2 version, but you can copy it https://github.com/iNeoO/vue-meeting-selector/blob/feature/vue3/src/helpers/slotsGenerator.js

[jUll3n]

ah ok shd I import the file this way in my js file :

import VueMeetingSelector from 'vue-meeting-selector'; import "vue-meeting-selector/src/helpers/slotsGenerator.js";

[iNeoO]

you can't import it because he isn't available in js in vue-meeting-selector@1.1.1 You can copy it for the moment. (I will try to make a release today to add it)

there is an exemple here https://github.com/iNeoO/vue-meeting-selector/blob/master/src/components/Examples/SimpleExample.vue usung it

[jUll3n]

well I got this file cos I did an npm install my nuxtjs app. I checked its the same file as your link.

So do you mean it cannot works in nuxtjs ?

[iNeoO]

I altered the example to use the slotGenerator.js file https://codesandbox.io/s/suspicious-haze-lcgiil?file=/pages/index.vue

i published a new release 1.1.3 so you can directly import the file import slotsGenerator from "vue-meeting-selector/helpers/slotsGenerator";

File wasn't available on 1.1.3 (maybe you are using 2.0.0-beta-2, it s a a vue3 component)

[jUll3n]

Thanx for this again. Unfortunately When I am adding it in nuxtjs on a fresh install I am now getting the following error :

Cannot read properties of undefined (reading 'tabClass');

I guess I'll come back into it later when I got more knowledge of Nuxtjs.

Thanx for helping., you rox.

[iNeoO]

remove tablClass props in the template

[carollodn]

Hello @iNeoO, am I wrong or the example you linked doesn't work?

thank you

[iNeoO]

Yeah i forgot to update the old version, fixed it