{"id":10920,"library":"framework7-vue","title":"Framework7 Vue","description":"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.","status":"active","version":"9.0.3","language":"javascript","source_language":"en","source_url":"https://github.com/framework7io/framework7","tags":["javascript","vue","vuejs","mobile","framework","framework7","cordova","ios","iphone","typescript"],"install":[{"cmd":"npm install framework7-vue","lang":"bash","label":"npm"},{"cmd":"yarn add framework7-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add framework7-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"framework7-vue is a wrapper/plugin for Framework7 itself; the core Framework7 library is required at runtime for all UI components and logic.","package":"framework7","optional":false}],"imports":[{"note":"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.","wrong":"import { Framework7Vue } from 'framework7-vue';","symbol":"Framework7Vue","correct":"import Framework7Vue from 'framework7-vue';"},{"note":"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.","wrong":"import Framework7 from 'framework7-vue'; const f7Instance = Framework7.instance;","symbol":"f7","correct":"import { f7 } from 'framework7-vue';"},{"note":"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.","symbol":"f7ready","correct":"import { f7ready } from 'framework7-vue';"},{"note":"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`.","wrong":"import 'framework7-vue/dist/framework7-vue.min.css';","symbol":"Framework7 core CSS","correct":"import 'framework7/framework7-bundle.min.css';"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport Framework7 from 'framework7/lite-bundle'; // Import Framework7 core JS\nimport Framework7Vue from 'framework7-vue'; // Import Framework7 Vue plugin\nimport 'framework7/framework7-bundle.min.css'; // Import Framework7 styles (includes all themes)\n\n// Initialize Framework7 Vue plugin\nFramework7.use(Framework7Vue);\n\nconst App = {\n  template: `\n    <f7-app :params=\"f7params\">\n      <f7-view main url=\"/\"></f7-view>\n    </f7-app>\n  `,\n  data() {\n    return {\n      f7params: {\n        name: 'My F7 App',\n        theme: 'auto', // Detect iOS or Material theme automatically\n        routes: [\n          {\n            path: '/',\n            component: {\n              template: `\n                <f7-page>\n                  <f7-navbar title=\"Welcome\" back-link=\"Back\"></f7-navbar>\n                  <f7-block strong>\n                    <p>This is a simple Framework7 Vue application.</p>\n                    <f7-button fill @click=\"openAlert\">Show Alert</f7-button>\n                  </f7-block>\n                </f7-page>\n              `,\n              methods: {\n                openAlert() {\n                  this.$f7.dialog.alert('Hello from Framework7!');\n                }\n              }\n            }\n          }\n        ]\n      }\n    };\n  },\n  mounted() {\n    this.$f7ready((f7) => {\n      console.log('Framework7 is ready!', f7);\n      // You can now safely use f7 APIs here, e.g., f7.dialog.alert('App mounted!');\n    });\n  }\n};\n\nconst app = createApp(App);\napp.mount('#app');\n","lang":"typescript","description":"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."},"warnings":[{"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.","message":"The `dynamicNavbar` functionality has been completely removed from Navbar components.","severity":"breaking","affected_versions":">=9.0.0"},{"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>`.","message":"The default 'Back' link text in navbars has been changed to an icon-only approach, removing the explicit 'Back' text by default.","severity":"breaking","affected_versions":">=9.0.0"},{"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.","message":"Framework7 CSS/theme files must be imported separately from the `framework7` package, not `framework7-vue`.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The Framework7 Vue plugin (`Framework7Vue`) was not correctly installed or registered with the Vue application.","error":"Failed to resolve component: f7-app"},{"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!'); });`.","cause":"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.","error":"TypeError: Cannot read properties of undefined (reading 'dialog') (or similar error when accessing `this.$f7` or `f7`)"},{"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';`).","cause":"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.","error":"TS2307: Cannot find module 'framework7/framework7-bundle.min.css' or its corresponding type declarations."}],"ecosystem":"npm"}