1.需求

我的nuxt项目都是面向插件编程，我会将业务逻辑分开，写成一个一个插件，我觉得这样既看起来简单，在调用时也会很简单，比如订单的业务我会写成order.js,购物车的业务我会写成car.js等等。

目前我的一个需求是给网站添加gtm，我使用了vue的第三方插件，同时我想将该插件再封装成自己的nuxt插件，插件中写各种业务逻辑，那么就遇到了，怎么再自己的nuxt插件中使用刚刚的vue第三方插件

2.引入vue-gtm

该插件引入非常简单，官方文档说明如下：

但是这里出现一个问题，该插件在使用vue.use方法时需要传入参数，而参数中又要使用到router，注意，在nuxt插件中是不能使用this.$router来调用路由对象的，所以我的做法如下：

即使用export default 其中可以使用app这个对象，你可以简单理解成app就是vue对象，其实还是有点区别。nuxt官方文档中也是有export default 的参数中使用app的例子

3.写自己的nuxt插件 

插件命名为custom-gtm.js,我的最终写法如下：

import Vue from 'vue';
class GTMEvent {
  constructor(gtm) {
    this.gtm = gtm
  }

  register () {
    this.gtm.trackEvent({
      event: 'register',
      category: 'register'
    });
  }

}
export default ({ app }, inject) => {
   inject('gtmCustom', new GTMEvent(Vue.prototype.$gtm))
}

说明：因为我是java开发，所以我喜欢使用class，该插件的作用就是封装了一下第三方的gtm，主要是看下面的export default

我一开始认为app就是vue对象，在第一步加载了vue插件后，app对象中应该就会存在$gtm这个对象，所以我一开始是这么写的

export default ({ app }, inject) => {
   inject('gtmCustom', new GTMEvent(app.$gtm))
}

结果打印了一下app，发现app属性中根本没有$gtm,所以我使用了Vue.prototype去尝试获取，就有了

4.注意插件顺序

nuxt.config.js中的插件加载是有顺序的，如果你写在下面的插件调用了写在上面的插件，那么就会报错。所以要注意这点，很重要，脑子短路了的话，可以搞你一天都发现不了这个问题