Question

我正在Nuxt插件中导入Vuetify.js，我想使其可用于其他插件。我尝试将其直接分配给vuetify-module之类的上下文。

vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import options from '@/vuetify.options.js'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify, {...options})

export default ctx => {
  const vuetify = new Vuetify(options)

  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework

}

nuxt.config.js

module.exports = {
  ...
  plugins: [
    '@/plugins/vuetify'
  ],
  ...
}

但是我总是得到一个undefined值...

plugin.js

export default function (ctx, inject) {
  console.log('app.vuetify :', ctx.app.vuetify) // undefined
  console.log('$vuetify :', ctx.$vuetify) // undefined
}

我也尝试过使用post中的inject方法，但是随后我得到了Type Error : Cannot set property $vuetify of #<Vue> which has only a getter。

vuetify.js

export default function(_, inject) {
  const vuetify = new Vuetify(options)
  inject('vuetify', vuetify)
}

注意：我使用addPlugin方法在模块中注册了插件。

module.js

module.exports = function (moduleOptions) {
  this.addPlugin({
    fileName: 'myplugin.js',
    moduleOptions,
    src: resolve(__dirname, 'plugin.js'),
    mode: 'client'
  })
}

Answer 1

我发现这是一个加载顺序问题，因为我在axios模块中遇到了同样的问题。我不得不使用extendPlugins property来更改Nuxt插件的加载顺序。

nuxt.config.js

module.exports = {
  ...
  extendPlugins(plugins) {
    const loadOrder = [
      'axios',
      'i18n',
      'vuetify',
      'myplugin'
    ]

    // Find indexes of a plugin/module by name
    const findAllIndex = (arr, pluginName) =>
            arr.reduce((acc, plugin, idx) => (
                    typeof plugin === 'object' && plugin.src.includes(pluginName)
                    || typeof plugin === 'string' && plugin.includes(pluginName)
                            ? [...acc, idx] : acc), [])

    // Update plugin load order
    const orderPlugins = (oldOrder, newOrder) => {
      const indexes = newOrder.flatMap(plugin => findAllIndex(oldOrder, plugin))
      const defaultOrder = oldOrder.filter((plugin, idx) => !indexes.includes(idx)) // filterNot
      const customOrder = indexes.map(idx => oldOrder[idx]) // select
      return [
        ...defaultOrder,
        ...customOrder
      ]
    }

    return orderPlugins(plugins, loadOrder)
  }
}

这是我的一半解决方案。我想找到一种方法，可以直接从插件延迟插入插件，直到加载所有必需的依赖项为止。如果有人找到了实现该目标的方法，请随时回答此问题，我会接受。

如何在Nuxt的上下文中提供Vuetify

1 个答案: