Using slots

  • I would like to add new slots but it’s not working, for instance I have a public component which has 2 child components.


    { path:
          '/public', component: load('Public'),
          children: [
            { path: 'login', component: load('Login') },
            { path: 'register', component: load('Register') }

    And my Public.vue component is like

        <!-- Header -->
        <div slot="header" class="toolbar">
          <!-- opens left-side drawer using its ref -->
          <button class="hide-on-drawer-visible" @click="$">
          <q-toolbar-title :padding="1">
            <slot name="title"></slot>
        <!-- Left side Drawer -->
        <q-drawer ref="leftDrawer">
          <div class="toolbar light">
            <div class="toolbar-content">
              <div class="toolbar-title padding-1">
                {{ 'Menu' | translate }}
          <div class="list platform-delimiter">
            <q-drawer-link to="/public/login">{{ 'Login' | translate }}</q-drawer-link>
            <q-drawer-link to="/public/register">{{ 'Register' | translate }}</q-drawer-link>
        <router-view class="layout-view layout-padding">

    As you can see I have added a <slot name="title"></slot> but when I call the slot from a child component the title is not renderd in the slot, for example if I call from my Login.vue component

        <div slot="title">{{ 'Login' | translate }}</div>
          <div class="floating-label">
            <input type="text" class="full-width" v-model="email" required/>
            <label>{{ 'Email' | translate }}</label>
          <div class="floating-label">
            <input type="text" class="full-width" v-model="password" required/>
            <label>{{ 'Password' | translate }}</label>
            <button type="submit" class="primary full-width">{{ 'Login' | translate }}</button>

    The title is not rendered in the <slot name="title"></slot>, How should I fix this?, is there a different way to deal with this?

  • Admin


    1. Login.vue is not using Public.vue. Can’t see a <public> tag in there anywhere. Don’t exactly understand what you mean by “when I call the slot from a child component”

    2. You are trying to solve a problem in a bit convoluted way. You should focus on communicating between components rather than making a complex architecture. Communicating between components is a delicate subject. Please read about it here:

  • So far I just wanted to pass to the parent component Public.vue from Register.vue or Login.vue a title but I have looked and seems the best way would be using vuex, way to complicated to just pass one parameter.


  • Admin

    @boriscy This is just how Vue works. But you can make a simple store like in Quasar docs link I gave you and import in all components that share the title.

Log in to reply