I’m trying to create popup for all pages of my app. Which is the best way to do it? I would like to have an external file with ‘template’ and ‘script’ tags.
First I’ve tried to make a router component this way: in routes.js
{
path: '/settings',
popup: {
componentUrl: '../pages/components/widgets/settings-popup.f7.html',
on: {
popupOpen: function (popup) {
console.log(popup);
}
}
}
},
and in settings-popup.f7.html:
<template>
<div class="popup">
<div class="view">
<div class="page">
<div class="page-content">
...
</div>
</div>
</div>
</div>
</template>
However, when clicking link with href="/settings", I’m getting “GET http://localhost:8080/pages/components/widgets/settings-popup.f7.html 404 (Not Found)” in console.
Also I tried to create popup with app.popup.create() but I can’t figure out how to provide ‘content’ property with path to file, all examples provide only hard-coded HTML layout.