@Martin said in Could you change the Layout header slot from a child component?:

I understand this would be easy with titles, but what about buttons? Showing, hiding, attaching methods…? Does this mean you have to parameterise buttons per state/view?

I posted a workaround for this here:
http://forum.quasar-framework.org/topic/783/nested-q-layout-behavior-0-13-vs-0-14-again/2

I’m using a ‘common’ headerBar.vue as a component that I import in each page.vue component separately.
The advantage is that I can set up the common stuff in the headerbar and override it in a page.vue whenever needed.
Also, gui design/placement remains consistent in all pages.
Maybe this is a way out for you? I’m still on 0.13 but I suppose this will also work in 0.14

HeaderBar.vue

<template>
  <div class="toolbar">
    <!-- DEFAULT MENU BUTTON THAT OPENS LEFT DRAWER -->   
    <slot name="btn1left">
        <button class="hide-on-drawer-visible"
                style="width:30px; padding:0;"
                @click="openLeftSideBar()">
          <i>menu</i>
        </button>
    </slot>
    <!-- BUTTON 2 LEFT -->
    <slot name="btn2left"></slot>
     <!-- TITLE -->   
    <q-toolbar-title>
      <div class="toolbarTitle">
        <slot name="title"></slot>
      </div> 
     <div class="toolbarSubTitle">
        <slot name="subTitle"></slot>
      </div>
    </q-toolbar-title>
    <!-- BUTTON 5 RIGHT WITH A DEFAULT method-->
    <slot name="btn5right">
      <button-circular  size="small" icon="settings"
                       :onClick="openCollectionList"></button-circular>
    </slot>
    <slot name="btn4right"></slot>
    <slot name="btn3right"></slot>
    <slot name="btn2right"></slot>
    <!-- BUTTON 1 RIGHT WITH A DEFAULT login.vue button component-->     
    <slot name="btn1right">
      <login></login>
    </slot>
  </div>
</template>

Page.vue

<template>
  <q-layout>
    <header-bar slot="header">
    <div slot="btn1left>
        <!-- OVERRIDE LEFT DRAWER BUTTON WITH SOMETHING ELSE -->
        <button @click="doSomethingElseHere()> myLocalButton</button>
     </div>
    <div slot="title"> {{t.skills}}</div>
    <div slot="subTitle">{{subTitle}}</div>
    <div slot="btn4right"></div>
      ...

<script>
  import HeaderBar from '../common/HeaderBar.vue'
...

export default {
    components : {
      HeaderBar,
      ...

I have a splash screen mapped to ‘/’ so the app always open with splash.vue.
However, in the splash component I use the created() method to conditionally redirect to another page.

created () {
      if (....) {
        router.push(...)
      }
      else {
        router.push(...)
      }
  } 

Maybe this approach works for you?

I just updated to webpack 3.5.1 build time is now 4 secs.
Seems to work ok with quasar .13.4

This was caused by a typo, wasn’t it?

All my media files are in the statics dir.
Meanwhile I discovered a nasty bug with firebase and webpack. Turns out that webpack is adding the entire firebase.js each time it sees a method call to this package. After ditching firebase my build is now ~ 10Mb.
Nevertheless, my dev build still lasts for about 16 secs now. When I start off with a clean quasar build again , build time starts around 5 secs, but over time (weeks) it increases. Last week it suddenly went from 15 secs to 50 secs, after doing some regular coding. No module installs or anything else. Webpack is becoming very annoying. I can see on google that a lot of people are battling slow build times. I think I’ll lock my self up for a week and start learning webpack from the ground up again.

Before I start digging into webpack, does anyone know what “the usual suspects” are when web pack builds are getting slow.
My dev build is reaching 2 min by now!
Thanks.

Never mind. I’ve built my own i18n.

This should be pretty straight forward so I wonder what I’m missing here.
I’ve set up vue-i18n in main.js like this:

const messages = {
  en : {
    message : {
      hello : 'hello world'
    }
  },
  ja : {
    message : {
      hello : 'こんにちは、世界'
    }
  }
}
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n     = new VueI18n(
  {
    locale : 'ja', // set locale
    messages // set locale messages
  })
Vue.use(Quasar) // Install Quasar Framework
Quasar.start(
  () => {
    /* eslint-disable no-new */
    new Vue(
      {
        el     : '#q-app',
        i18n,
        router,
        render : h => h(require('./App'))
      }
    )
  }
)

component

<template>
...
 <div>{{ $t('message.hello') }}</div>
...

output

The package seems to work but it’s giving warnings that it can’t find the translations.

vue-i18n] Cannot translate the value of keypath "message.hello". Use the value of keypath as default

Fixed. I think this was caused by the drawer being embedded in a router-view. I removed the drawer (which is a component) and placed it inside the parent component.

Main.vue

<template>
  <div>
       <router-view class="layout-view"></router-view>
    <left-side-bar ref="leftSideBar"></left-side-bar>
  </div>
</template>