英文:
how can i use google login in vue3
问题
尝试在Vue 3中使用vue3-google-login进行Google登录，但我一直收到以下错误信息：
vue3_google_login__WEBPACK_IMPORTED_MODULE_1__.useGoogleLogin) 不是一个函数
在 setup 中
这是我的组件：
<template>
<div>
<GoogleLogin
:clientId="clientId"
@success="handleGoogleLoginSuccess"
@failure="handleGoogleLoginFailure"
/>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import { useGoogleLogin } from 'vue3-google-login';
export default defineComponent({
setup() {
const clientId = '5873015670';
const { signIn } = useGoogleLogin({
clientId,
onSuccess: handleGoogleLoginSuccess,
onFailure: handleGoogleLoginFailure,
});
},
});
</script>
请问为什么我一直收到这个错误，我做错了什么？
英文:
trying to use google login in vue 3 using vue3-google-login but i keep getting
vue3_google_login__WEBPACK_IMPORTED_MODULE_1__.useGoogleLogin) is not a function
at setup
this is my component
<div>
<GoogleLogin
:clientId="clientId"
@success="handleGoogleLoginSuccess"
@failure="handleGoogleLoginFailure"
/>
</div>
</template>
<script>
import { defineComponent } from 'vue';
import { useGoogleLogin } from 'vue3-google-login';
export default defineComponent({
setup() {
const clientId = '5873015670';
const { signIn } = useGoogleLogin({
clientId,
onSuccess: handleGoogleLoginSuccess,
onFailure: handleGoogleLoginFailure,
});
},
});
</script>
please why do i keep getting the error ,what i'm i doing wrong
答案1
得分: 1
首先，使用npm或yarn安装vue-google-signin-button包：
npm install vue-google-signin-button
然后，在您的Vue组件文件中，导入必要的依赖项：
import GoogleSignInButton from 'vue-google-signin-button'
将导入的组件添加到Vue组件的components部分：
components: {
GoogleSignInButton
}
现在，您可以在模板部分中使用google-signin-button组件：
<template>
<div>
<google-signin-button
:clientId="YOUR_CLIENT_ID"
@success="onSignInSuccess"
@failure="onSignInFailure"
></google-signin-button>
</div>
</template>
在Vue组件的methods部分添加相应的方法：
methods: {
onSignInSuccess(googleUser) {
// 处理成功的登录
console.log('Signed in as: ' + googleUser.getBasicProfile().getName());
},
onSignInFailure(error) {
// 处理登录失败
console.error('Sign-in failed:', error);
}
}
有关包的更多信息，请参阅：https://www.npmjs.com/package/vue-google-signin-button
英文:
I have an idea for that try that.
First, install the vue-google-signin-button package using npm or yarn:
npm install vue-google-signin-button
Then, in your Vue component file, import the necessary dependencies:
import GoogleSignInButton from 'vue-google-signin-button'
Add the imported component to the components section of your Vue component:
components: {
GoogleSignInButton
},
Now, you can use the google-signin-button component in your template section:
<template>
<div>
<google-signin-button
:clientId="YOUR_CLIENT_ID"
@success="onSignInSuccess"
@failure="onSignInFailure"
></google-signin-button>
</div>
</template>
Add the corresponding methods in the Vue component's methods section:
methods: {
onSignInSuccess(googleUser) {
// Handle successful sign-in
console.log('Signed in as: ' + googleUser.getBasicProfile().getName());
},
onSignInFailure(error) {
// Handle sign-in failure
console.error('Sign-in failed:', error);
}
}
More info about package: https://www.npmjs.com/package/vue-google-signin-button
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论