Hi , i have this 2 code ,
js/app.js
//*** this is where i import the 3rd party node module that i npm installed it...
import { Auth, BaseModel, Model, Rpc, Utils } from 'orm-webkit/lib/index.js';
// Import main app component
import App from '../app.f7.html';
//this is where i initialize the Authentication class , using constant ...
const auth = new Auth();
//after that i not sure where should i putting my auth from this app.js so that
//my other html template pages can make use of it ...
var app = new Framework7({
root: '#app', // App root element
component: App, // App main component
name: 'mos_app', // App name
theme: 'auto', // Automatic theme detection
// App root data
data() {
return {
apiUrl: "https://api.hnpwa.com/v0/",
api: null ,
auth: auth <====== this is where i tried to pass the auth variable initialized above
}
},
// App routes
routes: routes,
});
But in my other html page ,i.e. home.f7.html , such as as below ,
<template>
<div class="page" data-name="home">
<!-- Top Navbar -->
<div class="navbar navbar-large">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only panel-open" data-panel="left">
<i class="icon f7-icons if-not-md">menu</i>
<i class="icon material-icons if-md">menu</i>
</a>
</div>
<div class="title sliding">mos_app</div>
<div class="right">
<a href="#" class="link icon-only panel-open" data-panel="right">
<i class="icon f7-icons if-not-md">menu</i>
<i class="icon material-icons if-md">menu</i>
</a>
</div>
<div class="title-large">
<div class="title-large-text">mos_app</div>
</div>
</div>
</div>
<!-- Toolbar-->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a href="#" class="link">Left Link</a>
<a href="#" class="link">Right Link</a>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content">
<div class="block block-strong">
<p>Here is your blank Framework7 app. Let's see what we have here.</p>
</div>
<div class="block-title">Navigation</div>
<div class="list">
<ul>
<li>
<a href="/about/" class="item-content item-link">
<div class="item-inner">
<div class="item-title">About</div>
</div>
</a>
</li>
<li>
<a href="/form/" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Form</div>
</div>
</a>
</li>
</ul>
</div>
<div class="block-title">Modals</div>
<div class="block block-strong">
<div class="row">
<div class="col-50">
<a href="#" class="button button-raised button-fill popup-open" data-popup="#my-popup">Popup</a>
</div>
<div class="col-50">
<a href="#" class="button button-raised button-fill login-screen-open" data-login-screen="#my-login-screen">Login Screen</a>
</div>
</div>
</div>
<div class="block-title">Panels</div>
<div class="block block-strong">
<div class="row">
<div class="col-50">
<a href="#" class="button button-raised button-fill panel-open" data-panel="left">Left Panel</a>
</div>
<div class="col-50">
<a href="#" class="button button-raised button-fill panel-open" data-panel="right">Right Panel</a>
</div>
</div>
</div>
<div class="list links-list">
<ul>
<li>
<a href="/dynamic-route/blog/45/post/125/?foo=bar#about">Dynamic (Component) Route</a>
</li>
<li>
<a href="/load-something-that-doesnt-exist/">Default Route (404)</a>
</li>
<li>
<a href="/request-and-load/user/123456/">Request Data & Load</a>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
//Q1. How I get the value of my *** auth ** variable here ?
//Q2. Do i have to put my auth variable within the export default { } below ?
//Q3. How do i get my f7 variable , i.e. the app variable created var app = new Framework7 ?
export default {
on: {
pageMounted: function() {
console.log(self);
},
}
}
</script>
I have listed my questions Q1 , Q2 and Q3 above,
Appreciate for any advice or assistance for my ES6 JS script beginner questions, thanks.