Nuxt3 Button doesn't register @click event

Question

I have the simplest nuxt3 project and my button when pressed doesn't register a click event.

Why? Or where can I look for a solution?

<button @click="console.log('PRESSED')" class="bg-gray-500">GENERATE TEXT</button>

. Replication:

npx nuxi init replica_project
cd replica_project
npm install --save-dev @nuxtjs/tailwindcss
Added in nuxt.config.ts modules: [ '@nuxtjs/tailwindcss' ]
Put <button @click="console.log('I got hit on')" class="bg-gray-500">HIT ME BABY</button> in the App.vue file `

Tried Solutions:

Add .native: <button @click.native="console.log('PRESSED')" class="bg-gray-500">GENERATE TEXT</button>

Any errors in the console? Try to use it via a method. `console.log` needs to be declared actually. — kissu, Dec 02 '22 at 01:06
@kissu No errors. I pressed the button and the console didn't react. However I updated my machine, turned it off and tried again today.... Now it works — Martin Müsli, Dec 03 '22 at 13:45

score 2 · Answer 1 · answered Dec 02 '22 at 01:19

The usual way of using a console.log is by using a function to call it (rather than doing it directly from the template), like the following.
Using the CompositionAPI:

<script setup>
function consoleHitOn() {
  console.log('I got hit on')
}
</script>

<template>
  <button @click="consoleHitOn">HIT ME BABY</button>
</template>

Using the OptionsAPI, you could achieve the same with a hack by doing this

<script>
export default {
  computed: {
    console: () => console,
  }
}
</script>

<template>
  <button @click="console.log('I got hit on')">HIT ME BABY</button>
</template>

I'm not sure if there is a way of writing the same kind of hack with CompositionAPI, but even if there is I do not really recommend it anyway.

PS: one thing for sure is that it's totally not related to TailwindCSS.
Tailwind is for the style, nothing concerning the event listeners in a Vue app.

score 1 · Accepted Answer · answered Dec 03 '22 at 13:42

1

I updated my machine, turned it off, tried again today and it worked.

I have no further explanation...

answered Dec 03 '22 at 13:42

Martin Müsli

1,031
3
14
26

Should not work tho. Check if you have any errors in your console. – kissu Dec 03 '22 at 13:43

score 1 · Answer 3 · answered Jan 30 '23 at 13:21

1

Below command fixed issue at my end. just npm run build when its build successfully do npm run dev it might fix your issue it worked at my end,

when I run build I found few issues, fixed them and run again dev

answered Jan 30 '23 at 13:21

Yuvraj Singh Shekhawat

313
2
15

Nuxt3 Button doesn't register @click event

3 Answers3