Vue | How to make Views As Tabs swipeable

Questions
1

I created a Vue app with Template7, and used the tabbed layout.

<!-- Views/Tabs container -->
<f7-views tabs class="safe-areas">
  <!-- Tabbar for switching views-tabs -->
  <f7-toolbar tabbar labels bottom>
    <f7-link
      tab-link="#view-lists"
      icon-ios="f7:square_list_fill"
      icon-aurora="f7:square_list_fill"
      icon-md="material:view_list"
      text="Lists"
    ></f7-link>
    <f7-link
      tab-link="#view-home"
      tab-link-active
      icon-ios="f7:house_fill"
      icon-aurora="f7:house_fill"
      icon-md="material:home"
      text="Home"
    ></f7-link>
    <f7-link
      tab-link="#view-categories"
      icon-ios="f7:stag_fill"
      icon-aurora="f7:stag_fill"
      icon-md="material:local_offer"
      text="Categories"
    ></f7-link>
  </f7-toolbar>

  <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
  <f7-view id="view-home" name="home" main tab tab-active url="/"></f7-view>

  <f7-view id="view-lists" name="lists" tab url="/lists/"></f7-view>

  <f7-view id="view-categories" name="categories" tab url="/categories/"></f7-view>

  <f7-view id="view-settings" name="settings" tab url="/settings/"></f7-view>
</f7-views>

I would like to be able to swipe between the three tabs but I can’t get it to work.

Is this possible?

2


3

From what I get from Google Translate, this is not possible then?

I already experimented quite a bit with wrappers etc, but nothing seems to work.

4

As mentioned above: you can find solution right here.

5

How could I adapt this to my Vue template above?

6

Sorry I didn’t figure out that solution based on “basic” Framework7 version, not Vue. I didn’t use non-Vue version, but I think you could try to re-create functionality of f7-views component (as shown in the example from Vladimir). It may be ugly and not right way, but why not to try?