useNewsletterSubscribe error

[SPH73]

UPDATE: I saw now that I only need to call it in fetch('/api/newsletter/subscribe')
but I only have the email field, so how can I add the other fields like firstName and lastName so that they will be included in the post data to MailChimp?

const result = await $fetch("/api/newsletter/subscribe", {
    method: "post",
    body: formData.value,
  });
  console.log("result****", result);

Hello, I can't find where the useNewsLetterSubscibe composable is or where to implement it in your docs.

I have completed the setup with MailChimp without the component option. I just have no idea how to actually use it.

Where is the composable coming from or how/where do I add it as it doesn't seem to be auto-imported?

I get an error when trying to submit the form because useNewsletterSubscribe is not defined.

//nuxt.config.ts
...
modules: [
    "@nuxtjs/tailwindcss",
    "@tailwindcss/typography",
    "nuxt-newsletter",
  ],
  newsletter: {
    mailchimp: {
      apiKey: process.env.MAILCHIMP_API_KEY,
      audienceId: process.env.MAILCHIMP_AUDIENCE_ID,
      serverPrefix: process.env.MAILCHIMP_SERVER_PREFIX,
    },
  },
...

<script lang="ts" setup>
definePageMeta({
  layout: "construction",
});

// form data
const formData = ref({});
const firstName = ref({ val: "", isValid: true });
const surname = ref({ val: "", isValid: true });
const email = ref({ val: "", isValid: true });

const formIsValid = ref(true);

// methods
const validateForm = () => {
  formIsValid.value = true;

  // form details
  if (firstName.value.val === "") {
    firstName.value.isValid = false;
    formIsValid.value = false;
  }
  if (surname.value.val === "") {
    surname.value.isValid = false;
    formIsValid.value = false;
  }
  if (email.value.val === "" || !email.value.val.includes("@")) {
    email.value.isValid = false;
    formIsValid.value = false;
  }
};

async function handleSubmit() {
  validateForm();
  if (!formIsValid.value) {
    return;
  }

  formData.value = {
    firstName: firstName.value.val,
    surname: surname.value.val,
    email: email.value.val,
  };
  
  const result = await useNewsletterSubscribe(formData.value);
  console.log(result);
}
</script>

TIA!

[Baroshem]

Hey,

the composable is auto imported (with TS) so it should be accessible for you anywhere. You can also just call the endpoint newsletter subscribe from you app instead of using the composable.

You also dont need other things as email is the only property actually needed to be able to subscriber users to newsletter.

[SPH73]

I did manage to successfully add a subscriber using your module but as I am being requested for a more personalised subscriber list I will need to create an API endpoint to include the other fields. Thank you, anyway!

[Baroshem]

Glad it worked out!