<toast-container> is not available at mounted hook / can not create a message in the mounted hook

[paulgeisler]

I maybe have the same issue as another reporter.

I do placed <toast-container></toast-container> in the template.

<div id="user_profile" v-if='store.state.team.record && store.state.user.record'>
    <div class='header-container'>
      <mq-header :team='store.state.team.record' :user='store.state.user.record' :navi_items='naviItems'></mq-header>
      <toast-container class='header-toast-container' :toastConfig="headerToastConfig"></toast-container>
    </div>
    <div id='main'>
      <div class='row'>
        <div class="column medium-6 large-5 large-offset-1 hide-for-small-only">
          <mq-sub-navigation :navi_items="naviItems.subNavi"></mq-sub-navigation>
        </div>
        <div class="column medium-16 mediumlarge-14 large-12 end">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <toast-container class='footer-toast-container' :toastConfig="footerToastConfig"></toast-container>
  
    <mq-footer></mq-footer>
  </div>

And here i try to create a toast in the mounted hook. At this moment everything should be ready and the <toast-container> should be rendered.

computed: {
      headerToastConfig: function () {
        return { toastContainerId: 1 }
      },
      footerToastConfig: function () {
        return { toastContainerId: 2 }
      },
...
mounted () {
      this.$vueOnToast.pop({
        toastContainerId: 1,
        type: 'success',
        title: 'Toast Title',
        body: 'Popped from Vue instance'
      })
    },
...

But i get following error message:

Error in mounted hook: "Error: No Toaster Containers have been initialized to receive toasts."

[paulgeisler]

create hook of the is way beyond the app mounted hook.

09:23:46.841 'PUSH TOAST (FROM MOUNTED HOOK)'
09:23:47.821 'CONTAINER CREATED (FROM vue-on-toast.esm.js)'

[paulgeisler]

Okay the reason why it didn't worked for me was my template setup.

<div id="user_profile" v-if='userAvailable'>
    <div class='header-container'>
      <my-header :navi_items='naviItems'></my-header>
      <toast-container :toastConfig="{ toastContainerId: 'header' }"></toast-container>
    </div>
...

Because of v-if the content is only rendered if userAvailable is true and the <toast-container> is inside of it. The mounted hook on the other hand is called before the user data is fetched and the template is rendered.

I simply didn't know that the created hook is called after the component is rendered in the template.

[Stabzs]

Glad you figured out the issue @paulgeisler.

Typically it would be advisable to render the <toast-container></toast-container> as high up in the DOM as possible and preferably outside of any conditionally rendered content, unless you absolutely must render it within a specific component. The container is designed to be component-agnostic.