scope is empty object

[Jones-S]

Hi there.
I am using vue breakpoint and I like it much so far.
Unfortunately I realized that recently i stopped working. I experience that scope is an empty object on init and is not reactively updated.

Maybe this is linked to #8 ...

I have this code:

<template>
  <div class="FloatingImages">
    <v-breakpoint>
      <div slot-scope="scope" v-if="scope.viewportWidth">
        <div v-if="scope.viewportWidth > 800">
          Bigger than 800
        </div>
        <div v-else>
          Smaller than 800
        </div>
      </div>
    </v-breakpoint>
  </div>
</template>

<script>
import { VBreakpoint } from 'vue-breakpoint-component'

export default {
  name: 'FloatingImages',
  components: {
    VBreakpoint
  },
  props: {
    images: {
      type: Array,
      required: true
    },
  }
}
</script>

The problem is, that scope is always empty:

Only on window resize it is updated and then things start to work.
I am not sure, what I changed, I only worked on other components, but at some point my code stopped working. Unfortunately I can't really go back, because I made some changes to the backend as well, so I can't fetch the data like I used to.

Any idea, why it is not initiated properly?

if it helps:
https://github.com/Jones-S/radio-megahex

The project is public anyway.

[Jones-S]

Oh 🖐️ !
I realized that it stopped working, because another component also imports VBreakpoint.
If I only have it once in the whole project it works, if it is there twice it stops working...

Instead of installing it globally, I would rather use it in a cherry-picking-mode, where I just use it when needed, because there are some views which don't.
Is there a way?

Thanks for your input.

---- Edit:

Although I think I would prefer to have the component registration locally, I tried to set it up with a global registration.
I am somehow a bit confused how this whole registration works.
Anyway in my main.js I register the component:

...

import { VBreakpoint } from 'vue-breakpoint-component'

Vue.use(VBreakpoint)

Vue.component('v-breakpoint', VBreakpoint)
...

To make it available in all components on my page.
I now use it like:

    <v-breakpoint>
      <div slot-scope="scope" v-if="scope.viewportWidth">
        <button v-if="scope.viewportWidth < 430" class="Navigation__menu-button" @click="toggleMenu">{{ navMenuOpen ? 'Close Menu' : 'Open Menu'}}</button>
      </div>
    </v-breakpoint>

But only the first occurence of v-breakpoint returns a usable scope object. The second occurance returns an empty object for the scope again.

So maybe could you help me out, how to register the components globally and use them in multiple places?

Thank you and cheers

Oh and: if I install it globally as you proposed to do:

import {
  Plugin as VBreakpoint
} from 'vue-breakpoint-component'

Vue.use(VBreakpoint)

I get this error

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[adi518]

Thanks for your issue, I'll investigate asap. I should note however, that I plan to rewrite it, because it goes around in a bit of a hacky way, which possibly created this bug.

[Jones-S]

Thanks. Much appreciated 👍
If we could find a quick fix for this I would be super happy for now :). It kinda broke a project that is live 😅

[adi518]

I'll give it a go, hopefully with some resolve tomorrow. Also, if you can, correct your code snippets. For multiline snippets use three backticks (to open/close) and paste your code in between. You can also suffix the snippet with extension, so it will highlight the code correctly. I also suggest formatting the code and removing bits that don't contribute to the issue on hand.

Code highlight examples

Suffix the three opening backticks with an extension, e.g.: ```html, ```js, etc'.

HTML (Vue templates)

<template>
  <div class="foo">hello foo</div>
</template>

JavaScript

function foo() {
  console.log("foo")
}

[Jones-S]

I know, I was just lazy :).
I added the extension and removed some of the code. 👍
Thx for the effort.

(I thought about using v-breakpoint within a wrapper component and storing the information about the current breakpoint in my vuex store. That could also be a solution, what do you think?

[Jones-S]

Did you make any progress by any chance?

[adi518]

Not yet. Can you please provide a quick repro? I read your snippets, but it'll help tremendously if you are able to provide a repro. Also, what version do you use? is it latest? upgrade to latest in case it isn't and report back if the issue persists.

[Jones-S]

I use the latest that is true. Unfortunately I don't have a quicker repro than: https://github.com/Jones-S/radio-megahex

You can try to get it to run if you want to.

Anyway, I think the main thing, and also how you could try this is having a vue app and including import { VBreakpoint } from 'vue-breakpoint-component' and using vue breakpoint in two different components, which are both loaded in the same view/parent component.

Right now I have quite a few things to do, so I wont' have time to reduce this down into a simple reproduction – I'd rather use the time to fix things on the live page with saving the current breaktpoint in vuex I guess... Sorry

I will be available for questions though.
thanks anyway, if you don't manage to find time, no worries.
Cheers

[Jones-S]

For me it was easier to fix this issue by just using the v-breakpoint component in a component that appears on every page and then commit a mutation to save the current breakpoint in my vuex store.

<template>
  ...
  <VBreakpoint @input="updateBreakpoint($event)" />
  ...
</template>

[adi518]

Sounds good. I'll get back to this asap.