Nuxt.jsのpluginsを使っててハマった話

結論

pluginはexport default しようぜって話

~/plugins/plugin.js

export default () {
  // 処理
}

背景

pluginはnuxt.config.jsの上から順番に実行されるが、export defaultをしないと順番通りに実行されない。

nuxt.config.js

  // first→second→thaad　の順番で実行される
  plugins: [
    {
      src: '~/plugins/first.js',
      mode: 'client'
    },
    {
      src: '~/plugins/second.js',
      mode: 'client'
    },
    {
      src: '~/plugins/thaad.js',
      mode: 'client'
    },
  ]

理由

下記のようにpluginsがbuildされるが、
export defaultをしていないと、importされた時点で即コードを実行するので順番通りにならない。

_nuxt/index.js

/* Plugins */
import nuxt_plugin_first_08b2fdac from 'nuxt_plugin_first_08b2fdac' // Source: ./first.js (mode: 'client')
import nuxt_plugin_second_18f96a7c from 'nuxt_plugin_second_18f96a7c' // Source: ./second.js (mode: 'client')
import nuxt_plugin_thaad_68e7ee02 from 'nuxt_plugin_thaad_68e7ee02' // Source: ./thaad.js (mode: 'client')

if (process.client && typeof nuxt_plugin_first_08b2fdac === 'function') {
  await nuxt_plugin_first_08b2fdac(app.context, inject)
}
if (process.client && typeof nuxt_plugin_second_18f96a7c === 'function') {
  await nuxt_plugin_thaad_68e7ee02(app.context, inject)
}
if (process.client && typeof nuxt_plugin_thaad_68e7ee02 === 'function') {
  await nuxt_plugin_thaad_68e7ee02(app.context, inject)
}