首先去gitter上创建一个聊天室

然后去Sidecar上生成相应代码，相应代码如下

<script>
  ((window.gitter = {}).chat = {}).options = {
    room: '{你的聊天室域名,例如carolin-violet/travel_gaochun}'
  };
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

配置nuxt.config.js文件

// 在头部引入<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
head: { 
    script: [
      {src: 'https://sidecar.gitter.im/dist/sidecar.v1.js', async: true , defer: true}
    ]
  }

在layouts文件夹下的default.vue文件(默认布局文件)中添加以下内容，注意mounted不能改成created或是beforeCreated，因为ssr渲染的生命周期只有这两个，此时也是不能操作dom的，如果使用这两个的话就会出现window is not defined的异常了

  mounted() {
    ((window.gitter = {}).chat = {}).options = {
      room: 'carolin-violet/travel_gaochun'
    };
  }

最后网页右下角就有相应图标点击可以聊天了

我踩的坑：一开始我在nuxt.config.js中配置时是没有加async和defer的，然后点击页面上的图标发现链接信息没有导入进去导致弹框空白。然后我又用vscode随便新建了个网页将Sidecar上生成的配置全导入发现没有任何异常，再把async和defer删除还是没有任何异常。至于其中是何缘由暂时还不清楚。

以下为查阅资料了解的async与defer的对比

defer(延迟脚本):
延迟脚本：defer属性只适用于外部脚本文件。
如果给script标签定义了defer属性，这个属性的作用是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，如果script元素中设置了defer属性，相当于告诉浏览器立即下载，但延迟执行。
有多个defer的标签时，会按照顺序下载执行。

async(异步脚本):
异步脚本：async属性也只适用于外部脚本文件，并告诉浏览器立即下载文件。
但与defer不同的是：下载完成会立即执行，此时会阻塞dom渲染，所以async的script最好不要操作dom。因为是下载完立即执行，不能保证多个加载时的先后顺序。

最后效果图如下

Q.E.D.