munte8065
FormData in Nuxt
Hello friends,
I need to use FormData for a POST api call.
Here is my FormData
const formData = new FormData();
formData.append("your-name", "someEmail");
formData.append("your-company-name", "someEmail");
formData.append("your-email", "[email protected]");
My first implement is with useFetch
const { data, error } = await useFetch(
runtimeConfig.public.CONTACT_FORM_API,
{
method: "POST",
headers: {
"Content-Type":
multipart/form-data; charset=utf-8; boundary= + ${Math.random().toString()},
Accept: "/",
},
body: formData,
}
);
Sadly , it does not work because when I check on back-end, the data is empty.
My second implement is with useFetch useAsyncData and $fetch
const { data } = await useAsyncData("contactForm", () =>
$fetch(runtimeConfig.public.CONTACT_FORM_API, {
method: "POST",
headers: {
"Content-Type": multipart/form-data; charset=utf-8; boundary= + ${Math.random().toString()},
Accept: "/",
},
body: formData ,
})
);
it still does not work as on back-end, the data is empty.
So I think that i did not attach FormData correctly. I search about it on google, gemini, chatGPT, claude, blackbox, but it was no use.
Can somebody help me please ??
Thank you so much in advance.2 replies
“wpcf7_unit_tag_not_found”, “There is no valid unit tag.”
Hello friends
I am using Nuxt as front-end, WordPress as back-end for CMS purpose. In front-end, I create a form-data below:
……
some code
….
body.append(“_wpcf7”, “20”);
body.append(“_wpcf7_version”, “5.9.8”);
body.append(“_wpcf7_unit_tag”, “wpcf7-f20-o1”);
My problem is that I receive the code “wpcf7_unit_tag_not_found” and message “There is no valid unit tag.” I check my form id and it is correct. I check my syntax and it is correct as well. However when I try out with Postman, magically, it works. Then I try out on WordPress theme, it works. I know it works because I receive the auto response email. The saddest things is it does not work when I use POST API call on Nuxt.
More detail about my code :
this is my custom composable for fetching data purpose
import { useFetch } from "#app";
import { useRuntimeConfig } from "#app";
export default async function useContactFormAPI(body) {
const runtimeConfig = useRuntimeConfig();
const { data, error } = await useFetch(runtimeConfig.public.CONTACT_FORM_API, {
method: "POST",
headers: {
"Content-Type":
multipart/form-data; charset=utf-8; boundary= + ${Math.random().toString()},
},
body: body,
});
console.log(error);
return data.value;
}
this is my event handler
const handleClick = async (event) =>{
const body = new FormData();
....
some data
....
body.append(“_wpcf7”, “20”);
body.append(“_wpcf7_version”, “5.9.8”);
body.append(“_wpcf7_unit_tag”, “wpcf7-f20-o1”);
const data = await useContactFormAPI(body);
console.log(data);
console.log(event);
}
Can someone please help me out ?
Thank you so much in advance.!!!1 replies
Nuxt & Wordpress
Hello friends, I'm in a project using Nuxt and Wordpress as a headless CMS.
I need to implement ACF plugin , Yoast SEO / RankMath SEO plugin in wordpress. I will use the WPGraphQL plugin to extract data from posts, comments, used plugins from wordpress.
I read these references about how to implement Nuxt, Wordpress, WPGraphQL plugin, ACF plugin, Yoast SEO / RankMath SEO plugin.
https://wpengine.com/builders/headless-wordpress-nuxt-3-vue-3/
https://github.com/AxeWP/wp-graphql-rank-math
https://wpengine.com/builders/seo-headless-wordpress-yoast-next-js-wpgraphql/
https://www.youtube.com/watch?v=qRtkrbWL9G0
However, in real life project, there will be unexpected problems happen and my narrow knowledge could not cover all of that and I need to prepare in advanced. So I really beg you guys who are experience or did projects using any of what I mention above. Please tell me what problems you met, how you solved it and any advices for me. I really appreciate for whatever comments about my problem.
Thanks so much in advance.
Enjoy your day
6 replies