메타 태그

Nuxt 2에서 Nuxt Bridge의 새로운 메타 태그로 마이그레이션하는 방법을 알아보세요.

head로 컴포넌트 상태에 접근해야 한다면, useHead 사용으로 마이그레이션해야 합니다.

Options API를 사용해야 하는 경우, defineNuxtComponent를 사용할 때 사용할 수 있는 head() 메서드가 있습니다.

마이그레이션

bridge.meta 설정

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    meta: true,
    nitro: false, // Nitro로의 마이그레이션이 완료되면 true로 설정
  },
})

head 속성 업데이트

nuxt.config에서 head를 app.head로 이름을 변경하세요. (더 이상 객체에 중복 제거를 위한 hid 키가 없다는 점에 유의하세요.)

export default {
  head: {
    titleTemplate: '%s - Nuxt',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' },
    ],
  },
}

useHead 컴포저블

Nuxt Bridge는 새로운 useHead 컴포저블로 접근할 수 있는 새로운 Nuxt 3 메타 API를 제공합니다.

<script setup lang="ts">
useHead({
  title: 'My Nuxt App',
})
</script>
이 useHead 컴포저블은 <head>를 조작하기 위해 내부적으로(vue-meta가 아닌) @unhead/vue를 사용합니다.
useHead 와 함께 네이티브 Nuxt 2 head() 속성을 추가로 사용하는 것은 권장하지 않습니다. 충돌이 발생할 수 있습니다.

이 컴포저블을 사용하는 방법에 대한 더 자세한 내용은 문서를 참고하세요.

Options API

<script>
// Options API의 `head` 메서드를 사용하는 경우 반드시 `defineNuxtComponent`를 사용해야 합니다
export default defineNuxtComponent({
  head (nuxtApp) {
    // `head`는 nuxt 앱을 받지만 컴포넌트 인스턴스에는 접근할 수 없습니다
    return {
      meta: [{
        name: 'description',
        content: 'This is my page description.',
      }],
    }
  },
})
</script>
잠재적인 변경 사항: head는 nuxt 앱을 받지만 컴포넌트 인스턴스에는 접근할 수 없습니다. head 안의 코드가 this 또는 this.$data를 통해 data 객체에 접근하려고 한다면, useHead 컴포저블로 마이그레이션해야 합니다.

Title Template

함수(완전한 제어를 위해)를 사용하고 싶다면, 이는 nuxt.config에서 설정할 수 없으며, 대신 /layouts 디렉터리 내에서 설정하는 것을 권장합니다.

app/layouts/default.vue
<script setup lang="ts">
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - Site Title` : 'Site Title'
  },
})
</script>