How to use an image as a button in Vue.js?

Question

I'm trying to make a login button as a single-file-component in Vue.js (it's a Rails app with a Vue.js front-end). If you click this button, it's supposed to take you to the an external provider's login page.

How can I use an image as a button? I'm guessing you use v-on:click for the actual redirect, but I'm stuck there.

Right now, this code below shows a hardcoded button that looks like img(src="../assets/img/login_button.png"). You can click on it, but that's obviously not what I want. I want to show the actual png image, not the path.

// LoginButton.vue

<template lang="pug">
#login-button
  <button v-on:click="redirect_to_login">img(src="../assets/img/login_button.png")</button>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class LoginButton extends Vue{
  redirect_to_login():void{ // I haven't written this method yet 
  }
}
</script>

Solution 1

Is there any reason you can't just use normal HTML image inside your button? I haven't used pug before.

<button v-on:click="redirect_to_login"><img src="../assets/img/login_button.png" /></button

Though since you're using Vue and not an actual HTML form you might not even need a button you could just add the click binding to the image instead

<img src="../assets/img/login_button.png" v-on:click="redirect_to_login" />

Solution 2

I am not familiar with pug, so I don't know what the correct syntax you'll need is. But you can use the <router-link> tag to set the route. For example (using Vuetify)

    <router-link to="/">
      <v-img src="/path/to/img.gif"/>
    </router-link>

Comments

[Anand Choudhary]

kindly use this code stackoverflow.com/questions/46903284/…

[reesaspieces]

I already had a look at that question, but I'm still confused. Still a Vue beginner here. Where am I supposed to put the img(src="../assets/img/login_button.png") then?

[reesaspieces]

Thanks. We're just using pug for our project, so I don't really have a choice here. In the end, writing your solution in pug was like this: img(src="../assets/img/btn_google_signin_dark_normal_web.png‌​" v-on:click="redirect_to_login")

[Jamie Marshall]

Why would you use a framework like Vuetify and not use its components? Defeats the purpose here does it not?

[kevmc]

@JamieMarshall I don't think the OP mentioned Vuetify. I believe they were trying to make their own component using just Vue itself.

[Jamie Marshall]

@kevmc, oops, my bad. I ended up here searching for Vuetify question tags. Not sure how I cross pollinated.