[javascript] Nuxt.js에서의 동적 컴포넌트 로딩 방법은?

19 Dec 2023

javascript

1. asyncData를 활용한 동적 컴포넌트 로딩

asyncData 메서드를 사용하여 데이터를 불러오는 동안 컴포넌트를 동적으로 로딩할 수 있습니다.

export default {
  async asyncData({ params }) {
    const dynamicComponent = await import(`~/components/${params.id}.vue`)
    return { dynamicComponent }
  }
}

해당 코드에서 params.id는 동적 컴포넌트의 파일명을 사용한 예시입니다.

2. fetch를 이용한 동적 컴포넌트 로딩

fetch 메서드를 사용하여 데이터를 불러오는 동안 컴포넌트를 동적으로 로딩할 수 있습니다.

export default {
  async fetch({ params }) {
    const dynamicComponent = await import(`~/components/${params.id}.vue`)
    // 동적 컴포넌트 로딩 후 로직 구현
  }
}

3. nuxtServerInit를 활용한 동적 컴포넌트 로딩

store에서 nuxtServerInit를 이용하여 초기 데이터를 가져올 때, 컴포넌트를 동적으로 로딩할 수 있습니다.

export const actions = {
  async nuxtServerInit({ commit }, { params }) {
    const dynamicComponent = await import(`~/components/${params.id}.vue`)
    // 컴포넌트 로딩 후 처리할 내용 구현
  }
}

이러한 방법을 통해 Nuxt.js 프로젝트 내에서 동적으로 컴포넌트를 로딩할 수 있습니다.