parsley/app/javascript/components/App.vue

<template>
  <div>
    <app-navbar></app-navbar>
    <section id="app" class="section">
      <div class="container">
        <router-view v-if="!hasError"></router-view>
        <div v-else>
          <h1>Error!</h1>
          <p>{{error}}</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script>

  import { mapMutations, mapState } from "vuex";
  import AppNavbar from "./AppNavbar";
  import api from "../lib/Api";

  export default {
    computed: {
      ...mapState({
        hasError: state => state.error !== null,
        error: state => state.error,
        authChecked: state => state.authChecked
      })
    },

    methods: {
      ...mapMutations([
        'setUser'
      ])
    },

    mounted() {
      if (this.user === null && this.authChecked === false) {
        this.loadResource(api.getCurrentUser(), user => {
          this.setUser(user);
        })
      }
    },

    components: {
      AppNavbar
    }
  }

</script>