Can't initialize any component

21

in the same file! :sweat_smile:

import {Meteor} from 'meteor/meteor';
import {Template} from 'meteor/templating';
import Framework7 from 'framework7';
import {vrApp} from "../../../../imports/reactiveVar";
import {checkNFCAndroid, threeDTouch, scanNFCTagListener, getPreferredLanguage} from "../../../lib/lib";


Template.mainLayout.onRendered(function () {

getPreferredLanguage();

const app = new Framework7({
    root: "#app",
    //theme : 'md',
    statusbar: {
        iosOverlaysWebView: false,

        iosBackgroundColor: "#3b68b2",
        iosTextColor: "white",

        androidBackgroundColor: "#3b68b2",
        androidTextColor: "white",
    },
    toolbar: {
        hideOnPageScroll: false,
    },

    navbar: {
        hideOnPageScroll: false,
        iosCenterTitle: true,
    },
    panel: {
        swipe: "left",
        leftBreakpoint: 768,
        rightBreakpoint: 1440,
        swipeActiveArea: 50
    },
    view: {
        iosDynamicNavbar: false,
    },
    popup: {
        closeByBackdropClick: false,
    },
    routes: false,
    router: false
});

// Expose Internal DOM library
//var $$ = Dom7;

//let mainView = app.views.create('.view-main');

vrApp.set(app);

//il modo in cui vengono chiamai i listener da android ad ios cambia, quindi devo attiverne uno qui per iOS
if (device.platform === "iOS") {

    scanNFCTagListener();

    //threeDTouch()

}

if (device.platform === "Android") {

    checkNFCAndroid(app);

}

let bool = true;

Tracker.autorun(function () {

    if (Meteor.status().connected === true && bool === false){

        app.dialog.close();

        bool = true
    }

    if (Meteor.status().connected === false && bool === true){

        app.dialog.preloader(TAPi18n.__("connection"));

        bool = false;

    }


});


});

Template.mainLayout.helpers({



});

Template.mainLayout.events({



});
22

Ok, nice!

so if you go to the docs you see how to import F7 with es-modules;

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

Framework7 can also be imported as an ES-next module:

import Framework7 from 'framework7';

Framework7 has modular structure and by default it exports only core Framework7 with core components .

And if you need additional components they must be included additionally:

// Import core framework
import Framework7 from 'framework7';

// Import additional components
import Searchbar from 'framework7/components/searchbar/searchbar.js';
import Calendar from 'framework7/components/calendar/calendar.js';
import Popup from 'framework7/components/popup/popup.js';

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

// Init app
var app = new Framework7({/*...*/});

Such modular structure provides best tree-shaking results and package size optimization.

ES Module Bundle

If you need to include Framework7 with all components, we can include its another script bundle with all components installed:

// Import framework with all components
import Framework7 from 'framework7/framework7.esm.bundle.js';

// Init app
var app = new Framework7({/*...*/});

So after reading all that you should decide if you will import only the components you need or the bundle.

Hope it helps!

23

Hi pvtallulah!
I don’t know why, but the Framework7 installed with npm, give me an error. There is an issue with Meteor and Framework7 v4. When I import from npm package, meteor don’t start! O.o.
I downloaded the package and I have to import the all the core files inside my meteor project!

Finally my app start! Thank you for your support! :smiley: