No outer n-notification-provider found - HELP Needed

[harshuchilzy]

I have a laravel app which is running on the Vue3. Althought I am getting this error when I try to use the notification. Can somebody help me to resolve it.
Uncaught (in promise) Error: [naive/use-notification]: No outer n-notification-provider found.

Importing the NaiveUI

import { NConfigProvider, NNotificationProvider, NLayout, NMessageProvider, NLoadingBarProvider, NDialogProvider } from "naive-ui";

AppLayout.vue

<n-config-provider :theme-overrides="themeOverrides" preflight-style-disabled>
      <n-loading-bar-provider>
        <n-message-provider>
          <n-notification-provider>
            <n-dialog-provider>

Here is my components are loaded

 </n-dialog-provider>
          </n-notification-provider>
        </n-message-provider>
      </n-loading-bar-provider>
    </n-config-provider>

On my component I am using the Notifications via
let notification = useNotification();

When I put this, above error is on console and page won't render at all. Please help

[sahitono]

you need to restructure to be something like this https://github.com/Talljack/naive-ui-provider . It is because the usenotification is injecting variable from parent, therefore NNotificationProvider and the component can't be written in single file