1. 제목 및 날짜

제목: VueAwesomePaginate 사용 시 페이지 네이션 바 미출력 문제
날짜: 2024년 8월 19일

2. 문제 설명

문제 발생 상황:

웹 애플리케이션에서 vue-awesome-paginate 라이브러리를 사용하여 페이지 네이션 바를 구현하려고 했으나, 페이지 네이션 바가 화면에 나타나지 않았습니다.

해당 기능을 구현한 후, 브라우저 콘솔에서 아래와 같은 오류 메시지가 확인되었습니다:

main.js:14 [Vue warn]: A plugin must either be a function or an object with an "install" function.
(익명)	@	main.js:14
프레임 2개 더 표시

이로 인해 페이지 네이션 바가 렌더링되지 않았습니다.

3. 원인 분석

잠재적 원인:

main.js에서

VueAwesomePaginate가 기본 export된 모듈임에도 불구하고, import할 때 중괄호 {}를 사용한 것이 원인입니다.
중괄호는 이름이 명시적으로 export된 모듈을 가져올 때 사용하는데, 기본 export의 경우 중괄호 없이 import해야 합니다.
가설 및 테스트:

import { VueAwesomePaginate } from "vue-awesome-paginate"; // 을

import VueAwesomePaginate from "vue-awesome-paginate"; //로 수정

코드 수정 후 애플리케이션을 다시 실행하여 페이지 네이션 바가 정상적으로 나타났습니다.

원인:

VueAwesomePaginate가 기본 export된 경우, 중괄호를 사용하면 오류가 발생합니다.
중괄호는 이름 export된 모듈을 임포트할 때만 사용해야 합니다.
따라서, vue-awesome-paginate에서 VueAwesomePaginate가 기본 export라면 중괄호 없이 import VueAwesomePaginate from "vue-awesome-paginate";로 임포트해야 합니다.

4.결론

VueAwesomePaginate를 잘못된 방식으로 임포트하여 페이지 네이션 바가 렌더링되지 않는 문제가 발생했습니다. 임포트 방식을 수정함으로써 문제를 해결할 수 있었습니다.