Netlify Forms Nuxt JS Error - POST https://festive-fermi-f2a8f1.netlify.app/ 404. Uncaught (in promise) Error: Request failed with status code 404

Question

Just for the info, upon deployment, the form was created in netlify along with the app, so the form should be visible to the crawler. However upon testing the deployed nuxt app, and submitting the form, I recieve the above mentioned 404.

I have tried incremental changes like changing ssr: true in nuxt.config.js , adding the netlify tag to the opening element etc. and still no luck.

Any help would be greatly appreciated.

Contact.vue - here 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
        );   
      }
}

Here 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
  },
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    // titleTemplate: '%s - app',
    title: 'Gynaecologia et perinatologia',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'description', content: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.', name: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.' },
      { hid: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.', name: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.', content: 'Časopis za ginekologiju, perinatologiju, reproduktivnu medicinu i ultrazvučnu dijagnostiku.' },
      { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [

  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    [
      'nuxt-i18n',      
      {
        vueI18nLoader: true,
        defaultLocale: 'hr',
         locales: [
          {
             code: 'en',
             name: 'Eng',
             iso: 'en-US'
          },
          {
             code: 'hr',
             name: 'Hrv',
             iso: 'hr-HR'
          }
        ],
        vueI18n: i18n
      }
    ],
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
    '@nuxtjs/fontawesome'
  ],
  fontawesome: {
    icons: {
      solid: true,
      brands: true
    }
  },
  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    'nuxt-i18n',    
  ],

  i18n: {
    strategy: 'prefix_except_default',
    seo: true,
    i18n: {      
      locales: [
        {
          code: 'en',
          name: 'Eng',
          iso: 'en-US'
       },
       {
          code: 'hr',
          name: 'Hrv',
          iso: 'hr-HR'
       }
      ],
      defaultLocale: 'hr',
      vueI18n: {
        fallbackLocale: 'hr',
        messages: {
          hr: {
            welcome: 'Dobrodošli'
          },
          en: {
            welcome: 'Welcome'
          }
        }
      }
    }
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // baseURL: 'https://gynaecolperinatol.hr/',
    // retry: { retries: 3 }
  },
  // publicRuntimeConfig: {
  //   axios: {
  //     browserBaseURL: 'https://gynaecolperinatol.hr/'
  //   }
  // },

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
  
}

Answer 1

Adding ssr: true in nuxt.config.js fixed the problem.