content

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

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

내장된 컴포넌트로 콘텐츠를 렌더링합니다.
MongoDB와 유사한 API로 콘텐츠를 쿼리합니다.
MDC 문법을 사용하여 Markdown 파일에서 Vue 컴포넌트를 사용합니다.
내비게이션을 자동으로 생성합니다.

Nuxt Content 활성화

프로젝트에 @nuxt/content 모듈을 설치하고 nuxt.config.ts에 추가하세요. 다음 명령어를 사용합니다:

Terminal

npx nuxt module add content

콘텐츠 생성

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

content/index.md

# Hello Content

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

콘텐츠 렌더링

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

pages/[...slug\

<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에서 Content 모듈의 기능, 쿼리 작성 방법 및 MDC 문법을 사용하여 Markdown 파일에서 Vue 컴포넌트를 사용하는 방법에 대해 더 알아보세요.

※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.

공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/guide/directory-structure/content