App.vue

<template>
 <divid="app"class="app">
 <ConnectionStatusv-if="ready" />
 <divv-if="ready"class="content">
 <router-view/>
 </div>
 <VueLoadingIndicatorv-elseclass="app-init-loading overlay big accent"/>

 <StatusBar/>
 <ClientAddonLoader/>
 <LocaleLoader/>
 </div>
</template>

<script>
importi18nfrom'./i18n'

importROUTE_REQUESTEDfrom'@/graphql/app/routeRequested.gql'

exportdefault {
 metaInfo: {
titleTemplate:chunk=> chunk ?`[Beta] ${chunk} - Vue CLI`:'[Beta] Vue CLI'
 },

 computed: {
ready () {
returnObject.keys(i18n.getLocaleMessage('en')).length
 }
 },

 apollo: {
 $subscribe: {
 routeRequested: {
 query:ROUTE_REQUESTED,
result ({ data }) {
this.$router.push(data.routeRequested)
 }
 }
 }
 }
}
</script>

<style lang="stylus">
@import"~@vue/ui/dist/vue-ui.css"
@import"~@/style/main"
</style>

<style lang="stylus" scoped>
.app
displayflex
flex-directioncolumn

.connection-status,
.status-bar
flexauto00

.content
flexauto11
height100%
overflowhidden

.app-init-loading
z-index100000
</style>