插件

Nuxt.js允许您在运行Vue.js应用程序之前执行js插件。这在您需要使用自己的库或第三方模块时特别有用。

需要注意的是,在任何 Vue 组件的生命周期内, 只有 beforeCreatecreated 这两个方法会在 客户端和服务端被调用。其他生命周期函数仅在客户端被调用。

使用第三方模块

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

首先我们需要安装 npm 包:

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']
}

想了解更多关于 plugins 的配置,请参考 插件 API 文档

ES6 插件

如果插件位于node_modules并导出模块,需要将其添加到transpile构建选项:

module.exports = {
  build: {
    transpile: ['vue-notifications']
  }
}

您可以参考 构建配置 文档来获取更多构建选项。

注入 $root 和 context

有时您希望在整个应用程序中使用某个函数或属性值,此时,你需要将它们注入到Vue实例(客户端),context(服务器端)甚至 store(Vuex)。按照惯例,新增的属性或方法名使用$作为前缀。

注入 Vue 实例

将内容注入Vue实例,避免重复引入,在Vue原型上挂载注入一个函数,所有组件内都可以访问(不包含服务器端)。

plugins/vue-inject.js:

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']
}

这样,您就可以在所有Vue组件中使用该函数。

example-component.vue:

export default {
  mounted(){
    this.$myInjectedFunction('test')
  }
}

注入 context

context注入方式和在其它vue应用程序中注入类似。

plugins/ctx-inject.js:

export default ({ app }, inject) => {
  // Set the function directly on the context.app object
  app.myInjectedFunction = (string) => console.log('Okay, another function', string)
}

nuxt.config.js:

export default {
  plugins: ['~/plugins/ctx-inject.js']
}

现在,只要您获得context,你就可以使用该函数(例如在asyncDatafetch中)。 ctx-example-component.vue:

export default {
  asyncData(context){
    context.app.myInjectedFunction('ctx!')
  }
}

同时注入

如果您需要同时在contextVue实例,甚至Vuex中同时注入,您可以使用inject方法,它是plugin导出函数的第二个参数。 将内容注入Vue实例的方式与在Vue应用程序中进行注入类似。系统会自动将$添加到方法名的前面。

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,或者Vuexactions/mutations方法中的this来调用myInjectedFunction方法。 ctx-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 }
  ]
}

plugins/vue-notifications.js:

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

您可以通过检测process.server这个变量来控制插件中的某些脚本库只在服务端使用。当值为 true 表示是当前执行环境为服务器中。 此外,可以通过检查process.static是否为true来判断应用是否通过nuxt generator生成。您也可以组合process.serverprocess.static这两个选项,确定当前状态为服务器端渲染且使用nuxt generate命令运行。

注意:由于Nuxt.js 2.4,模式已被引入作为插件的选项来指定插件类型,可能的值是:clientserver, 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
  ]
}

如何提交问题或文档贡献? 在 GitHub 编辑此页面!