I am new in Framework7.I want to create a web app using framework7 core and php for api.I have created a file based on documentation.
My package.json:
“dependencies”: {
"dom7": "^3.0.0",
"framework7": "^6.1.1",
"framework7-icons": "^4.0.2",
"material-icons": "^1.0.1",
"skeleton-elements": "^3.4.0",
"swiper": "^6.8.0"
},
“devDependencies”: {
"cpy-cli": "^3.1.1",
"cross-env": "^7.0.3",
"postcss-preset-env": "^6.7.0",
"rollup-plugin-framework7": "^1.1.0",
"vite": "^2.4.4"
}
component-loader.js:49 Uncaught (in promise) Error: ReferenceError: Dom7 is not defined
myscript :
export default () => {
var $$ = Dom7;
app.request.postJSON(‘http://localhost/api/customer/check_otp ’, { email:‘[email protected] ’, otp: ‘7463951’ })
.then(function (res) {console.log(res.data.token)
localStorage.setItem('token', res.data.token);
//app.views.main.router.navigate('/welcome/');
$$('.login').html(res.data);
console.log('Load was performed');
});
return $render;
}
f16
July 28, 2021, 9:23am
2
<script>
export default (props,{ $, $f7 }) => {
// $ => Dom7 --> $('.login').html();
// $f7 => app --> $f7.request();
return $render;
};
</script>
2 Likes
In addition to @f16 answer, you can also import it:
<script>
import $ from 'dom7';
export default () => {
...
}
</script>
1 Like
Thank you for your reply.I was try with your code.But again get error.
Uncaught SyntaxError: Cannot use import statement outside a module.
I have put this code in my home.html file.
import $ from ‘dom7’;
export default () => {
app.request.postJSON('http://localhost/api/customer/check_otp', { email:'[email protected] ', otp: '746395' })
.then(function (res) {
if(res.data.token==undefined){
app.views.main.router.navigate('/login/');
}
console.log('Load was performed');
});
}
//app.js
// Dom7
var $ = Dom7;
// Theme
var theme = ‘md’;
if (document.location.search.indexOf(‘theme=’) >= 0) {
theme = document.location.search.split(‘theme=’)[1].split(’&’)[0];
}
// Preloader
setTimeout(function () {
$('.loader-screen').hide();
}, 2000);
// Init App
var app = new Framework7({
id: ‘io.framework7.testapp’,
el: ‘#app ’,
theme,
view : {
//pushState: true,
browserHistory: true,
},
// store.js,
store: store,
// routes.js,
routes: routes,
popup:{
closeOnEscape: true,
},
sheet: {
closeOnEscape: true,
},
popover: {
closeOnEscape: true,
},
actions: {
closeOnEscape: true,
},
vi: {
placementId: 'pltd4o7ibb9rc653x14',
},
});
// Option 1. Using one ‘page:init’ handler for all pages
$(document).on(‘page:init’, function (e) {
app.panel.close();
});
The code you posted looks outdated and doesn’t have much sense to me. Create new project with Framework-CLI and vite bundler Framework7 Command-Line Interface
1 Like
Thank you.I will create new one.
Generating package.json
