"No outer <n-dialog-provider /> founded." when provider defined in App.vue template

TuSimple/naive-ui version (版本)

2.28.0

Vue version (Vue 版本)

3.2.31

Browser and its version (浏览器及其版本)

Brave Version 1.35.101 Chromium: 98.0.4758.87

System and its version (系统及其版本)

MacOS(12.1)

Node version (Node 版本)

16.10.0

Reappearance link (重现链接)

https://codesandbox.io/s/8tw62k?file=/src/components/HelloWorld.vue

Reappearance steps (重现步骤)

Load the page

Expected results (期望的结果)

When I click the button, a dialog should appear

Actual results (实际的结果)

Compilation error: [naive/use-dialog]: No outer <n-dialog-provider /> founded.

Remarks (补充说明)

I have the n-dialog-provider defined on the top level App.vue

<template>
  <n-dialog-provider>
    <HelloWorld msg="Hello Vue 3 in CodeSandbox!" />
  </n-dialog-provider>
</template>

and am attempting to open up a dialog on a child component

<script>
import { useDialog } from "naive-ui";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      dialog: useDialog(),
    };
  },
  methods: {
    openDialog() {
      console.log(this.dialog);

      this.dialog.create({
        title: "Confirm",
        content: "Are you sure?",
        positiveText: "Sure",
        negativeText: "Not Sure",
        onPositiveClick: () => {
          console.log("Sure");
        },
        onNegativeClick: () => {
          console.log("Not Sure");
        },
      });
    },
  },
};
</script>

but am getting "No outer <n-dialog-provider /> founded." Am I misunderstanding where to define the dialog provider? Is there a component I need to import for the provider from naive-ui? The docs don’t seem to suggest that I need to…

[07akioni]

https://codesandbox.io/s/confident-nova-fpxi2y?file=/src/components/HelloWorld.vue

[arrbaron]

I’ve modified the original sandbox with your suggestion and I’m still getting the error. (I’ve tried both with defineComponent and without, same result). Could you show me a working sandbox?