After deploying the application in Netlify, the form should be visible to the crawler. However, upon testing the deployed Nuxt app and submitting the form, I consistently receive a 404 error.
I have made various incremental changes such as modifying ssr: true in the nuxt.config.js file and adding the netlify tag to the opening element, but unfortunately, I still face the same issue.
If anyone could provide assistance, it would be greatly appreciated.
Contact.vue - this is my form component with all the HTML and methods:
<form class="contact-grid"
name="contact"
method="POST"
data-netlify="true"
data-netlify-honeypot="bot-field"
@submit.prevent="handleSubmit"
>
<input value="contact" name="form-name" type="hidden" />
<label class="grid-name">
<input id="grid-name" type="text" name="name" :placeholder="$t('Name')"
/>
</label>
<label class="grid-prezime">
<input id="grid-prezime" type="text" name="lastName" :placeholder="$t('LastName')"
/>
</label>
<label class="grid-predmet">
<input id="grid-predmet" type="text" name="subject" :placeholder="$t('Subject')"
/>
</label>
<label class="grid-email">
<input id="grid-email" type="email" name="email" placeholder="Email"
/>
</label>
<label class="grid-komentar">
<textarea id="grid-komentar" type="text" name="comment" :placeholder="$t('Comment')"
/>
</label>>
<button type="submit" class="grid-submit-btn">{{ $t('Send') }}</button>
</form>
data() {
return {
message: {
name: "",
lastName: "",
subject: "",
email: "",
comment: "",
myFile: undefined
}
}
},
methods: {
handleSubmit: (event) => {
const { name } = Object.fromEntries(new FormData(event.target))
let message = { name, lastName, subject, email, comment }
let encoded = Object.keys(message)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(message[key])}`)
.join("&")
console.log(encoded);
const axiosConfig = {
header: { "Content-Type": "application/x-www-form-urlencoded" }
};
axios.post(
"/",
({
"form-name": "contact",
...encoded
}),
axiosConfig
);
}
}
This is the configuration file for Nuxt: nuxt.config.js
import colors from 'vuetify/es5/util/colors'
import i18n from './config/i18n'
export default {
target: 'static',
ssr: false,
generate: {
fallback: true
},
head: {
title: 'Gynaecologia et perinatologia',
htmlAttrs: {
lang: 'en'
},
// Other meta tags and link elements
},
css: [
],
plugins: [],
components: true,
buildModules: [
[
'nuxt-i18n',
{
vueI18nLoader: true,
defaultLocale: 'hr',
// Other settings
}
],
'@nuxtjs/eslint-module',
'@nuxtjs/vuetify',
'@nuxtjs/fontawesome'
],
fontawesome: {
icons: {
solid: true,
brands: true
}
},
modules: [
'@nuxtjs/axios',
'nuxt-i18n'
],
i18n: {
// Internationalization settings
},
axios: {},
vuetify: {
// Vuetify theme customization
},
build: {
}
}