nuxt3에서 플러그인을 만드는 방법

이 튜토리얼에서는 nuxt3에서 플러그인을 만드는 방법을 배웁니다. 일부app hooks를 사용하여 플러그인을 생성합니다. 이러한 후크의 도움으로 페이지 상단에 진행률 표시줄을 표시하는 플러그인을 만들 것입니다.

전제 조건

NProgress 패키지를 사용하여 페이지가 로드되는 동안 페이지 상단에 표시줄을 표시합니다. 그럼 설치해보겠습니다. 그리고 css를 가져오거나 css 파일에 대한 링크를 추가해야 합니다.

npm install --save nprogress

<link rel="stylesheet" href="https://unpkg.com/[email protected]/nprogress.css">

플러그인 만들기

이제 프로젝트의 루트에/plugins라는 폴더를 만듭니다. 그리고 이 폴더에 page-progress.js라는 파일을 생성합니다. 원하는 대로 이름을 지정할 수 있습니다. Nuxt는 defineNuxtPlugin이라는 플러그인을 생성하는 헬퍼 함수를 ​​제공합니다.

export default defineNuxtPlugin((nuxtApp) => {
    ...
})

이 함수 내에서 nuxtApp 개체를 사용하여 후크에 액세스하고 진행률 표시줄을 표시하거나 숨길 것입니다. 우리는 두 개의 후크, 즉 page:start와 page:finish가 필요합니다.

page:start - 이 후크는 페이지 로드가 시작될 때 호출됩니다.

page:finish - 페이지 로드가 완료되면 이 후크가 호출됩니다.

먼저 NProgress 패키지를 가져온 다음 page:start 후크에서 NProgress.start() 메서드를 호출하여 진행률 표시줄 표시를 시작합니다. 그리고 page:finish 후크에서 NProgress.done() 메서드를 호출하여 진행률 표시줄을 숨깁니다.

import NProgress from "nprogress";

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hooks.hook("page:start", () => {
        NProgress.start();
    });
    nuxtApp.hooks.hook("page:finish", () => {
        NProgress.done();
    });
});

기본적으로 NProgress는 페이지 오른쪽 상단에 스피너를 표시하고 비활성화하려면 showSpinner를 false로 전달해야 합니다.

export default ...
NProgress.configure({ showSpinner: false })
nuxtApp.hooks....

nuxt가 자동으로 플러그인을 등록하기 때문에 nuxt 구성의 플러그인 배열에 플러그인을 등록할 필요가 없습니다.