Nuxt.js: NuxtLink 및 NuxtLoadingIndicator 컴포넌트 활용 가이드

Nuxt.js 프레임워크는 웹 애플리케이션 개발을 위한 다양한 내장 컴포넌트를 제공합니다. 본 문서에서는 페이지 내비게이션과 로딩 시 사용자 경험을 향상시키는 <NuxtLink> 및 <NuxtLoadingIndicator> 컴포넌트의 상세 기능과 활용 방안을 소개합니다.

<NuxtLink> 컴포넌트 상세 활용

<NuxtLink>는 Nuxt.js에서 제공하는 링크 컴포넌트로, Vue Router의 기능을 통합하여 Vue 애플리케이션 내에서 효율적인 링크 생성을 지원합니다. HTML의 <a> 태그와 유사하지만, NuxtLink는 사전 로딩(prefetching)과 같은 최적화 기능을 내장하고 있어 더욱 향상된 사용자 경험을 제공합니다.

기본 사용법

내부 페이지로 이동하는 링크는 to 속성에 경로를 지정하여 생성합니다.

<template>
  <NuxtLink to="/about">
    About 페이지로 이동
  </NuxtLink>
</template>

외부 웹사이트로 연결하는 경우에도 to 속성에 전체 URL을 지정하면 됩니다.

<template>
  <NuxtLink to="https://nuxtjs.org">
    Nuxt.js 공식 웹사이트
  </NuxtLink>
</template>

고급 속성 및 기능

  • target="_blank": 링크를 새 탭에서 엽니다.
  • rel="noopener noreferrer": 보안을 위해 외부 링크에 추가합니다.
  • noRel: rel 속성 없이 외부 링크처럼 동작하게 합니다.
  • activeClass, exactActiveClass: 현재 활성화된 링크에 적용될 CSS 클래스를 지정합니다.
  • replace: 현재 히스토리 항목을 새 URL로 대체합니다.
  • ariaCurrentValue: 접근성을 위해 현재 활성화된 링크의 aria-current 속성을 설정합니다.
  • external: 링크를 강제로 외부 링크 또는 내부 링크로 취급합니다.
  • prefetch, noPrefetch: 뷰포트에 들어오는 링크의 리소스를 미리 로드할지 여부를 제어합니다.
  • prefetchedClass: 사전 로딩된 링크에 적용될 CSS 클래스입니다.
  • custom: 링크 렌더링 및 네비게이션 동작을 완전히 커스텀할 수 있게 합니다.

컴포넌트 동작 재정의

defineNuxtLink 함수를 사용하여 NuxtLink의 기본 동작을 커스텀 컴포넌트로 재정의할 수 있습니다. 이를 통해 프로젝트의 특정 요구사항에 맞게 링크 설정을 조정할 수 있습니다.

커스텀 링크 컴포넌트 예제

// components/CustomLink.vue
export default defineNuxtLink({
  componentName: 'CustomLink',
  externalRelAttribute: 'noopener', // 외부 링크의 rel 속성 커스텀
  activeClass: 'link-active', // 활성 링크 CSS 클래스
  exactActiveClass: 'link-exact-active', // 정확히 일치하는 활성 링크 CSS 클래스
  prefetchedClass: 'link-prefetched', // 사전 로딩된 링크 CSS 클래스
  trailingSlash: 'remove' // URL 끝의 슬래시 처리 방식
});

전체 구현 예시

  1. 프로젝트 구조: Nuxt.js 프로젝트 내 components 폴더에 커스텀 링크 컴포넌트를 생성합니다. 
    my-nuxt-app/
├── components/
│   └── CustomLink.vue
├── pages/
│   ├── index.vue
│   └── about.vue
└── nuxt.config.js
  2. 커스텀 링크 컴포넌트 (components/CustomLink.vue): 
    <template>
  <NuxtLink
    :to="to"
    :target="target"
    :rel="rel"
    :class="{'link-active': isActive, 'link-exact-active': isExactActive}"
  >
    <slot />
  </NuxtLink>
</template>

<script>
export default defineNuxtLink({
  componentName: 'CustomLink',
  externalRelAttribute: 'noopener noreferrer',
  activeClass: 'link-active',
  exactActiveClass: 'link-exact-active',
  prefetchedClass: 'link-prefetched',
  trailingSlash: 'remove'
});
</script>

