content

애플리케이션을 위한 파일 기반 CMS를 만들기 위해 content/ 디렉터리를 사용하세요.

Nuxt Content는 프로젝트의 content/ 디렉터리를 읽고 .md, .yml, .csv, .json 파일을 파싱하여 애플리케이션을 위한 파일 기반 CMS를 생성합니다.

  • 내장 컴포넌트로 콘텐츠를 렌더링합니다.
  • MongoDB와 유사한 API로 콘텐츠를 쿼리합니다.
  • MDC 문법을 사용해 Markdown 파일 안에서 Vue 컴포넌트를 사용합니다.
  • 내비게이션을 자동으로 생성합니다.
Nuxt Content 문서에서 더 알아보세요.

Nuxt Content 활성화

@nuxt/content 모듈을 프로젝트에 설치하고, 동시에 nuxt.config.ts에 추가하려면 다음 한 줄 명령을 사용하세요:

Terminal
npx nuxt module add content

콘텐츠 생성

Markdown 파일을 content/ 디렉터리 안에 배치하세요:

content/index.md
# Hello Content

모듈이 이를 자동으로 로드하고 파싱합니다.

콘텐츠 렌더링

콘텐츠 페이지를 렌더링하려면 <ContentRenderer> 컴포넌트를 사용해 catch-all 라우트를 추가하세요:

app/pages/[...slug].vue
<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

<template>
  <div>
    <header><!-- ... --></header>

    <ContentRenderer
      v-if="page"
      :value="page"
    />

    <footer><!-- ... --></footer>
  </div>
</template>

문서

https://content.nuxt.com으로 이동해 쿼리 작성 방법, MDC 문법을 사용해 Markdown 파일에서 Vue 컴포넌트를 사용하는 방법 등 Content 모듈 기능에 대해 더 알아보세요.