[NuxtJS] 전역 객체

$nuxt

Nuxt 애플리케이션의 루트 인스턴스에 대한 참조로, 애플리케이션의 전역 상태나 기능에 접근할 때 사용된다. Vue 컴포넌트 내에서 this.$nuxt를 통해 접근할 수 있다.

• refresh(): 현재 페이지를 강제로 리프레시하고 데이터를 다시 가져온다.
• navigateTo(path): 특정 경로로 프로그래밍적으로 이동한다. (Nuxt 3에서 도입된 기능)
• isOffline: 애플리케이션의 네트워크 연결 여부를 확인할 수 있다.

 

$router

this.$router는 Vue Router 인스턴스를 나타낸다. Vue 애플리케이션 내에서 라우팅 관련 작업을 관리하는 객체로, 라우트를 변경하거나 라우트 관련 정보를 처리할 때 사용된다. 이 객체를 통해 애플리케이션의 내비게이션을 조작할 수 있다.

• push(path, [state]): 지정된 경로로 네비게이션하고, 히스토리에 기록을 추가한다.
• replace(path, [state]): 지정된 경로로 네비게이션하지만, 히스토리 기록을 남기지 않는다.
• go(n): 히스토리 스택에서 n만큼 앞으로 또는 뒤로 이동한다.
• back(): 이전 페이지로 이동한다.
• forward(): 다음 페이지로 이동한다.

 

$route

this.$route는 현재 활성화된 라우트의 정보를 담고 있는 객체이다. 현재 페이지의 URL, 파라미터, 쿼리 등 라우트와 관련된 데이터를 제공하며, 현재 페이지 상태를 조회할 때 사용된다.

• path: 현재 라우트의 경로를 반환
• params: URL path 파라미터를 반환.
• query: URL query 파라미터를 반환.
• name: 라우트의 이름을 반환

 

$store / useStore

• Nuxt 2 (Vuex 사용)
  • Vuex 스토어 인스턴스에 대한 접근을 제공하며, 애플리케이션의 상태 관리를 담당한다. this.$store를 통해 상태, 뮤테이션, 액션 등을 관리할 수 있다.
  • commit(mutation, payload): 상태를 변경하는 뮤테이션을 호출한다.
  • dispatch(action, payload): 비동기 작업을 수행하는 액션을 호출한다.
  • state: 현재 스토어의 상태를 조회한다.
  • getters: 정의된 게터를 통해 상태를 조회한다.
• Nuxt 3 (Pinia 사용):
  • Pinia 스토어 인스턴스에 대한 접근을 제공하며, Vuex의 대체제로 사용된다. useStore 훅을 통해 상태와 비동기 작업을 관리할 수 있다.
  • state: Pinia 스토어의 상태를 조회한다.
  • actions: 비동기 작업을 수행하는 액션을 정의한다.
  • getters: 상태를 조회하는 게터를 정의한다.

 

$axios / useAxios

• Nuxt 2: Nuxt.js에 내장된 axios 인스턴스로 HTTP 요청을 관리한다. this.$axios를 통해 HTTP 요청을 보낼 수 있다.
• Nuxt 3: useAxios 훅을 통해 접근한다.

 

$config / useRuntimeConfig

• Nuxt 2: nuxt.config.js에 정의된 publicRuntimeConfig와 privateRuntimeConfig에 접근할 수 있다. this.$config를 통해 런타임 설정을 조회할 수 있다.
• Nuxt 3: useRuntimeConfig 훅을 통해 접근한다.

 

$auth / useAuth설명:

• Nuxt 2: Nuxt Auth 모듈을 사용할 때 인증 관련 정보를 제공한다. this.$auth를 통해 인증 상태를 관리할 수 있다.
• Nuxt 3: useAuth 훅을 통해 접근할 수 있다.
  
  • loginWith(strategy, credentials): 특정 전략을 사용하여 로그인한다.
  • logout(): 현재 사용자 세션을 로그아웃한다.
  • user: 현재 로그인된 사용자의 정보에 접근한다.
  • loggedIn: 사용자가 로그인되어 있는지 확인한다.

 

$i18n

Nuxt I18n 모듈을 사용할 때 국제화 기능을 제공한다. this.$i18n을 통해 현재 언어 설정 및 번역된 문자열에 접근할 수 있다.

• locale: 현재 설정된 언어를 가져오거나 설정한다.
• t(key, params): 특정 키에 해당하는 번역된 문자열을 가져온다.
• setLocale(locale): 새로운 언어로 변경한다.

 

$cookies

 Nuxt.js에서 쿠키를 쉽게 관리할 수 있는 객체이다. this.$cookies를 통해 쿠키의 설정, 조회, 삭제를 할 수 있다.

• set(name, value, options): 쿠키를 설정한다.
• get(name): 특정 이름의 쿠키 값을 가져온다.
• remove(name): 특정 쿠키를 삭제한다.

 

$toast

Nuxt.js에서 Toast 알림을 생성할 수 있는 객체이다. nuxt-toast 모듈을 설치한 후, this.$toast를 통해 알림을 표시할 수 있다.

• show(message, options): 일반 토스트 메시지를 보여준다.
• success(message, options): 성공 메시지를 보여준다.
• error(message, options): 에러 메시지를 보여준다.

 

$meta

Nuxt.js에서 메타 태그를 관리하는 객체로, nuxt-meta 모듈을 통해 HTML 헤더의 메타 정보를 동적으로 관리할 수 있다.

• refresh(): 메타 정보를 새로고침한다.
• add(tag): 새로운 메타 태그를 추가한다.

 

$loading

Nuxt.js의 내장 로딩 바에 접근할 수 있는 객체이다. this.$loading을 통해 로딩 바의 상태를 제어할 수 있다.

• start(): 로딩 바를 시작한다.
• finish(): 로딩 바를 종료한다.
• fail(): 로딩 바를 실패 상태로 표시한다.

 

$content

Nuxt Content 모듈을 사용하여 Markdown, JSON, YAML 등의 파일을 읽고 관리할 수 있다. this.$content를 통해 콘텐츠를 처리할 수 있다.

• fetch(): 콘텐츠 데이터를 가져온다.
• query(path): 특정 경로에서 데이터를 쿼리한다.