Vue3と比べて理解するNuxt3の機能~auto-import編~

# はじめに

この記事は先日、株式会社ヒュープロ様で開催された「Engineer LT Night #1 @渋谷」で登壇した際に発表した内容を記事に書き起こしたものになります。

# 本題

早速ですが、Nuxt3には様々な便利機能があります。auto import機能もその一つです。pluginsやmiddleware,utils,components,pages,layout,composables,assets,public,serverと多くのフォルダがこのauto importの機能を備えています。

今回はその中でも**初期化**のタイミングに注目してpluginsとmiddlewareに焦点を当てます。

ご存知の通り、pluginsフォルダには各種外部ライブラリ等を初期化する処理を書いたファイルを配置します。
そして、middlewareはvue-routerの拡張であり、vue-routerのbeforeEach hookに相当するnavigation guardを書くフォルダになります。

# きっかけ

もう少しだけ余談を挟みます。
そもそもこの内容で登壇しようと思った理由なんですが、Nuxt3で開発したこともvue3で開発したこともある私IIHARAが目下vue3での開発を担当していて「初期化周りのハンドリング面倒だな。Nuxtだったらもっと気にせず開発できていた気がするんだけどなあ。よし、せっかくだしちゃんと調査してみるか」と思い立ったのがきっかけです。

そのため、次項からvueだとどうなってるか、nuxtだとどうなってるかの順で比較していきます。

---

# vueで調査

### ログを埋め込む

vueではpluginsフォルダやmiddlewareフォルダはないので、外部ライブラリを初期化するという意味でmain.tsとルーティング処理を書く場所という意味でrouter.tsをログを埋め込む対象とする

```typescript
// main.ts
const resolveFunc = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('main.ts:resolveFunc:resolved')
    }, 2000)
  })
}
const asyncCall = async () => {
  console.debug('main.ts:asyncCall:calling')
  const result = await resolveFunc()
  console.debug(result)
}
new Promise((resolve) => {
  setTimeout(() => {
    resolve('main.ts:Promise:resolved')
  }, 2000)
}).then(() => {
  console.debug('main.ts:Promise:then')
})
asyncCall().then(() => {
  console.debug('main.ts:asyncCall:then')
})
```

```typescript
// router/middleware.ts
const resolveFunc = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('beforeEach:resolveFunc:resolved')
    }, 2000)
  })
}
const asyncCall = async () => {
  console.debug('beforeEach:asyncCall:calling')
  const result = await resolveFunc()
  console.debug(result)
}
new Promise((resolve) => {
  setTimeout(() => {
    resolve('beforeEach:Promise:resolved')
  }, 2000)
}).then(() => {
  console.debug('beforeEach:Promise:then')
})
asyncCall().then(() => {
  console.debug('beforeEach:asyncCall:then')
})
```

### 結果

#### トップレベルに一切awaitを付けなかった場合

![vue_no_await.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2769277/977e333d-51f1-1b88-a37b-c8e4e285d208.png)

一番最後に出力されてほしいapp.vueが2番目に来てしまっている

#### トップレベルにawaitを付けた場合

![vue_await.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2769277/14c44997-0fda-fa91-ad6e-2347b8629060.png)

app.vueが一番最後より前で出力されてしまっている

##### 下記のように関連する処理全てにawaitを付けたとしても、、、

```javascript
// main.ts
const app = await createApp(App)
await app.use(router)
await app.component()
await app.provide(storeKey, createGlobalStore())
await app.mount('#app')
```

```javascript
// router.ts
// これを
- router.beforeEach(globalNavigationGuard)
// こうする
+ router.beforeEach(async (to, from) => {
+   await globalNavigationGuard(to, from)
+ })
```

確かにapp.vueが最後に出力されているが、main.tsとrouter.tsの処理がそれぞれ独立して進みながらapp.vueのmountへとつながっている

そのため、main.ts等で初期化した外部ライブラリ等をルーティング処理内で参照したり呼び出したりすることがしにくい（ワークアラウンド的に無理矢理することは可能だが拡張性に難あり）

![vue_all_await.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2769277/0dc95fc2-7ec9-fec2-926f-d9cd19873686.png)

# nuxtで調査

### ログを埋め込む

```typescript
// plugin/index.client.ts
const resolveFunc = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('plugin:resolveFunc:resolved')
    }, 2000)
  })
}
const asyncCall = async () => {
  console.debug('plugin:asyncCall:calling')
  const result = await resolveFunc()
  console.debug(result)
}
export default defineNuxtPlugin(async (app) => {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve('plugin:Promise:resolved')
    }, 2000)
  }).then(() => {
    console.debug('plugin:Promise:then')
  })
  await asyncCall().then(() => {
    console.debug('plugin:asyncCall:then')
  })
})
```

