Nuxt

Nuxt에서 Data Loaders를 사용하려면 Nuxt 프로젝트의 plugins 디렉터리에 새 플러그인 파일을 만들고 평소처럼 Data Loaders 플러그인을 설정하세요:

// plugins/data-loaders.ts
import { DataLoaderPlugin } from 'vue-router/experimental'

export default defineNuxtPlugin({
  name: 'data-loaders',
  dependsOn: ['nuxt:router'],
  setup(nuxtApp) {
    const appConfig = useAppConfig()

    nuxtApp.vueApp.use(DataLoaderPlugin, {
      router: nuxtApp.vueApp.config.globalProperties.$router,
      isSSR: import.meta.server,
      // 다른 옵션들...
    })
  },
})

필수 옵션은 두 가지입니다:

• router: Vue Router 인스턴스
• isSSR: 앱이 서버 사이드에서 실행 중인지 나타내는 불리언 값

모듈은 없나요?

"Why do I need to write the plugin myself instead of using a Module?"

Data Loader 플러그인에는 직렬화할 수 없는 옵션이 있습니다(예: selectNavigationResult() 및 errors). 이를 모듈 안에서 지원하려면 app.config.ts를 통해 전달해야 하므로 구성이 분산되고 유지보수가 더 어려워집니다. 짧은 플러그인이 이해하기 더 쉽고 vanilla 버전에 더 가깝습니다.