@nuxtjs/composition-api / @nuxt/content 란 무엇입니까?

Nuxt v2.13(2020-06-19) 근처에서 사용할 수 있는 레벨이 되고 있는 모습


전용 페이지도 있다

htps : // 콘텐트 t. 없는 xtjs. 오 rg / 그럼 /

htps : //코 m포시치온-아피. 없는 xtjs. rg/

@nuxtjs/composition-api 개요

Vue 3의 Composition API를 Nuxt의 사양에 맞춘 것

@nuxt/content 개요

Markdown이나 JSON과 같은 파일에서 API처럼 fetch 할 수있게하는 것

create-nuxt-app를 사용하여 nuxt 앱 생성

htps : // 기주 b. 이 m / no xt / c rete-no xt - p
1.Package manager: Yarn
2.Programming language: TypeScript
3.UI framework: Vuetify
4.Nuxt.js modules: Axios/PWA/Content
5.Linting tools: ESLint/Prettier/Lint staged files/StyleLint
6.Testing framework: Jest
7.Rendering mode: Universal(SSR/Static)
8.Deployment target: Server
9.Deployment tools: none

@nuxt/content는 modules에 설명되어 있습니다.

@nuxtjs/composition-api 설치
htps : //코 m포시치온-아피. 없는 xtjs. 오 rg / 세츠 p

추가하다

nuxt.config.ts

buildModules: [
  // https://github.com/nuxt-community/composition-api
  '@nuxtjs/composition-api',
],

시도한 리포지토리
htps : // 기주 b. 이 m/세이 y4/누 xt214/t 네/마s r/src

@nuxtjs/composition-api

htps //w w. 음 pmjs. 코 m / Pac 카게 / @ Xtjs / 코 m Poshichi On-Api
htps : // 기주 b. 코 m/누 xt こむにty/코 m포시치온-아피/bぉb/마인/src/엔트리 포인 t. ts


component 정의

components/TheUser.vue

<template>
  <div>Name: {{ fullName }}, Message: {{ message }}</div>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from '@nuxtjs/composition-api'

interface User {
  firstName: string
  lastName: string
}

export default defineComponent({
  props: {
    user: {
      type: Object as () => User,
      required: true,
    },
  },

  setup({ user }) {
    const fullName = computed(() => `${user.firstName} ${user.lastName}`)
    const message = ref('This is a message')

    return {
      fullName,
      message,
    }
  },
})
</script>

components/TheCounter.vue

<template>
  <div>
    <v-btn @click="decrement">-</v-btn>
    <span>{{ count }}</span>
    <v-btn @click="increment">+</v-btn>
  </div>
</template>

<script lang="ts">
import { reactive, computed } from '@nuxtjs/composition-api'

export default {
  setup() {
    const state = reactive({
      count: 0,
    })
    const count = computed(() => state.count)

    return {
      count,
      increment() {
        state.count++
      },
      decrement() {
        state.count--
      },
    }
  },
}
</script>

실제로 사용할 때

main.vue

<template>
  <div>
    <the-counter />
    <the-user :user="user" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        firstName: 'Taro',
        lastName: 'Yamada',
      },
    }
  },
}
</script>

@nuxt/content

htps : // 콘텐트 t. 없는 xtjs. 오 rg / 자 / w 리친 gcontent 디렉터리에 Markdown 추가

코드

hello.vue

<template>
  <div>
    <h3>{{ page.title }}</h3>
    <nuxt-content :document="page" />
  </div>
</template>

<script>
export default {
  async asyncData({ $content }) {
    const page = await $content('hello').fetch()

    return {
      page,
    }
  },
</script>

markdown sample

output