How to pass variable back from app.f7.html to home.f7.html if app.f7.html is used as the login screen?

I have my login screen in app.f7.html with all methods to log in with Facebook there too and after I logged in I want to have the user data and all json arrays available at the the home.f7.html page but it seems that are not there when I finished logged in…

how can I pass the variables from app.f7.html to home.f7.html?

I have for instance this code inside app.f7.html

  <div id="app">

    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main view-init safe-areas" data-url="/"></div>

    <!-- Login Screen -->
    <div class="login-screen" id="my-login-screen">login code here</div>


  export default {
    data() {
      return {
      loggedIn: false,
      user: null,
    methods: {

      SignInWithFacebook: function () {
            loggedIn: true,
            user: {
              name: 'test'

at home.f7.html the user is still null and loggedIn still false…

      {{#if user}}
      no info

any tips how to pass all variables after logged in from app.f7.html to home.f7.html?


In page components, root data available as $root.user

Now, if we need to call main app component methods or change its data, we can reference its instance via app.rootComponent . And from other components it is available as this.$root .

1 Like

thank you so much for the tip to solve this! I will really like to have login screen inside the app.f7.html and some methods there… this really helps!

thank you