Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for IIHARA IIHARA
October 17, 2023

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

Avatar for IIHARA

IIHARA

October 17, 2023
Tweet

More Decks by IIHARA

Other Decks in Technology

Transcript

  1. 目次 1. 自己紹介 2. きっかけ 3. vueで確認する 4. Nuxtで確認する 5.

    ソースコードで確認する Engineer LT Night #1 @渋谷 2
  2. ログを埋め込む // 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') }) // 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') }) Engineer LT Night #1 @渋谷 8
  3. 下記のように関連する処理全てにawaitを付けた としても、、、 // main.ts const app = await createApp(AppEmployee) await

    app.use(router) await app.component() await app.provide(storeKey, createGlobalStore()) await app.mount('#app') // router.ts - router.beforeEach(authCheckOnRouteChanged) + router.beforeEach(async (to, from) => { + await authCheckOnRouteChanged(to, from) + }) main.tsとrouter.tsの処理が非同期的に進みなが らapp.vueのmountへとつながっている Engineer LT Night #1 @渋谷 11
  4. ログを埋め込む // plugin/index.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') }) }) // middleware/index.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') }) }) Engineer LT Night #1 @渋谷 13
  5. // 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) } } } // < 中略> } }) Engineer LT Night #1 @渋谷 18
  6. // 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 } ... Engineer LT Night #1 @渋谷 19