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


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

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

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…

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
  render: h => h(App)
1 Like

Thanks @pvtallulah :sunny:


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

1 Like

View the VueJS Splitview Template online: