Main app as master detail

Hi! I’m using f7 version 6.

I have a main app component layout, but I need it as master/detail. How can I do it?

In app.js I can only specify “componentUrl”, but not “master” and “detailRoutes”. If I redefine my master route in routes.js it also not works…

Please, help! :sob: slight_smile:

@nolimits4web can you help me?

I solved this way:

  • remove “view-init” from view element (into html code of master component’s template) and others related data attributes

  • add this code into export section of master component:

      $f7ready(() => {
      	mainView = app.views.create('#view-main', {
      		// enable master detail
      		masterDetailBreakpoint: 768,
      		masterDetailResizable: true,
      		routes: [//(*)
  • into routes(*) of previous code I redeclared my master route with master/detail properties:

      	path: '/desk',
      	componentUrl: 'desk/default/home',
      	// specify home route as master route
      	master(app, router) {
      		return app.device.desktop;
      	detailRoutes: [

Now my app starts with master/detail layout! :slight_smile:
But now I have another problem: routes in my routes.js file not work anymore! I must move them in detail routes…

EDIT: it works on localhost but not online, yet I fixed url in browserHistoryRoot!
This error occours:
Uncaught (in promise) Error: RangeError: Maximum call stack size exceeded

I setted browserHistoryInitialMatch: true, now it works

1 Like