Using NMessageProvider and useMessage in Astro setup #5228

moseskamau338 · 2023-09-13T03:55:27Z

moseskamau338
Sep 13, 2023

Hi friends, am really greatful for this amazing library!

In a recent Astro project, I added Vue3 support and Tailwind then installed Naive UI. Every thing worked well so far untill I wanted to use forms and realized I have issues with NMessageProvider
Am getting this error:

Here is my layout file

<!DOCTYPE html>
<html lang="en">
    <head>...</head>
  <body>
    <LayoutWrapper>
         <slot />
    </LayoutWrapper>
  </body>
</html>

Then in the <LayoutWrapper> component:

<script setup lang="ts">
import {NMessageProvider} from 'naive-ui'
</script>

<template>
    <NMessageProvider>
        <slot />
    </NMessageProvider>
</template>

Am then using the useMessage() composable in a ContactForm.vue file inside a .astro file

<template>
// example taken form the docs on forms
</template>

<script lang="ts">
//@ts-ignore
import { FormInst, FormItemRule, useMessage } from 'naive-ui'
//@ts-ignore
import {ref} from 'vue'

export default{
  setup () {
    const formRef = ref<FormInst | null>(null)
    const message = useMessage()
// the rest of the code here

}
</script>

I know am doing this wrong...but what should I do? how should I approach this?
Your thoughts are highly appreciated

jahnli · 2026-01-19T16:46:20Z

jahnli
Jan 19, 2026
Collaborator

<NConfigProvider

<NLoadingBarProvider>
  <NModalProvider>
    <NDialogProvider>
      <NNotificationProvider>
        <NMessageProvider>
          <App />
        </NMessageProvider>
      </NNotificationProvider>
    </NDialogProvider>
  </NModalProvider>
</NLoadingBarProvider>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using NMessageProvider and useMessage in Astro setup #5228

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Using NMessageProvider and useMessage in Astro setup #5228

Uh oh!

moseskamau338 Sep 13, 2023

Replies: 1 comment

Uh oh!

jahnli Jan 19, 2026 Collaborator

moseskamau338
Sep 13, 2023

jahnli
Jan 19, 2026
Collaborator