The constructor takes one object. Every key is optional, and components add keys named after themselves (panel, dialog, statusbar); the view key sets defaults for every view that app.views.create() makes.
import Framework7 from 'framework7/bundle';
const app = new Framework7({
el: '#app', // root element (default: body)
name: 'BookNest', // default title for dialogs
theme: 'auto', // 'ios' on iPhone/iPad, 'md' everywhere else
darkMode: false, // true, false or 'auto'
colors: { primary: '#2e7d32' },
mdColorScheme: 'default', // Material only; see Section 2.4.4
routes: [], // shared by every view
view: { animate: true }, // defaults for every view you create
on: {
init() {
const view = this.views.create('.view-main', { url: '/' });
console.log(`init theme=${this.theme} rtl=${this.rtl} dark=${this.darkMode}`);
console.log(`view main=${view.main} url=${view.router.url}`);
console.log(`root: ${this.el.className} | html: ${document.documentElement.className}`);
},
},
});Served by Vite 25,978 and opened in desktop Chrome 1 at phone size, it logs:
init theme=md rtl=false dark=false view main=true url=/ root: framework7-initializing framework7-root | html: md
auto resolved to md because the browser is not an iPhone or iPad; the class on <html> switches every component's CSS between iOS and Material styling. framework7-initializing is removed one frame later, which keeps transitions from running during the first paint.
Two options control when init runs. init: false waits for your own app.init() call, for example after loading saved settings, and initOnDeviceReady (default true) makes a Cordova 129 build wait for deviceready (deviceready). The app is also a singleton: a second new Framework7 572,986 () throws "Framework7 is already initialized and can't be initialized more than once", so create it in one module and import app elsewhere.