Vue3使用vue3-google-login报错：useGoogleLogin不是函数，求排查

1. 核心错误原因 #

报错useGoogleLogin is not a function的主要原因是你安装的vue3-google-login版本与代码写法不匹配：

• 若你安装的是v2.x版本，该版本仅提供组件式的<GoogleLogin>，没有useGoogleLogin组合式函数，强行导入会导致此错误。
• 若你安装的是v3.x版本，未正确初始化插件也可能导致无法识别useGoogleLogin。

2. 针对性解决方案 #

方案一：使用v2.x版本的组件式写法 #

如果不想升级版本，修改代码如下：

<template>
  <div>
    <GoogleLogin
      :clientId="clientId"
      @success="handleGoogleLoginSuccess"
      @failure="handleGoogleLoginFailure"
    />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import GoogleLogin from 'vue3-google-login'; // 默认导入组件

export default defineComponent({
  components: { GoogleLogin }, // 注册组件
  setup() {
    // 注意：这里需要填写完整的谷歌客户端ID（格式如 xxx.apps.googleusercontent.com）
    const clientId = '你的完整客户端ID';

    // 定义登录成功/失败的回调函数
    const handleGoogleLoginSuccess = (response) => {
      console.log('登录成功:', response);
      // 处理登录成功逻辑，比如获取用户信息、存储token等
    };

    const handleGoogleLoginFailure = (error) => {
      console.error('登录失败:', error);
      // 处理登录失败逻辑
    };

    return {
      clientId,
      handleGoogleLoginSuccess,
      handleGoogleLoginFailure
    };
  },
});
</script>

方案二：升级到v3.x版本使用组合式写法 #

如果想使用useGoogleLogin，先升级包：

npm install vue3-google-login@latest
# 或
yarn add vue3-google-login@latest

然后在main.js中初始化插件：

import { createApp } from 'vue';
import App from './App.vue';
import vue3GoogleLogin from 'vue3-google-login';

const app = createApp(App);
// 全局配置谷歌客户端ID
app.use(vue3GoogleLogin, {
  clientId: '你的完整客户端ID'
});
app.mount('#app');

最后在组件中使用组合式函数：

<template>
  <!-- 自定义登录按钮，点击触发signIn方法 -->
  <button @click="signIn">谷歌登录</button>
</template>

<script setup>
import { useGoogleLogin } from 'vue3-google-login';

const { signIn } = useGoogleLogin({
  onSuccess: (response) => {
    console.log('登录成功:', response);
  },
  onError: (error) => {
    console.error('登录失败:', error);
  }
});
</script>

3. 额外注意事项 #

• 确保你的谷歌客户端ID是完整的，格式为xxx.apps.googleusercontent.com，仅填写数字ID会导致后续登录失败。
• 需在谷歌云平台的OAuth2配置中，正确添加你的网站域名到授权列表，否则会出现跨域或授权失败问题。

内容的提问来源于stack exchange，提问作者jibzy