On the way of creating a f7 vuejs split-view template

Questions
1

Hi

currently I’m working on this:

Under way I struggle with router / view problems:

  • While ./pages/about.vue works, ./pages/left-page-1.vue does not. But they are structurally equivalent.
  • ./pages/left-page-2.vue is still the F7 HTML verstion and not converted to f7-vue. It works to.
  • split-view does not to work yet.

I’d love to get any hints or advice.

Thanks, Andreas

2

Hi,
I tested your template, and the issue with LeftPage1 its bad sintax in routes.js you wrote compoent

...
  // Left View Pages
  {
    path: "/left-page-1/",
    // change compoent - > for component
    compoent: LeftPage1
  },
  {
    path: "/left-page-2/",
    component: LeftPage2
  },
...
2 Likes
3

Hi @pvtallulah, you saved my day :joy:
I’ve fixed it now and wonder why it even worked halfway.

The next thing I’d like to solve is Split-View…

4

Ok, i dont know what you are trying to achive.
but add this code, and panel left in view-left should appear, when 960px breakpint is hit

new Vue({
  // Init Framework7 by passing parameters here
  framework7: {
    id: "io.framework7.testapp", // App bundle ID
    name: "Framework7", // App name
    theme: "auto", // Automatic theme detection
    // App routes
    routes: Routes,
    // Enable panel left visibility breakpoint
    panel: {
      leftBreakpoint: 960
    }
  },
  store,
  render: h => h(App)
}).$mount("#app");
1 Like
5

Thanks @pvtallulah :sunny:

https://github.com/zoosky/framework7-template-split-vue-webpack/commit/56c224b0a9a7a861caf9160594b1e9d8a39fe407

Still on the way of translating @nolimits4web split-view template in a vuejs flavor.

1 Like
6

View the VueJS Splitview Template online:

https://objective-knuth-82f1e2.netlify.com/