title: How can i define a global variable with Laravel 8, Inertia.js and Vue3?
body: <p>I want to define a global variable or provide/inject or another way in default app.js file.</p>
  <pre><code>import { createApp, h } from &quot;vue&quot;;
  import { createInertiaApp } from &quot;@inertiajs/inertia-vue3&quot;;
  import { InertiaProgress } from &quot;@inertiajs/progress&quot;;
  import Toast from &quot;vue-toastification&quot;;
  import &quot;vue-toastification/dist/index.css&quot;;
  import { useToast } from &quot;vue-toastification&quot;;
  
  const appName = window.document.getElementsByTagName(&quot;title&quot;)[0]?.innerText || &quot;Laravel&quot;;
  const toast = useToast();
  
  createInertiaApp({
    title: (title) =&gt; `${title} - ${appName}`,
    resolve: (name) =&gt; require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
      return createApp({ render: () =&gt; h(app, props) })
        .use(Toast)
        .use(plugin)
        .mixin({ methods: { route } })
        .mount(el);
    },
  });
  </code></pre>
  <p>I want to pass <code>toast</code> variable to all other components.</p>
  <p>Here are some things I've tried so far:</p>
  <ol>
  <li>Vue3 Global Properties</li>
  </ol>
  <pre><code>createInertiaApp({
    title: (title) =&gt; `${title} - ${appName}`,
    resolve: (name) =&gt; require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
      app.config.globalProperties.$toast = toast; // Cannot read properties of undefined (reading 'globalProperties')
  
      return createApp({ render: () =&gt; h(app, props) })
        .use(Toast)
        .use(plugin)
        .mixin({ methods: { route } })
        .mount(el);
    },
  });
  </code></pre>
  <ol start="2">
  <li>Also tried Provide/Inject in AppLayout.vue</li>
  </ol>
  <pre><code>  setup() {
      const toast = useToast();
  
      return { toast };
    },
  
    provide: {
      toast: this.toast,
    },
  </code></pre>
  <p>In one of the child components i tried to inject this.</p>
  <p><code>inject: [&quot;toast&quot;]</code></p>
  <p>i got the error 'injection &quot;toast&quot; not found.'</p>