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

npm install framework7-vue

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FRAMEWORK7-VUE

framework7-vue

web-frameworkjavascriptv9.0.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

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.

Framework7Vue

✓ import Framework7Vue from 'framework7-vue';

✗ import { Framework7Vue } from 'framework7-vue';

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 { f7 } from 'framework7-vue';

✗ import Framework7 from 'framework7-vue'; const f7Instance = Framework7.instance;

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.

f7ready

✓ import { f7ready } 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.

Framework7 core CSS

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

✗ import 'framework7-vue/dist/framework7-vue.min.css';

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`.

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 issues

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

fix

Review your application's `f7-navbar` implementations. If you relied on `dynamicNavbar`, you will need to refactor your navigation structure to explicitly define unique navbars for each page or use other dynamic rendering techniques. There is no direct replacement for this specific functionality.

affects: >=9.0.0

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

fix

If your application relies on the visible 'Back' text, you must explicitly set the `back-link` prop to your desired text, for example, `<f7-navbar title="Page Title" back-link="Back"></f7-navbar>`.

affects: >=9.0.0

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

fix

Ensure you import the correct CSS file, typically `import 'framework7/framework7-bundle.min.css';` or specific theme files like `framework7/framework7-ios.min.css` in your entry point (e.g., `main.js/ts`). Missing these imports will result in unstyled components.

affects: >=1.0.0

Errors

Common errors & fixes

Failed to resolve component: f7-app

The Framework7 Vue plugin (`Framework7Vue`) was not correctly installed or registered with the Vue application.

fix

Ensure you have `import Framework7 from 'framework7/lite-bundle'; import Framework7Vue from 'framework7-vue'; Framework7.use(Framework7Vue);` (or `app.use(Framework7Vue)`) in your application's entry file before mounting the Vue app.

TypeError: Cannot read properties of undefined (reading 'dialog') (or similar error when accessing `this.$f7` or `f7`)

Attempting to access the Framework7 instance (`this.$f7` or the `f7` export) before Framework7 has fully initialized or before it's available within the component context.

fix

Use the `f7ready` utility function or the `this.$f7ready()` component method to ensure Framework7 is initialized before interacting with its APIs. For example, `this.$f7ready((f7Instance) => { f7Instance.dialog.alert('Hello!'); });`.

TS2307: Cannot find module 'framework7/framework7-bundle.min.css' or its corresponding type declarations.

TypeScript is unable to resolve the imported CSS module, often because there's no declaration file for `.css` imports or the `framework7` types are missing.

fix

Ensure you have installed `@types/framework7` (`npm install -D @types/framework7`) and that your `tsconfig.json` includes `"allowSyntheticDefaultImports": true` and a `css.d.ts` file or similar declaration to handle CSS module imports (e.g., `declare module '*.css';`).

Upgrade

Version history

9.0.3latest on npm

Audit

Dependencies

framework7requiredframework7-vue is a wrapper/plugin for Framework7 itself; the core Framework7 library is required at runtime for all UI components and logic.

Agent activity

4 hits · last 30 days

node

Resources

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

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

homepagehttps://framework7.io ↗