[F7v5 Vue] Panel: visibleBreakpoint doesn't work

I am porting an app to F7v5 and have some trouble with the new side-panel behaviour:

I want the app to show the side-panel(s) at larger sizes automatically, but I can’t seem to get the visibleBreakpoint to do anything. No matter how large the window will get, the panel(s) don’t do anything (worked fine in v4, when I set e.g.leftBreakpoint: 768 in f7params.

Any idea what’s wrong here? (tried both: F7 5.2 and F7 5.3.0)

Below is the beginning of my app.vue component.

<template>
  <f7-app :params="f7params" theme-dark>
    <f7-panel init left cover theme-dark data-swipe="true" data-visible-breakpoint="768">
      <f7-view>
        <f7-page>
          <f7-navbar title="Left Panel"></f7-navbar>
          <f7-block>Left panel content goes here</f7-block>
        </f7-page>
      </f7-view>
    </f7-panel>
...

In Vue you need pass parameters as props, no data- attributes:

<f7-panel init left cover theme-dark :swipe="true" :visible-breakpoint="768">
1 Like

too stupid!! :roll_eyes:

thanks!