Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[naive/use-message]: No outer <n-message-provider /> founded

See original GitHub issue

新手请教<n-message-provider/>到底该怎么用

# App.vue
<template>
  <n-message-provider>
    <HelloWorld/>
  </n-message-provider>
</template>

<script setup>
import HelloWorld from './components/HelloWorld.vue';
</script>

<style>

</style>

# HelloWorld.vue
<template>

  <n-space>
    <n-button @click="info"> 信息 </n-button>
    <n-button @click="error"> 错误 </n-button>
    <n-button @click="warning"> 警告 </n-button>
    <n-button @click="success"> 成功 </n-button>
    <n-button @click="loading"> 加载中 </n-button>

  </n-space>
</template>

<script>
import { useMessage, NButton } from 'naive-ui'

export default {
  setup () {
    const message = useMessage()
    return {
      info () {
        message.info("I don't know why nobody told you how to unfold your love")
      },
      error () {
        message.error('Once upon a time you dressed so fine')
      },
      warning () {
        message.warning('How many roads must a man walk down')
      },
      success () {
        message.success(
          "'Cause you walked hand in hand With another man in my place"
        )
      },
      loading () {
        message.loading(
          'If I were you, I will realize that I love you more than any other guy'
        )
      }
    }
  }
}
</script>

F12 报错[naive/use-message]: No outer <n-message-provider /> founded，新手实在不知道<n-message-provider />该放哪，求指教