Components

Nuxt는 <Title>, <Base>, <NoScript>, <Style>, <Meta>, <Link>, <Body>, <Html> 및 <Head> 컴포넌트를 제공하여 컴포넌트 템플릿 내에서 직접 메타데이터와 상호 작용할 수 있습니다.

이러한 컴포넌트 명은 기본 HTML 요소와 일치하므로 템플릿에서 컴포넌트 명 규칙을 대문자로 시작하는 것이 매우 중요합니다.

<Head> 및 <Body>는 중첩된 메타 태그를 수용할 수 있지만(미적인 이유로), 이는 중첩된 메타 태그가 최종 HTML에 어떤 위치에 렌더링 되는지에는 영향을 미치지 않습니다.

**// app.vue**
<script setup lang="ts">
const title = ref('Hello World')
</script>

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style type="text/css" children="body { background-color: green; }" />
    </Head>

    <h1>{{ title }}</h1>
  </div>
</template>

이 예제 코드에서는 Nuxt에서 제공하는 여러 컴포넌트를 사용하여 메타데이터를 처리하고 있습니다. 컴포넌트들은 템플릿 내에서 메타데이터와 스타일을 조작하는 데에 도움이 됩니다.

실습

Features

Reactivity

Reactivity(반응형)은 모든 속성에서 지원되며, computed, getters, reactive를 사용할 수 있습니다.

computed(() => value) 대신에 getters (() => value)를 사용하는 것이 권장됩니다.

실습