Plugins and Bindings

Plugins API, Lazy Modules and Choosing a Binding

Every Framework7 572,986 component is a module, and so can your code be: an object with a name and any of params, create() (run with this as the new app), on (app events), proto, static and clicks. Framework7.use() installs it before new Framework7(), as React 7,897 and Vue 5,482 do. BookNest's plugin keeps the document title in step with the visible page, which names an installed PWA's or a desktop app's window:

src/js/page-title.js, installed in app.js with Framework7.use(PageTitle)JavaScript

export default {
  name: 'pageTitle',
  params: { pageTitle: { separator: ' · ' } }, // override with new Framework7({ pageTitle: {...} })
  create() {
    const app = this;
    app.pageTitle = {
      set(page) {
        const titleEl = page.el.querySelector('.navbar .title');
        const text = titleEl ? titleEl.firstChild.textContent.trim() : '';
        const { separator } = app.params.pageTitle;
        document.title = !text || text === app.name ? app.name : `${text}${separator}${app.name}`;
      },
    };
  },
  on: {
    pageAfterIn(page) {
      if (page.view && page.view.el.classList.contains('tab-active')) this.pageTitle.set(page);
    },
    pageTabShow(pageEl) {
      this.pageTitle.set({ el: pageEl });
    },
  },
};

Opening Salt and Saffron, then the Cart tab, then Home again, printed BookNest, Salt and Saffron · BookNest, Cart · BookNest and Salt and Saffron · BookNest.

Lazy modules go the other way: import framework7/lite (core components such as view, page, navbar, list and button) and load the rest on demand. The React demo's book page now loads Toast on the first Add to cart with f7.loadModule((await import('framework7/components/toast')).default). With framework7/lite-bundle, vite build had produced one 1,036.86 kB script (282.24 kB gzipped); now it produced 511.01 kB (148.00 kB gzipped) plus a 1.82 kB toast chunk.

Pick the binding your team knows: Core without a UI framework, React or Vue to share components with a web app; Svelte 5 36,701 , the fourth, is structured like Vue.

MENU