Wrapping main component

[ilyosjon09]

Hello everyone!

I am trying to use NaiveUI message component. As per this component's requirement, I need to wrap main App component with n-message-provider

The NaiveUI docs describes this as:

If you want use message, you need to wrap the component where you call related methods inside n-message-provider and use useMessage to get the API.

So my question is, how can I do that?
I am using Laravel Breeze Inertia Stack, so I opened app.js and could not figure out how to implement the component I mentioned above.

I really appreciate your help!

[RobertBoes]

I'm not sure if you need to wrap the entire app in an n-message-provider, seems like you could as well just wrap it in your page components, so your page would look something like:

<template>
  <n-message-provider>
    <div>
      <!-- Your page content -->
    </div>
  </n-message-provider>
</template>

Perhaps you could even do that in a layout component

If you want to wrap the App component, maybe you could try to initialize your app by rendering your component as a parent, something ike this:

import { NMessageProvider } from 'naive-ui'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({
        render: () => h(NMessageProvider, h(App, props))
    })
      .use(plugin)
      .mount(el)
  },
})

I haven't tested any of this, but it would be the first steps I'd try 👍

[ilyosjon09]

Rendering NMessageProvider as a parent solved the problem. When I tried your solution, it worked perfectly. However there was a warning in the console:

[Vue warn]: Non-function value encountered for default slot. Prefer function slots for better performance. 
  at <MessageProvider> 
  at <App>

After some research I found out that the render function must be modified a bit like this:
render: () => h(NMessageProvider, () => h(App, props))

Warning message dissapeared after this.

Thank you very much!