微信公众号非静默授权获取头像和昵称

要在Vue前端应用程序中实现微信公众号非静默授权获取头像和昵称，您需要遵循以下步骤：

1.在微信公众平台上注册并创建一个公众号。

2.在Vue项目中安装wechat-js-sdk库，该库提供了与微信JS-SDK的交互功能。

npm install wechat-js-sdk --save

3.在Vue项目中引入并初始化WeChat JS SDK。 

import wx from 'wechat-js-sdk';

wx.config({
  debug: true,
  appId: 'your_app_id',
  timestamp: 'your_timestamp',
  nonceStr: 'your_noncestr',
  signature: 'your_signature',
  jsApiList: ['chooseWXPay', 'onMenuShareTimeline', 'onMenuShareAppMessage']
});

请注意，这里需要将 your_app_id，your_timestamp，your_noncestr 和 your_signature 替换为您的应用程序ID，时间戳，随机字符串和签名。

4.在Vue组件中添加授权代码。

wx.ready(function () {
  wx.getUserInfo({
    withCredentials: true,
    success: function (res) {
      var userInfo = res.userInfo;
      var nickname = userInfo.nickName;
      var headimgurl = userInfo.headImgUrl;
      console.log('getUserInfo', userInfo);
    }
  });
});

此代码中的 wx.ready 函数将在WeChat JS SDK准备好后运行。 wx.getUserInfo 函数获取用户信息，包括昵称和头像。 请注意，使用此方法需要设置 withCredentials 参数为true。

请注意，您需要将 your_app_id 替换为您的应用程序ID。

这样，您就可以在Vue前端应用程序中实现微信公众号非静默授权获取头像和昵称了。