```typescript
// middleware/index.global.ts
const resolveFunc = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('middleware:resolveFunc:resolved')
    }, 2000)
  })
}
const asyncCall = async () => {
  console.debug('middleware:asyncCall:calling')
  const result = await resolveFunc()
  console.debug(result)
}
export default defineNuxtRouteMiddleware(async (to) => {
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve('middleware:Promise:resolved')
    }, 2000)
  }).then(() => {
    console.debug('middleware:Promise:then')
  })
  await asyncCall().then(() => {
    console.debug('middleware:asyncCall:then')
  })
})
```

#### トップレベルに一切awaitを付けなかった場合

![nuxt_no_await.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2769277/da8c57ba-b3d1-f764-20cd-2ccca9b85023.png)

当然この場合は、app.vueが最後には出力されない

#### トップレベルにawaitを付けた場合

![nuxt_await.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2769277/35e93b47-12f7-bba8-250e-5529760ec96c.png)

app.vueが最後の出力されつつ、pluginsの処理が全て終わったあとmiddlewareの処理に進んでいるのが見て取れる。

これが地味に嬉しい。
しかし、なぜこんな挙動をするのか

# ソースコードで確認してみる

```javascript
// https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/plugins/router.ts
export default defineNuxtPlugin<{ route: Route, router: Router }>({
  name: 'nuxt:router',
  enforce: 'pre',
  setup (nuxtApp) {
    // <中略>
    async function handleNavigation (url: string | Partial<Route>, replace?: boolean): Promise<void> {
      try {
        // Resolve route
        const to = getRouteFromPath(url)

        // Run beforeEach hooks
        for (const middleware of hooks['navigate:before']) {
          const result = await middleware(to, route)
          // Cancel navigation
          if (result === false || result instanceof Error) { return }
          // Redirect
          if (typeof result === 'string' && result.length) { return handleNavigation(result, true) }
        }

        for (const handler of hooks['resolve:before']) {
          await handler(to, route)
        }
        // Perform navigation
        Object.assign(route, to)
        if (import.meta.client) {
          window.history[replace ? 'replaceState' : 'pushState']({}, '', joinURL(baseURL, to.fullPath))
          if (!nuxtApp.isHydrating) {
            // Clear any existing errors
            await nuxtApp.runWithContext(clearError)
          }
        }
        // Run afterEach hooks
        for (const middleware of hooks['navigate:after']) {
          await middleware(to, route)
        }
      } catch (err) {
        if (import.meta.dev && !hooks.error.length) {
          console.warn('No error handlers registered to handle middleware errors. You can register an error handler with `router.onError()`', err)
        }
        for (const handler of hooks.error) {
          await handler(err)
        }
      }
    }
    // <中略>
  }
})
```

```javascript
// https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/entry.ts
...
entry = async function initApp () {
  if (vueAppPromise) { return vueAppPromise }
  const isSSR = Boolean(
    window.__NUXT__?.serverRendered ||
    document.getElementById('__NUXT_DATA__')?.dataset.ssr === 'true'
  )
  const vueApp = isSSR ? createSSRApp(RootComponent) : createApp(RootComponent)

  const nuxt = createNuxtApp({ vueApp })

  try {
    await applyPlugins(nuxt, plugins)
  } catch (err) {
    await nuxt.callHook('app:error', err)
    nuxt.payload.error = (nuxt.payload.error || err) as any
  }

  try {
    await nuxt.hooks.callHook('app:created', vueApp)
    await nuxt.hooks.callHook('app:beforeMount', vueApp)
    vueApp.mount(vueAppRootContainer)
    await nuxt.hooks.callHook('app:mounted', vueApp)
    await nextTick()
  } catch (err) {
    await nuxt.callHook('app:error', err)
    nuxt.payload.error = (nuxt.payload.error || err) as any
  }
  return vueApp
}
...
```

nuxt/src/app/plugins/router.tsからpluginsフォルダ内の初期化の処理はもとより、ルーティングの処理もrouterのpluginとして登録しているのが見て取れる。

加えて、nuxt/src/app/entry.tsでは`await applyPlugins(nuxt, plugins)`でpluginsを読み込みきった後に`vueApp.mount(vueAppRootContainer)`でapp.vueの読み込みに進んでいる。

結果としてpluginに登録された処理が順番に同期的に読み込まれ、その処理が終わったあとにapp.vueのマウントがなされているようだった。

# まとめ

今年の12月でvue2のサポートが終了し完全にvue3への移行が必須となってきます。
周辺ライブラリの整備も進んできた今Nuxt3への移行は良い選択肢だと思います。

ここまで読んで頂きありがとうございました。