Nuxt3은 기본적으로 charset 및 viewport 등 다양한 메타 태그를 지원하고 있습니다.
필요할 경우 커스터마이징 할 수 있을 뿐만 아니라 여러 가지 방법으로 다른 메타 태그들을 지정할 수 있습니다.
메타 태그들은 다음 세 가지 방식으로 설정할 수 있습니다.
- useHead Composable을 사용하는 방식
- Meta 컴포넌트를 사용하는 방식
- nuxt.config.ts 설정 방식
1. useHead Composable을 사용하는 방식
setup 함수 안에 useHead Composable을 사용하여 다양한 메타 태그를 호출할 수 있습니다.
또한 reactive한 메타데이터에 대한 개체를 반환하는 함수를 전달할 수도 있습니다.
다음은 동적으로 Meta 데이터를 설정하는 방법입니다.
<script setup> 에서 Route를 이용하여 매개변수를 받고
viewProduct 함수를 호출합니다. (하단에 다른 파일에 모듈화된 viewProduct 함수가 있습니다.)
함수를 통해 받아온 data 를 useHead Composable을 통해 동적으로 적용합니다.
<script setup>
import {useHead, useRoute} from "nuxt3/app";
import {viewProduct} from "../../useFetch";
const route = useRoute()
const { data } = await viewProduct(route.params.productId)
useHead({
meta: [
{ name: '상품이름', content: JSON.stringify(data.value.name) },
{ name: '상품내용', content: JSON.stringify(data.value) },
{ name: '상품등록일', content: JSON.stringify(data.value.registerDate) }
]
})
</script>
viewProduct 함수
function viewProduct(data) {
const url = baseURL+'product/'+data
return useAsyncData('product', () => $fetch(url))
}
페이지 호출 시 다음과 같은 메타 데이터를 확인할 수 있습니다.
<head >
<meta name="상품이름" content=""과자"">
<meta name="상품내용" content="{"productId":5,"name":"과자","price":1000,"content":"달달한 과자","stock":100,"categoryId":1000,"registerDate":"2022-04-21T09:36:50.572317"}">
<meta name="상품등록일" content=""2022-04-21T09:36:50.572317"">
</head>
2. Meta 컴포넌트를 사용하는 방식
Nuxt는 메타데이터를 조작할 수 있게 다음 컴포넌트를 제공합니다.
이 컴포넌트 이름은 HTML의 기본적인 element와 일치하므로 템플릿에서 대문자로 시작해서 차이를 주는게 중요합니다.
<Title> <Base> <Script> <Style> <Meta> <Link> <Body> <Html> <Head>
다음은 동적으로 Meta 데이터를 설정하는 방법입니다.
<script setup> 에서 Route를 이용하여 매개변수를 받고
viewProduct 함수를 호출합니다. (하단에 다른 파일에 모듈화된 viewProduct 함수가 있습니다.)
<script setup>
import {useRoute} from "nuxt3/app";
import {viewProduct} from "../../useFetch";
const route = useRoute()
const { data } = await viewProduct(route.params.productId)
</script>
viewProduct 함수
function viewProduct(data) {
const url = baseURL+'product/'+data
return useFetch(url);
}
받아온 데이터를 Meta 컴포넌트에 동적으로 적용합니다.
<Head>
<Title>titleHeadTest</Title>
<Meta name="productId" :content='JSON.stringify(data.productId)'/>
<Meta name="productName" :content='data.name'/>
<Meta name="productPrice" :content='JSON.stringify(data.price)'/>
<Meta name="productContent" :content='data.content'/>
<Meta name="productStock" :content='JSON.stringify(data.stock)'/>
<Meta name="productCategoryId" :content='JSON.stringify(data.categoryId)'/>
<Meta name="productRegisterDate" :content='data.registerDate'/>
</Head>
페이지 호출 시 다음과 같은 메타 데이터를 확인할 수 있습니다.
<!DOCTYPE html>
<html data-head-attrs="">
<head >
<title>titleHeadTest</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="companyName" content="plateer">
<meta name="teamName" content="EC1">
<meta name="projectName" content="nuxt3">
<meta name="productId" content="5">
<meta name="productName" content=""과자"">
<meta name="productPrice" content="1000">
<meta name="productContent" content=""달달한 과자"">
<meta name="productStock" content="100">
<meta name="productCategoryId" content="1000">
<meta name="productRegisterDate" content=""2022-04-21T09:36:50.572317"">
3. nuxt.config.ts 설정 방식
/nuxt.config.ts 파일에 아래와 같이 설정할 수 있습니다.
import { defineNuxtConfig } from 'nuxt3'
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
app: {
head: {
meta: [
{ name: 'companyName', content: 'ABCD'},
{ name: 'teamName', content: 'KKK'},
{ name: 'projectName', content: 'Nuxt3'}
]
}
}
})
설정한 메타 데이터를 앱 전역적으로 확인할 수 있습니다.
<head >
<meta name="companyName" content="ABCD">
<meta name="teamName" content="KKK">
<meta name="projectName" content="nuxt3">
</head>
참고문서:
https://v3.nuxtjs.org/guide/features/head-management
이상입니다.
오늘도 좋은 하루 보내세요.
