The Constructor

The Constructor

app.js and the Framework7 Constructor

src/js/app.js imports Framework7 572,986 from framework7/bundle (all components installed) and the matching framework7/css/bundle styles, then the icon CSS, routes, store and the App component. BookNest keeps the generated constructor call as it is:

The Framework7 constructor in src/js/app.js, as generatedJavaScript

var app = new Framework7({
  name: 'BookNest', // App name
  theme: 'auto', // Automatic theme detection
  colors: {
    primary: '#b3541e',
  },
  el: '#app', // App root element
  component: App, // App main component
  // App store
  store: store,
  // App routes
  routes: routes,
  // Register service worker (only on production build)
  serviceWorker: process.env.NODE_ENV ==='production' ? {
    path: '/service-worker.js',
  } : {},
});

theme: 'auto' picks iOS on iOS devices and Material elsewhere. el and component mount app.f7, and every view shares store and routes. App Initialization Options covers the other options. home.f7 maps $store.getters.books to list items. An iPhone user agent and an Android one get different themes from the same server:

BookNest's home page in both themes, captured by headless Chrome 1 on Windows (hence Windows fonts)

MENU