ReferenceError: useNewsletterSubscribe is not defined

[toddpadwick]

Hi, I am struggling to get this to work. I have the below setup, but I get ReferenceError: useNewsletterSubscribe is not defined. Any idea what I'm doing wrong?

component:

<script setup lang="ts">

  const submitEmail = ref(null);
  const successful = ref(false);
  const error = ref(false);

  const props = defineProps({
    subscribe:{required:false,type:Object},
  })

  const submitSubscribe = async (e) => {
    const result = await useNewsletterSubscribe(submitEmail.value);
    console.log(result);
  }

</script>

Nuxt.config

modules: [
    "@nuxtjs/sanity",
    "nuxt-jsonld",
    "@pinia/nuxt",
    "@nuxt/image-edge",
    "@nuxtjs/robots",
    "@pinia-plugin-persistedstate/nuxt",
    'nuxt-simple-sitemap',
    'nuxt-schema-org',
    "@vueuse/nuxt",
    "nuxt-newsletter",
  ],
newsletter:{
    mailchimp: {
      apiKey: process.env.MAILCHIMP_API_KEY,
      serverPrefix: process.env.MAILCHIMP_SERVER_PREFIX,
      audienceId: process.env.MAILCHIMP_AUDIENCE_ID
    }
  },

error:

Subscribe.vue:39 Uncaught (in promise) ReferenceError: useNewsletterSubscribe is not defined
    at submitSubscribe (Subscribe.vue:39:20)
    at chunk-VT7SFOAW.js:1706:16
    at callWithErrorHandling (chunk-JROTR2UA.js:186:18)
    at callWithAsyncErrorHandling (chunk-JROTR2UA.js:194:17)
    at HTMLFormElement.invoker (chunk-VT7SFOAW.js:516:5)

Nuxt info

Operating System: Darwin
Node Version: v16.20.0
Nuxt Version: 3.6.1
Nitro Version: 2.5.2
Package Manager: npm@8.19.4
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

[samuelreichor]

@toddpadwick I had the same problem and got it to work with that:

 const result = await $fetch("/api/newsletter/subscribe", {
                method: "post",
                body: { email: emailAddress },
            });

[idorenyinudoh]

thank you for this @samuelreichor 🙏🏽