Nuxt 3는 메타 태그를 관리하는 여러 가지 방법을 제공합니다:
nuxt.config를 통해.useHead 컴포저블을 통해title, titleTemplate, base, script, noscript, style, meta, link, htmlAttrs, bodyAttrs를 커스터마이즈할 수 있습니다.
Unhead를 사용하지만, 구현 세부 사항은 변경될 수 있습니다.nuxt.config에서 head를 meta로 이름을 변경하세요. 이 공유 메타 설정을 대신 app.vue로 옮기는 것을 고려해 보세요. (객체에는 더 이상 중복 제거를 위한 hid 키가 없다는 점에 유의하세요.)head로 컴포넌트 상태에 접근해야 한다면 useHead로 마이그레이션해야 합니다. 내장 메타 컴포넌트를 사용하는 것도 고려해 볼 수 있습니다.defineNuxtComponent를 사용할 때 사용할 수 있는 head() 메서드가 있습니다.<script>
export default {
data: () => ({
title: 'My App',
description: 'My App Description',
}),
head () {
return {
title: this.title,
meta: [{
hid: 'description',
name: 'description',
content: this.description,
}],
}
},
}
</script>
<script setup lang="ts">
const title = ref('My App')
const description = ref('My App Description')
// 위의 title/description을 변경하면 이것은 반응형으로 동작합니다
useHead({
title,
meta: [{
name: 'description',
content: description,
}],
})
</script>
Nuxt 3는 동일한 작업을 수행하는 데 사용할 수 있는 메타 컴포넌트도 제공합니다. 이 컴포넌트들은 HTML 태그와 비슷해 보이지만, Nuxt에서 제공하며 유사한 기능을 가지고 있습니다.
<script>
export default {
head () {
return {
title: 'My App',
meta: [{
hid: 'description',
name: 'description',
content: 'My App Description',
}],
}
},
}
</script>
<template>
<div>
<Head>
<Title>My App</Title>
<Meta
name="description"
content="My app description"
/>
</Head>
<!-- -->
</div>
</template>
<title>이 아니라 <Title>).<script>
// Options API의 `head` 메서드를 사용하는 경우 `defineNuxtComponent`를 사용해야 합니다
export default defineNuxtComponent({
head (nuxtApp) {
// `head`는 nuxt 앱을 받지만 컴포넌트 인스턴스에는 접근할 수 없습니다
return {
meta: [{
name: 'description',
content: 'This is my page description.',
}],
}
},
})
</script>