V-calendar: Can't access $screens with nuxt.js

[ptdev]

Hi,

I'm having an issue with nuxt.js and the beta version of the calendar where I get the following error:

_vm.$screens is not a function

This happens when first accessing the page or when refreshing the page so I'm guessing it's something related with SSR.
I'm using the recommended plugin method to load vcalendar:

import Vue from 'vue'
import Vcalendar from 'v-calendar'
Vue.use(Vcalendar)

I'm loading the plugin as:

plugins: [
    { src: '~/plugins/v-calendar', mode: 'client' },
  ],

And I'm also using no-ssr tags when displaying the component:

<no-ssr>
    <v-date-picker
        id="dateinput"
        v-model="dates"
        class="mb-3"
        mode="range"
        color="green"
        :popover="{ visibility: 'focus', placement: $screens({ default: 'bottom', md: mobile?'bottom':'left-start', lg: 'left-start' })}"
        :columns="$screens({ default: 1, md: 2, xl: 3 })"
        :locale="locale"
        :min-date="new Date()"
        :attributes="calendarAttrs"
        :disabled-dates="blockedDates"
        is-required
    />
</no-ssr>

Everything seems to be working correctly including the responsive functionality from the $screens function, as long as I first load the website on some other page and then navigate into the page with the picker. If I try to load the page with the picker directly or click the refresh button then I get the error above.
Can you confirm that this an actual issue and not only happening on my end? Are there any special instructions on how to use $screens with nuxt.js?
Thanks in advance.

[ptdev]

Hi again, quick followup to this as I've managed to sort of work around the issue.

If I setup a couple of computed properties that check for nuxt's "process.client" and then uses "this.$screens" then it does work. For example:

(...)
computed: {
    place() {
        return process.client ? this.$screens({ default: 'bottom', md: this.mobile ? 'bottom' : 'left-start', lg: 'left-start' }) : null
    },
    cols() {
        return process.client ? this.$screens({ default: 1, md: 2, xl: 3 }) : null
    }
}
(...)

This basically just checks if it's running on the client and returns the result of the $screens function, otherwise just return null.
I still can't use "$screens" directly on the template though.

[payalord]

I have experienced same issue. But in my case it is partially works and partially not. Let's say we have two pages: A and B. And navigation link with nuxt-link from A to B. On page B i'm using v-calendar. If I will load first the page A and navigate then to page B, there is no problems and $screens works fine in template. But then, if I will press reload page button in my browser. I'm getting an error: _vm.$screens is not a function. So it seems that function $screens probably initialize too late, so render happens before that and we getting an error. While with schema A -> B navigation, because i wasn't using v-calendar on page A, but loaded (via Vue.use(...) it on page A, it successfully initialized $screens so then when i navigate to page B with nuxt-link it works fine. To fix this need to check function initialize steps and make sure it happens before template render/execution etc.

[payalord]

Here is my workaround, instead of using global $screens in your template. Create a component method screens and use it instead like this:

<v-date-picker mode="range" :columns="screens({ default: 1, lg: 2 })"></v-date-picker>

// inside component
  methods: {
    screens(args) {
      if (process.client) {
        return this.$screens(args)
      } else {
        return 2 // <-- your default value
      }
    }
  }

[ptdev]

Hi,

That's pretty much exactly the workaround that I've posted above but you're using methods instead of computed properties.
Not exactly sure about the advantages of using either one or the other but both should yield the same result.

[nboaldin]

Just wanted to say I'm having the same issue. Thanks for the workaround.

[SimonFricker]

@payalord comment helped me resolve this
[Vue warn]: Property or method "$screens" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.