Registry / web-framework / framework7-vue

framework7-vue

library9.0.3jsnpmunverified

framework7-vue is an integration package that bridges the powerful mobile UI components of Framework7 with the reactive capabilities of Vue.js, enabling developers to build full-featured iOS and Android applications. The package is currently at version 9.0.3, released recently with bug fixes for calendar and modal components. Framework7 itself is known for providing native-like UI/UX for both iOS and Material Design themes, and this package wraps those components for seamless use within Vue applications. It maintains a frequent release cadence, primarily focusing on bug fixes and incremental improvements in minor versions, while major versions (like v9.0.0) introduce significant UI/UX overhauls to align with latest platform designs (e.g., iOS 26 styles, Material You) and may include breaking API changes. Its key differentiators include its comprehensive set of pre-built UI components, dedicated themes for iOS and Material Design, and its ability to be used with Cordova or Capacitor for native app packaging.

web-framework

github ↗package ↗homepage ↗

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

This is the default export representing the Vue plugin, which you pass to `app.use()` to register all Framework7 components and features with your Vue application.

import Framework7Vue from 'framework7-vue';

The `f7` named export provides direct access to the global Framework7 core instance for programmatic API calls (e.g., dialogs, router). Within Vue components, `this.$f7` or `useFramework7()` (Composition API) is often preferred.

import { f7 } from 'framework7-vue';

This utility function allows you to execute code once Framework7's core instance is fully initialized, which is crucial for interacting with its APIs reliably, especially outside Vue component lifecycle hooks.

import { f7ready } from 'framework7-vue';

Framework7's core CSS (including themes) is imported directly from the `framework7` package, not `framework7-vue`. Choose `framework7-bundle.min.css` for all styles, or specific themes like `framework7/framework7-ios.min.css`.

import 'framework7/framework7-bundle.min.css';

This quickstart demonstrates a basic Framework7 Vue application. It initializes Framework7, registers the Vue plugin, imports necessary CSS, and sets up a root `f7-app` component with a simple page, navbar, and a button that interacts with the Framework7 dialog API.

import { createApp } from 'vue'; import Framework7 from 'framework7/lite-bundle'; // Import Framework7 core JS import Framework7Vue from 'framework7-vue'; // Import Framework7 Vue plugin import 'framework7/framework7-bundle.min.css'; // Import Framework7 styles (includes all themes) // Initialize Framework7 Vue plugin Framework7.use(Framework7Vue); const App = { template: ` <f7-app :params="f7params"> <f7-view main url="/"></f7-view> </f7-app> `, data() { return { f7params: { name: 'My F7 App', theme: 'auto', // Detect iOS or Material theme automatically routes: [ { path: '/', component: { template: ` <f7-page> <f7-navbar title="Welcome" back-link="Back"></f7-navbar> <f7-block strong> <p>This is a simple Framework7 Vue application.</p> <f7-button fill @click="openAlert">Show Alert</f7-button> </f7-block> </f7-page> `, methods: { openAlert() { this.$f7.dialog.alert('Hello from Framework7!'); } } } } ] } }; }, mounted() { this.$f7ready((f7) => { console.log('Framework7 is ready!', f7); // You can now safely use f7 APIs here, e.g., f7.dialog.alert('App mounted!'); }); } }; const app = createApp(App); app.mount('#app');

Debug

Known footguns

breakingThe `dynamicNavbar` functionality has been completely removed from Navbar components.

breakingThe default 'Back' link text in navbars has been changed to an icon-only approach, removing the explicit 'Back' text by default.

gotchaFramework7 CSS/theme files must be imported separately from the `framework7` package, not `framework7-vue`.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

9 hits · last 30 days

gptbot

ahrefsbot

script

bingbot

Resources

githubhttps://github.com/framework7io/framework7 ↗

packagehttps://www.npmjs.com/package/framework7-vue ↗

homepagehttps://framework7.io ↗