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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using NMessageProvider and useMessage in Astro setup #5228

{{title}}

Replies: 0 comments

Select a reply

Using NMessageProvider and useMessage in Astro setup #5228

moseskamau338 Sep 13, 2023

Replies: 0 comments

moseskamau338
Sep 13, 2023