Integración del intérprete de Markdown en NuxtJS

Clase 7 de 21 • Curso de Server Side Rendering con Nuxt 2

Carlos Rodríguez

student•

Si les da error los paquetes de vue-markdown babel-runtime pueden usar marked como alternativa:

npm instal merked

. Luego lo importan en el scrip:

<script>
import { marked } from 'marked';

export default {
  name: 'ArticlePage',
  data() {
    return {
      post: {
        // ...
        content: '# Title\n\n## Second title\n\nLorem ipsum dolor sit amet',
      },
    };
  },
 // ...
  computed: {
    renderMarkdown() {
      return marked(this.post.content);
    },
  },
};
</script>

. Y finalmente usarlo en el template:

<template>
  <div class="box">
      <!-- ... -->
      <div class="markdown" v-html="renderMarkdown"></div>   
  </div>
</template>

Carlos Perilla

student•

Esto es justo lo que buscaba, gracias!

Samuel Montoya Gallo

student•

Para instalar el VueMarkdown=

npm install vue-markdown babel-runtime

Martín S. Campos

student•

Como mención, se puede tener el contenido de MarkDown en un archivo directamente con terminación .md, aunque este archivo en si solo estaría como parte del proyecto.

Esto puede ser posible con el modulo Nuxt Content

Carlos Perilla

student•

Buena data! Para mantener el ritmo del curso creo que esta mejor Marked, pero Nuxt Content es una herramienta potente.

Y la usaría en un proyecto propio.

Felipe Bascuñan

student•

Tengo el siguiente error con MarkDown

Cannot find module 'core-js/library/fn/get-iterator' from '/var/www/html/miniblog'