Vue 3: How can I capture a button click from an external HTML template?

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I've been refactoring my Vue 3 app into smaller SFCs and moved the template from the component into an external HTML page. Now, when I click the button, nothing happens and no error appears; it seems the function isn’t being called.

Below is my index.html:

HTML
<!DOCTYPE html>
<html lang="">  
  <head>    
    <meta charset="UTF-8">    
    <link rel="icon" href="/favicon.ico">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Vite App</title>    
    <script type="importmap">      
      {        
        "imports": {          
          "vue": "https://unpkg.com/vue@3.2.37/dist/vue.esm-browser.prod.js",          
          "axios": "https://cdn.jsdelivr.net/npm/@bundled-es-modules/axios@0.27.2/axios.min.js",          
          "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi@0.14.10/+esm",          
          "vuelidatecore": "https://cdn.jsdelivr.net/npm/@vuelidate/core@2.0.3/+esm",          
          "vuelidatevalidators": "https://cdn.jsdelivr.net/npm/@vuelidate/validators@2.0.4/+esm",        }      }
  </script>

  <!-- <script defer type="module" src="./bootstrap.js"></script> --> 
  <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.min.css" rel="stylesheet">  
  </head>  
  <body>    
    <div id="newsletter-form">      
      <div class="input-group mb-3">        
        <input type="text" class="form-control text-white bg-transparent" placeholder="Enter your email" v-model="state.email" />        
        <div class="input-group-append">          
          <button class="btn btn-primary rounded-top-right-0" type="button" id="button-addon2" @click="recaptcha">Subscribe</button>        
        </div>      
      </div>    
    </div>    
    <script type="module">      
      import { createApp } from 'vue'      
      import NewsletterForm from './newsletter-form.js'

      createApp(NewsletterForm).mount('#newsletter-form')
    </script>  
  </body>
</html>

And here is NewsletterForm:

JAVASCRIPT
import { reactive } from 'vue'
import axios from 'axios';
import { useVuelidate } from 'vuelidatecore'
import { required, email, maxLength } from 'vuelidatevalidators'

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

export default {
  setup () {
    const state = reactive({
      email: ''
    })
    const rules = {
      email: { required, email, maxLength } // Matches state.contact.email
    }

    const v$ = useVuelidate(rules, state)

    const recaptcha = async () => {
      // Validate the form fields
      const result = await v$.value.$validate()
      if (!result) {
        alert('sdfgsdg');
        
        return
      }
    }

    return { state, v$ }
  },
  template: '#newsletter-form'
}

I've tried to set up the click event with @click on the button, but since I moved the template out of the component, the recaptcha function doesn't seem to be accessible. I'm looking for guidance on how to correctly expose and capture the click event in this Vue 3 setup.

Any help would be appreciated.

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

The issue is that your recaptcha function isn’t being returned from the setup function. In Vue 3, only the properties and methods returned from setup are available in your template. To fix this, update your NewsletterForm component to return recaptcha:

JAVASCRIPT
export default {
  setup () {
    const state = reactive({
      email: ''
    })

    const rules = {
      email: { required, email, maxLength }
    }

    const v$ = useVuelidate(rules, state)

    const recaptcha = async () => {
      // Validate the form fields
      const result = await v$.value.$validate()
      if (!result) {
        alert('Form validation failed')
        return
      }
      // Continue with your logic
    }

    return { state, v$, recaptcha }
  },
  template: '#newsletter-form'
}

Now the recaptcha function is exposed to your template via the returned object, and clicking the button will call recaptcha as expected.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by PlutonianObserver176 • 1 month ago

Not sure exactly about the Vuelidate part, but this code looks like it's working well.

index.html

HTML
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
  <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.2.37/dist/vue.esm-browser.prod.js",
          "axios": "https://cdn.jsdelivr.net/npm/@bundled-es-modules/axios@0.27.2/axios.min.js",
          "vue-demi": "https://cdn.jsdelivr.net/npm/vue-demi@0.14.10/+esm",
          "vuelidatecore": "https://cdn.jsdelivr.net/npm/@vuelidate/core@2.0.3/+esm",
          "vuelidatevalidators": "https://cdn.jsdelivr.net/npm/@vuelidate/validators@2.0.4/+esm"
        }
      }
  </script>

  <!-- <script defer type="module" src="./bootstrap.js"></script> --> 
  <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.15.10/dist/sweetalert2.min.css" rel="stylesheet">
</head>

<body>
  <div id="newsletter-form">
    <div class="input-group mb-3">
      <input type="text" class="form-control text-white bg-transparent" placeholder="Enter your email"
        v-model="state.email" />
      <div class="input-group-append">
        <button class="btn btn-primary rounded-top-right-0" type="button" id="button-addon2"
          @click="recaptcha">Subscribe</button>

        <div>Email: {{ state.email }}</div>
      </div>
    </div>
  </div>
  <script type="module">
    import { createApp } from 'vue'
    import NewsletterForm from './newsletter-form.js'

    createApp(NewsletterForm).mount('#newsletter-form')
  </script>
</body>

</html>

newsletter-form.js

JAVASCRIPT
import { reactive } from 'vue'
import axios from 'axios';
import { useVuelidate } from 'vuelidatecore'
import { required, email, maxLength } from 'vuelidatevalidators'

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


export default {
  setup() {
    const state = reactive({
      email: ''
    })
    const rules = {
      email: { required, email, maxLength: maxLength(20) } // Matches state.contact.email
    }

    const v$ = useVuelidate(rules, state)

    const recaptcha = async () => {
      console.log('works here 👍🏻')
      // Validate the form fields
      const result = await v$.value.$validate()
      console.log('result', result)
    }

    return { state, recaptcha, v$ }
  }
}

The few changes I applied:

fixed the import map to be a proper JSON file (hence removed the trailing comma)
return recaptcha because it's not automatically returned because no script setup
I added maxLength(20) to the validation, I'm not sure how it works tho so properly not the good way but it fixes the initial problem
I also removed the extra template: '#newsletter-form' because I don't think it was anyhow needed

Few notes:

axios can probably be skipped in favor of the browser's baked-in fetch API
vue-demi might not be needed here (if using some packages relying on Vue2, I guess you could start by using Vue3-ready packages nowadays)
vuelidate itself looks like it's slowing down regarding its development, I could maybe recommend vee-validate for a more modern client-side validation library

No comments yet.

Discussion

No comments yet.

Vue 3: How can I capture a button click from an external HTML template?

2 Answers

Discussion

Similar Posts

Integrating Nextcloud Vue Components with Pinegrow's VueDesigner in a Vite Project

Why Is the First Line of My Custom CodeBlock Component Indented?

How can I correctly integrate Vue3 Carousel as an ES module in a Laravel Blade template?