<style>
.link-active {
  color: blue;
  text-decoration: underline;
}
.link-exact-active {
  font-weight: bold;
  color: darkred;
}
</style>
  3. 홈페이지 (pages/index.vue): 
    <template>
  <div>
    <h1>메인 페이지</h1>
    <CustomLink to="/about">소개 페이지로</CustomLink>
    <CustomLink to="https://nuxtjs.org" target="_blank">Nuxt.js 방문</CustomLink>
  </div>
</template>

<script setup>
// components/CustomLink.vue 는 자동으로 임포트됩니다.
// 만약 자동으로 임포트되지 않는다면 명시적으로 임포트해야 합니다.
// import CustomLink from '~/components/CustomLink.vue';
</script>
  4. 소개 페이지 (pages/about.vue): 
    <template>
  <div>
    <h1>소개 페이지</h1>
    <CustomLink to="/">메인 페이지로 돌아가기</CustomLink>
  </div>
</template>

<script setup>
// import CustomLink from '~/components/CustomLink.vue';
</script>
  5. Nuxt 설정 (nuxt.config.js): 컴포넌트 자동 임포트를 활성화합니다. 
    export default defineNuxtConfig({
  components: true,
  // ... other configurations
});
  6. 프로젝트 실행: 터미널에서 npm run dev 명령으로 개발 서버를 실행하고 http://localhost:3000으로 접속합니다.

<NuxtLoadingIndicator> 컴포넌트 활용

<NuxtLoadingIndicator>는 페이지 로딩 또는 네비게이션 중에 진행률 표시줄을 보여주는 컴포넌트입니다. 사용자 경험을 개선하고 애플리케이션이 작동 중임을 시각적으로 알립니다.

기본 사용법

이 컴포넌트는 app.vue 또는 레이아웃 파일에 추가하여 사용할 수 있습니다.

<template>
  <NuxtLayout>
    <div>
      <NuxtLoadingIndicator /> <!-- 로딩 표시줄 컴포넌트 -->
      <NuxtPage />
    </div>
  </NuxtLayout>
</template>

주요 속성

  • color: 진행률 표시줄의 색상을 지정합니다.
  • height: 진행률 표시줄의 높이를 픽셀 단위로 설정합니다.
  • duration: 진행률 표시줄이 표시될 총 시간을 밀리초 단위로 지정합니다.
  • throttle: 진행률 표시줄이 나타나고 사라지는 데 걸리는 지연 시간을 밀리초 단위로 설정합니다.

커스텀 로딩 표시줄

<NuxtLoadingIndicator>는 기본 슬롯을 통해 사용자 정의 HTML이나 컴포넌트를 받아들여, 표시줄의 디자인과 동작을 세밀하게 조정할 수 있습니다.

커스텀 로딩 표시줄 예시

<template>
  <NuxtLayout>
    <div>
      <NuxtLoadingIndicator
        :color="customColor"
        :height="customHeight"
        :duration="customDuration"
        :throttle="customThrottle"
      >
        <!-- 사용자 정의 내용 -->
        <div class="custom-indicator-text">데이터 로딩 중...</div>
      </NuxtLoadingIndicator>
      <NuxtPage />
    </div>
  </NuxtLayout>
</template>

<script setup>
import { ref } from 'vue';

const customColor = ref('#FF6347'); // 토마토 색상
const customHeight = ref(4); // 4px 높이
const customDuration = ref(1800); // 1.8초 지속
const customThrottle = ref(300); // 0.3초 지연
</script>

<style scoped>
.custom-indicator-text {
  color: white;
  font-size: 14px;
  text-align: center;
  padding: 5px 0;
}
</style>

이 컴포넌트들을 통해 Nuxt.js 애플리케이션의 네비게이션과 로딩 상태를 더욱 효과적으로 관리하고 사용자에게 친숙한 경험을 제공할 수 있습니다.

태그: Nuxt.js Vue.js 컴포넌트 NuxtLink NuxtLoadingIndicator

7월 11일 18:23에 게시됨

인기 태그

©2026 괴물 클럽