I am trying to display a simply toast message from onDeviceReady() function in my app.js file.
function defaultToast(){
app.toast.create({
text: 'Hello, how are you?',
destroyOnClose:true,
on: {
opened: function () {
console.log('Toast opened')
}
}
}).open();
}
function onDeviceReady() {
defaultToast()
}
I am get this this error:
Uncaught TypeError: Cannot read property ‘create’ of undefined
Even when i tried to run the below code within the onDeviceReady(), I could this error too:
Uncaught TypeError: Cannot read property ‘toast’ of undefined
this.$app.toast.show({
backdrop: true,
disableUserInteraction: false,
icon: '<i class="material-icons">check_circle</i>',
text: __('__PLACEHOLDER_CONFIRM_ITEM_SAVED__'),
position: 'center',
closeTimeout: 1500,
on: {
close: function() {
this.app.views.current.router.back();
}
}
});
What should I define to make each of these functions to run?
Note I have the initial definition on top of the file:
import Vue from ‘vue’;
import Framework7 from ‘framework7/framework7.esm.bundle.js’;
import Framework7Vue from ‘framework7-vue/framework7-vue.esm.bundle.js’;
import ‘framework7/css/framework7.bundle.css’;
import App from ‘…/components/app.vue’;
Framework7.use(Framework7Vue,lodash);
if(!newapp){
newapp = // Init App
new Vue({
el: ‘#app’,
render: (h) => h(App),
store,
// Register App Component
components: {
app: App
},
});
}
Thanks
Nosa Osahon