O diretório content

Dê poderes sua aplicação Nuxt com o módulo @nuxt/content onde você pode escrever dentro de um diretório content/ e requisitar os seus ficheiros markdown, json, yaml e csv através de uma API parecida com o MongoDB, agindo como um CMS Headless baseado em Git.

Recarregamento instantâneo em desenvolvimento

O módulo de conteúdo é extremamente rápido quando vem para o recarregamento instantâneo em desenvolvimento por não ter que passar pelo webpack sempre que você fizer mudanças em seus ficheiros markdown. Você pode também ouvir o evento content:update e criar um plugin que em todo momento que você atualizar um ficheiro dentro do seu diretório de conteúdo ele despachará por exemplo um método fetchCategories.

Exibindo o conteúdo

Você pode diretamente usar o componente <nuxt-content> dentro do seu modelo para exibir o corpo da página.

<template>
  <article>
    <nuxt-content :document="article" />
  </article>
</template>

Estilizando o seu conteúdo

Dependendo do que você está usando para desenhar a sua aplicação, voce pode precisar escrever alguns estilos para exibir o markdown de maneira decente.

O componente <nuxt-content> irá automaticamente adicionar uma classe .nuxt-content, você pode usar ela para personalizar seus estilos.

<style>
  .nuxt-content h2 {
    font-weight: bold;
    font-size: 28px;
  }
  .nuxt-content p {
    margin-bottom: 20px;
  }
</style>

Manipular ficheiros markdown, csv, yaml, json(5)

Este módulo converte o seus ficheiros .md em uma estrutura de árvore JSON AST, guardada dentro de uma variável body. Você pode também adicionar um bloco de assunto dianteiro em YAML aos seus ficheiros markdown ou um ficheiro .yaml que será injetado dentro do documento. Você pode também adicionar um ficheiro json/json5 que pode também ser injetado dentro do documento. E você pode usar um ficheiro .csv onde as linhas serão atribuídas a variável body.

---
title: My first Blog Post
description: Learning how to use @nuxt/content to create a blog
---

Componentes do vue dentro do markdown

Você pode usar componentes Vue diretamente dentro do seus ficheiros markdown. No entanto você precisará usar seus componentes em kebab case e não pode usar marcadores com auto fechamento.

<template>
  <div class="p-4 mb-4 text-white bg-blue-500">
    <p><slot name="info-box">default</slot></p>
  </div>
</template>

<info-box>
  <template #info-box>
    This is a vue component inside markdown using slots
  </template>
</info-box>

API totalmente pesquisáveis

Você pode usar $content() para listar, filtrar e pesquisar seus conteúdo facilmente.

<script>
  export default {
    async asyncData({ $content, params }) {
      const articles = await $content('articles', params.slug)
        .only(['title', 'description', 'img', 'slug', 'author'])
        .sortBy('createdAt', 'asc')
        .fetch()

      return {
        articles
      }
    }
  }
</script>

Artigos anteriores e próximos artigos

O módulo de conteúdo inclui um método .surround(slug), é assim que você recebe com facilidade os artigos anteriores e próximos.

async asyncData({ $content, params }) {
    const article = await $content('articles', params.slug).fetch()

    const [prev, next] = await $content('articles')
      .only(['title', 'slug'])
      .sortBy('createdAt', 'asc')
      .surround(params.slug)
      .fetch()

    return {
      article,
      prev,
      next
    }
  },

<prev-next :prev="prev" :next="next" />

Pesquisa completa de texto

O módulo de conteúdo vem com uma pesquisa completa de texto assim você pode facilmente pesquisar ao longo de seus ficheiros markdown sem ter que instalar nada.

<script>
  export default {
    data() {
      return {
        searchQuery: '',
        articles: []
      }
    },
    watch: {
      async searchQuery(searchQuery) {
        if (!searchQuery) {
          this.articles = []
          return
        }
        this.articles = await this.$content('articles')
          .limit(6)
          .search(searchQuery)
          .fetch()
      }
    }
  }
</script>

Destacando a sintaxe

Este módulo envolve automaticamente o bloco de código e aplica as classes do Prism . Você pode também adicionar uma tema diferente do Prism ou desativar ele totalmente.

yarn add prism-themes

npm install prism-themes

content: {
  markdown: {
    prism: {
      theme: 'prism-themes/themes/prism-material-oceanic.css'
    }
  }
}

Estender o parseamento do markdown

Originalmente o markdown não suporta destacamento de linhas dentro de um bloco de código nem de nomes de ficheiros. O módulo de conteúdo permite isto com sua própria sintaxe personalizada. Linhas numeradas são adicionadas a tag pre dentro dos atributos data-line e o nome do ficheiro será convertido para um span com uma classe filename, assim você pode estilizar ela.

Geração de tabela de conteúdos

Uma propriedade do tipo array toc(Table of Contents, Table de Conteúdos) será injetada dentro do seu documento, listando todos os cabeçalhos com seus títulos e ids, assim você pode ligar a eles.

<nav>
  <ul>
    <li v-for="link of article.toc" :key="link.id">
      <NuxtLink :to="`#${link.id}`">{{ link.text }}</NuxtLink>
    </li>
  </ul>
</nav>

A poderosa API construtora de consulta (parecida com MongoDB)

O módulo de conteúdo vem com uma poderosa API construtora de consulta semelhante ao MongoDB que permite você facilmente ver o JSON de cada diretório em http://localhost:3000/_content/. O alvo final é acessível as requisições GET e POST, assim você pode usar parâmetros de consulta.

http://localhost:3000/_content/articles?only=title&only=description&limit=10

Estender com gatilhos

Você pode usar gatilhos para estender o módulo, assim você pode adicionar dados a um documento antes dele ser guardado.

Integração com o @nuxtjs/feed

No caso de artigos, o conteúdo pode ser usado para gerar alimentador de noticias usando o módulo @nuxtjs/feed .

Suporte a geração de site estático

O módulo de conteúdo funciona com geração de site estático usando o nuxt generate. Todas as rotas serão automaticamente gerada graças ao funcionalidade rastreadora do Nuxt.

O que segue