Custom screens not working

[bikusta]

Hi everyone,

I'm trying to set custom screen breakpoints in my Nuxt 2 project. But they are not recognized. Other settings are working, e.g. componentPrefix. When I use the default breakpoints (sm, md, lg, xl) everything seems to work properly. Any idea what might be the problem? Thanks!

plugins/v-calender.js

import Vue from 'vue'
import VCalendar from 'v-calendar'

Vue.use(VCalendar, {
  datePickerTintColor: '#F00',
  datePickerShowDayPopover: false,
  screens: {
    small: '300px',
    medium: '400px',
    large: '500px',
    xlarge: '600px'
  }
})

pages/index.vue

In the Template part:

<v-date-picker
        :columns="layout.columns"
        :rows="layout.rows"
        :step="layout.step"
        :is-expanded="layout.isExpanded"

        more properties...
>

Computed property:

layout() {
      return this.$screens({
        default: {
          columns: 1,
          rows: 12,
          isExpanded: false,
          step: 1
        },
        small: {
          columns: 2,
          rows: 6,
          isExpanded: false,
          step: 1
        },
        medium: {
          columns: 3,
          rows: 4,
          isExpanded: false,
          step: 1
        },
        large: {
          columns: 4,
          rows: 3,
          isExpanded: false,
          step: 1
        },
        xlarge: {
          columns: 6,
          rows: 2,
          isExpanded: false,
          step: 1
        }
})

[bikusta]

The problem is not relevant anymore.

Closing.