为什么npm google-登录没有显示在Vue上？

Question

我试着用Vue制作google登录示例项目。

首先，我发现npm包名为‘vue-google-登录’是非常好的。

所以我尝试使用它，但是从'vue-google-login‘导入的组件似乎不起作用(Button没有显示)。

我跟随‘vue-google-登录’npm指南与下面的代码。我终于找到了链接。

<template>
  <div id="google">
    <GoogleLogin :params="params" :renderParams="renderParams"></GoogleLogin>
  </div>
</template>

<script>
import GoogleLogin from 'vue-google-login'

export default {
  name: "App",
  data: () => ({
    // Google
    params: {
      client_id: "cliend_id"
    },
    renderParams: {
      width: 250,
      height: 50,
      longtitle: true
    }
  }),
  components: {
    GoogleLogin
  }
};
</script>

‘’vue google-登录‘npm：https://www.npmjs.com/package/vue-google-login

Answer 1

vue-google-login是为Vue 2建造，但是您的项目使用Vue 3不兼容。

一种选择是将Vue降级到版本2，或者您可以使用支持Vue 3的不同的Google库，比如vue3-google-oauth2。

Answer 2

由于您使用Vue3 try Vue3-google-登录，这是一个轻量级插件，可以在Google 3P授权JavaScript库的帮助下使用谷歌身份服务实现登录和登录流，这也有助于启用诸如一键登录和自动登录功能等功能。

Answer 3

我们创建了一个名为vue3-google-signin的库，以便使用最新的Google3P授权库与Vue3一起快速完成这项任务。此库包含一组可组合和组件，以帮助您的情况。

如果您使用的是Nuxt3，请使用我们创建的模块

若要添加google登录按钮，请使用以下代码段。

<script setup lang="ts">
import {
  GoogleSignInButton,
  type CredentialResponse,
} from "vue3-google-signin";

// handle success event
const handleLoginSuccess = (response: CredentialResponse) => {
  const { credential } = response;
  console.log("Access Token", credential);
};

// handle an error event
const handleLoginError = () => {
  console.error("Login failed");
};
</script>

<template>
  <GoogleSignInButton
    @success="handleLoginSuccess"
    @error="handleLoginError"
  ></GoogleSignInButton>
</template>

您可以阅读docs 这里

免责声明:我是这个图书馆的作者