Leveraging Framework7 Navigation in Vue 3: A Practical Guide to Native‑Style Page Transitions

Problem & Thesis

When building a mobile‑first web app with Vue 3, developers often rely on Vue Router to handle page changes. However, Vue Router’s hash‑based navigation or history API can feel heavy for pure mobile‑web experiences, especially when you want the smooth, native‑look slide transitions that iOS and Android expect. Framework7 offers a lightweight navigation stack that mimics the behaviour of a native app without the overhead of a full router. The thesis of this post: use Framework7’s <f7-page> and <f7-link> components to declaratively build multi‑page flows that feel native, while keeping Vue’s reactivity intact.

Setting Up Framework7 with Vue 3

1. Initialize a Vite + Vue 3 project:

   npm create vite@latest my-app -- --template vue
   cd my-app
   npm install

2. Install Framework7 and its Vue integration:

   npm i framework7 framework7-vue
   # Optional: install the CSS bundle
   npm i framework7/css

3. Configure Vite to import Framework7’s CSS globally. In main.js:

   import { createApp } from 'vue';
   import App from './App.vue';
   import Framework7 from 'framework7';
   import Framework7Vue from 'framework7-vue';
   import 'framework7/css/framework7.bundle.css';
   
   Framework7.use(Framework7Vue);
   
   createApp(App).mount('#app');

Declarative Page Flow with <f7-page> and <f7-link>

Framework7’s navigation stack is independent of Vue Router. Each <f7-page> is a full page in the stack, and <f7-link> automatically pushes a new page when clicked. A minimal two‑page example looks like this:

<template>
  <f7-app>
    <f7-view>
      <f7-page name="home" >
        <f7-block title="Home">
          <f7-link href="/details" text="Go to Details"></f7-link>
        </f7-block>
      </f7-page>

      <f7-page name="details" >
        <f7-navbar title="Details" back-link="Back"></f7-navbar>
        <f7-block>
          
This is the details page.
        </f7-block>
      </f7-page>
    </f7-view>
  </f7-app>
</template>

When the user taps the link, Framework7 pushes the details page onto the stack and animates a slide‑right transition. The back button automatically pops the stack, returning to home.

Custom Transitions & Performance

Framework7 allows you to override the default slide animation per page using the transition prop or globally via the app.params.transition option. A fade transition can be applied like this:

<f7-page name="details" transition="fade">
  ...
</f7-page>

When testing on a mid‑range device, the transition latency typically stays below 50 ms, and the time to first paint remains under 300 ms once the bundle is cached. However, if a page contains heavy DOM trees or numerous <f7-page> components, the virtual DOM diffing in Vue can become a bottleneck. Keep page content lean and consider lazy‑loading components when possible.

Trade‑offs & Limitations

• No Vue Router: Deep‑linking, browser history, and SEO are not automatically handled. If you need server‑side rendering or search‑engine indexing, you’ll need to keep Vue Router or implement custom URL handling.
• Bundle Size: Importing the full Framework7 CSS bundle adds ~200 KB to the initial load. Use tree‑shaking or import only the components you need.
• Cross‑Platform Animation Variance: CSS transitions may render slightly differently on iOS, Android, and desktop browsers. Test on all target platforms.
• Conflicts with Other UI Libraries: Framework7’s CSS classes can clash with libraries like Vuetify. Use a dedicated CSS namespace or avoid mixing frameworks.

Actionable Next Steps

1. Integrate the navigation stack into your existing Vue 3 project by replacing router-view with <f7-view> and defining <f7-page> components for each logical screen.
2. Define custom transitions on a per‑page basis to match your brand’s motion design guidelines.
3. Measure bundle size with npm run build and webpack-bundle-analyzer; trim unused CSS or modules.
4. If deep‑linking is required, add a small shim that maps URL paths to page names and triggers f7App.views.main.router.navigate on load.
5. Test navigation latency on target devices using Chrome DevTools’ Performance panel or Lighthouse.

By following these steps, you can deliver a mobile‑web app that feels like a native app, with smooth transitions and a lightweight navigation stack, while staying within the Vue 3 ecosystem.