Nuxt.js: nuxt build Breaks VueJS Events

[zacharytyhacz]

I'm running a nuxtjs application in production through npm run build and it's causing some VueJS functionality to break, particular with DOM events.

However, development mode works just fine as it should flawlessly, though it is slower than production mode due to the code not being minified and compiled and all that.

• @click events do not fire their functionality
• .prevent does not prevent anything

The @click event calls on my <span> tags that change the view do not do anything.

Upon hitting enter to fire v-on:keydown.enter="login" it does not get prevented and the form gets submitted as a GET request to the same page ( the URL shows the GET ?variables ) and the login method that is supposed to be called, does not get called.

After looking at the HTML code in the browser to see if there's any logged warnings or errors, there's nothing and nothing on the server side logs.

Plus, the <button> tags that have the @click to fire the login or signup methods do not have any events on them, basically not doing anything; just HTML.

On my production server after running nuxt build by executing npm run build, there are no errors or warnings.

Here's my source of an example section that does not work.

<template>
<div class='card'>
    <div class='tabs 2-col'>
                <!-- These @click events do not work on production -->
        <span :class="{active : view != 'signup'}" @click="view = 'login'">
            Login
        </span>
                <!-- These @click events do not work on production -->
        <span :class="{active : view == 'signup'}" @click="view = 'signup'">
            Sign Up
        </span>
    </div>
    <div class='card-body'>
                <!-- These this keydown.enter doesn't fire this method -->
        <form v-show="view == 'login'" v-on:keydown.enter="login" novalidate>
            <!-- my other html -->
            <button @click.prevent="login">Login</button>
        </form>
        <form v-show="view == 'signup'" v-on:keydown.enter="signup" novalidate>
            <!-- my other html -->
            <button @click.prevent="signup">Sign Up</button>
        </form>
    </div>
</div>
</template>
<script>
export default {
    data : function(){
        view : 'login',
    },
    methods : {
        login: function(){
            // my functionality
        },
        signup:function(){
            // my functionality
        },
    }
}
</script>

Thank you for any help! I've been banging my head for hours.

_{This question is available on Nuxt community (#c9690)}

[cmty[bot]]

This issue as been imported as question since it does not respect nuxt.js issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/nuxt.js/issues/c9690.

[steveDL]

I am having this same very issue out of nowhere?!

I actually managed to figure out why all my events had gone.

I had a unresolved promise in a plugin.

import { auth } from '~/plugins/firebase.js'

export default (context) => {

  const { store } = context
  return new Promise((resolve, reject) => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        const userObject = {
          email: user.email,
          name: user.name
        }
        store.dispatch('auth/setUser', userObject)
      resolve()
      }
    })
  })
}

if no user my promise above never resolves