Cuando ejecuto esta fuente, me mostró solo

[Kakao no está definido] https://i.stack.imgur.com/UA7VI.png

Mis fuentes son así.

en 『nuxt.config.js』

 export default { // Global page headers (https://go.nuxtjs.dev/config-head) head: { script: [ { src: 'https://developers.kakao.com/sdk/js/kakao.js'}, ] }, }

en 『./pages/login.vue』

 <template> <a :href="loginWithKakao()"> <img src="https://k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg" width="222" /> </a> </template> <script> export default { data() { return { visible: true, account: '', password: '', } }, computed: { ...mapState('store', { logo: (state) => state.logo }), }, methods: { loginWithKakao() { Kakao.Auth.login({ success: function (response) { // console.log("Kakao.Auth.login - success response ->", response); Kakao.API.request({ url: '/v2/user/me', success: function (response) { console.log(response) }, fail: function (error) { console.log(error) }, }) }, fail: function (error) { console.log(error) }, }) }, }, mounted(){ // Initialize the SDK. Please set the JavaScript key for the app you want to use. Kakao.init('JavaScript key'); // Determines whether to initialize the SDK. console.log('Kakao.isInitialized() >>', Kakao.isInitialized()); }, } </script>

Cuando usé esto en html, funcionó

 <a id="custom-login-btn" href="javascript:loginWithKakao()"> <img src="https://k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg" width="222" /> </a>

Como sé, podemos usar href="javascript:your_function()" en html como :href="your_function()" en Vue.js

¿O hay algunas maneras algo otros?