Nuxt.js 插件

在任何Vue组件的生命周期内，只有beforeCreate和created这两个方法会在客户端和服务端被调用。其他生命周期函数仅在客户端被调用。

一、使用第三方模块

我们可以在应用中使用第三方模块，一个典型的例子是在客户端和服务端使用 axios 做 HTTP 请求

npm install --save axios

<template>
  <h1>{{ title }}</h1>
</template>

<script>
import axios from "axios";

export default {
  async asyncData({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`);
    return { title: data.title };
  },
};
</script>

二、使用Vue插件

假如我们想使用 vue-notifications 显示应用的通知信息，我们需要在程序运行前配置好这个插件。

首先增加文件 plugins/vue-notifications.js：

import Vue from "vue";
import VueNotifications from "vue-notifications";

Vue.use(VueNotifications);

然后, 在 nuxt.config.js 内配置 plugins 如下：

module.exports = {
  plugins: ["@/plugins/vue-notifications"],
};

三、ES6插件

如果插件位于node_modules并导出模块，并使用了ES6，需要babel做转化，需要将其添加到transpile构建选项：

module.exports = {
  build: {
    transpile: ["vue-notifications"],
  },
};

四、注入Vue实例

在plugins目录下新建vue-inject.js文件，plugins/vue-inject.js:

将方法或属性注入到Vue实例原型上：

import Vue from "vue";

Vue.prototype.$myInjectedFunction = (string) =>
  console.log("This is an example", string);

所有插件都需要在nuxt.config.js中进行配置

export default {
  plugins: ["@/plugins/vue-inject.js"],
};

使用：

export default {
  mounted() {
    this.$myInjectedFunction("test");
  },
};

五、注入context

plugins/ctx-inject.js:

app是context上下文的一个属性，类似于Vue实例原型

export default ({ app }) => {
  app.myInjectedFunction = (string) =>
    console.log("Okay, another function", string);
};

依旧需要在nuxt.config.js中配置

export default {
  plugins: ["~/plugins/ctx-inject.js"],
};

使用

export default {
  asyncData(context) {
    context.app.myInjectedFunction("ctx!");
  },
};

六、同时在客户端与服务端注入

使用inject方法，它是plugin导出函数的第二个参数。系统会自动将 $ 添加到方法名的前面

plugins/combined-inject.js:

export default ({ app }, inject) => {
  inject("myInjectedFunction", (string) =>
    console.log("That was easy!", string),
  );
};

nuxt.config.js:

export default {
  plugins: ["~/plugins/combined-inject.js"],
};

这时可以在context，或者Vue实例中的this，或者Vuex的actions/mutations方法中的this来调用myInjectedFunction方法

example-component.vue:

export default {
  mounted() {
    this.$myInjectedFunction("works in mounted");
  },
  asyncData(context) {
    context.app.$myInjectedFunction("works with context");
  },
};

store/index.js:

export const state = () => ({
  someValue: "",
});

export const mutations = {
  changeSomeValue(state, newValue) {
    this.$myInjectedFunction("accessible in mutations");
    state.someValue = newValue;
  },
};

export const actions = {
  setSomeValueToWhatever({ commit }) {
    this.$myInjectedFunction("accessible in actions");
    const newValue = "whatever";
    commit("changeSomeValue", newValue);
  },
};

七、只在客户端使用的插件

不支持SSR的系统，插件只在浏览器里使用，这种情况下，可以使用ssr:false，使得插件只会在客户端运行

nuxt.config.js:

module.exports = {
  plugins: [{ src: "~/plugins/vue-notifications", ssr: false }],
};

可以通过检测process.server这个变量来控制插件中的某些脚本库只在服务端使用。当值为 true 表示是当前执行环境为服务器中。此外，可以通过检查process.static是否为true来判断应用是否通过nuxt generator生成

注意：由于Nuxt.js 2.4，模式已被引入作为插件的选项来指定插件类型，可能的值是：client 或 server, ssr:false 在下一个主要版本中弃用,将过渡为 mode: 'client'。

例子:

nuxt.config.js:

export default {
  plugins: [
    { src: "~/plugins/both-sides.js" },
    { src: "~/plugins/client-only.js", mode: "client" },
    { src: "~/plugins/server-only.js", mode: "server" },
  ],
};

八、传统命名插件

如果假设插件仅在 客户端 或 服务器端 运行，则 .client.js 或 .server.js可以作为插件文件的扩展名应用，该文件将自动包含在相应客户端或者服务端上

例子:

nuxt.config.js:

export default {
  plugins: [
    "~/plugins/foo.client.js", // only in client side
    "~/plugins/bar.server.js", // only in server side
    "~/plugins/baz.js", // both client & server
  ],
};