How to load modules in new version?

1

I have the following in my routes.js

path: '/signup-step1/',
component: Step1,
on: {
    pageAfterIn: function test (e, page) {
      // do something after page gets into the view
      var calendarDOB = app.calendar.create({
        inputEl: '#dob',
        dateFormat: 'mm/dd/yyyy',
        closeOnSelect: true,
        //inputReadOnly: false,
      });
    },
  }

When I load the page signup-step1, I get an error because app.calendar is not defined. (Cannot read property ‘create’ of undefined)

In my app.js, I have this at the top…
import Calendar from ‘framework7/components/calendar/calendar.js’;

Obviously that is not how to import a component. How do I do it?

2

// Install F7 Components using .use() method on class:
Framework7.use([Searchbar, Calendar, Popup]);

https://framework7.io/docs/package.html#es-module

3

Thanks Shastox, but that didn’t resolve the issue either. I did find a solution, though.

var calendarDOB = this.app.calendar.create

Adding “this.” made it find the plugin.

4

And it is better to move page-related logic into page component as you anyway use it