如何在 Nuxt 的上下文中使用 Vuetify

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
}

我也尝试过使用inject 中的post 方法，但后来我得到了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)
  }
}

这对我来说是一半的解决方案。我想找到一种方法来直接延迟插件注入，直到加载所有必需的依赖项。如果有人知道如何实现这一点，请随时回答这个问题，我会接受。