useState 컴포저블은 SSR에 적합한 반응형 공유 상태를 생성합니다. 사용법 // Create a reactive state and set default value const count = useState('counter', () => Math.round(Math.random() * 100)) 참고) Nuxt-개요 > 상태관리 useState 내부 데이터는 JSON으로 직렬화되므로 클래스, 함수, 심벌 등 직렬화할 수 없는 어떤 것도 포함하지 않는 것이 중요하다. shallowRef 사용 상태가 적극적으로 반응할 필요가 없다면 useState 와 shallowRef 를 결합할 수 있다. 이렇게 하면 상태에 큰 개체와 배열이 포함된 경우 성능이 향상될 수 있다. const state = useStat..

useSeoMeta 과 마찬가지로 useServerSeoMeta 컴포저블을 사용하면 사이트의 SEO 메타 태그를 TypeScript가 완전히 지원되는 플랫 개체로 정의할 수 있다. 참고 > Nuxt-Composable > useSeoMeta 대부분의 경우 로봇은 초기 로드만 스캔하므로 메타가 반응할 필요가 없다. 따라서 클라이언트에서 아무 작업도 수행하지 않거나 (혹은 head 객체를 반환하는) 성능 중심 유틸리티로 useServerSeoMeta 를 사용하는 것이 좋다. 참고) Nuxt-개요 > SEO 와 Meta

useSeoMeta 컴포저블을 사용하면 사이트의 SEO 메타 태그를 TypeScript가 완전히 지원되는 플랫 객체로 정의할 수 있다. useSeoMeta 를 사용하면 property 대신 name 을 사용하는 것과 같은 일반적인 실수와 오타를 방지할 수 있다. 100개가 넘는 메타 태그가 완전히 입력되어 있기 때문이다. 이는 XSS에 안전하고 TypeScript를 완벽하게 지원하므로 사이트에 메타 태그를 추가하는데 권장되는 방법이다. 참고) Nuxt-개요 > SEO 와 Meta 사용 예 반응형 태그를 삽입할 때는 계산된 getter 구문(() => value)을 사용해야한다. 100개가 넘는 매개변수가 있다. 아래 소스 코드의 전체 매개변수 목록을 참고하자.

useRuntimeConfig 컴포저블을 사용하여 런타임 구성 변수에 액세스한다. // server/api/foo.ts export default defineEventHandler((event) => { const config = useRuntimeConfig(event) }) 참고) Docs > Guide > Going Further > Runtime Config 런타임 구성 정의 아래 예에서는 공개 API 기본 URL과 서버에서만 액세스할 수 있는 비밀 API 토큰을 설정하는 방법을 보여준다. runtimeConfig 변수를 nuxt.config 내부에 정의해야 한다. // nuxt.config.ts export default defineNuxtConfig({ runtimeConfig: { // Pr..

useRouter 컴포저블은 라우터 인스턴스를 반환한다. 템플릿 내에 라우터 인스턴스만 필요한 경우 $router 을 사용하세요. Back pages/ 디렉토리가 있는 경우 useRouter는 에서 vue-router 제공하는 것과 동작이 동일합니다. 기본기능 addRoute() : 라우터 인스턴스에 새 경로를 추가합니다. parentName 기존 경로의 하위 경로로 새 경로를 추가하도록 제공될 수 있다. removeRoute() : 이름으로 기존 경로를 제거한다. getRoutes() : 모든 경로 기록의 전체 목록을 가져온다. hasRoutes() : 해당 이름의 경로가 존재하는지 확인한다. resolve() : 경로 위치의 정규화된 버전을 반환한다. 기존 기반을 포함하는 href 속성도 포함된다. ..

useRoute 컴포저블은 현재 경로를 반환한다. Vue 컴포넌트의 템플릿 내에서 $route 를 사용하여 경로에 액세스할 수 있다. 사용 예 {{ mountain.title }} {{ mountain.description }} 경로 쿼리 매개변수(예: /test?example=true 경로 안의 example)에 액세스해야 하는 경우 useRoute().params 대신 useRoute().query 을사용할 수 있다. API 동적 매개변수 및 쿼리 매개변수 외에도 useRoute() 는 현재 경로와 관련된 다음과 같은 계산된 참조도 제공한다. fullPath: 경로, 쿼리 및 해시를 포함하는 현재 경로와 연결된 인코딩된 URL hash: #으로 시작하는 URL의 디코딩된 해시 섹션 matched: 현..