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

Martin 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'

Integración del intérprete de Markdown en NuxtJS

Fundamentos de NuxtJS

Introducción a Nuxtjs

Características de NuxtJS

Cómo crear un proyecto con NuxtJS

Rutas y Componentes con NuxtJS

Rutas dinámicas con NuxtJS

Maquetación de vistas en nuestro proyecto

Creación del componente para las cards

Integración del intérprete de Markdown en NuxtJS

Cómo agregar SEO y meta tags en NuxtJS

Built-In Components

Backend con Airtable y Netlify Functions

Backend con Airtable

Despliegue y API con Netlify

Configuración de Netlify

Programando las funciones para Netlify

Consumo de nuestro backend con Netlify

Módulos de NuxtJS

Usando el módulo HTTP para consumir nuestro backend

Context

Consumir el API

Sistema de comentarios

Utilidades en NuxtJS

Estrategias de renderizado

Cierre del curso

Despedida del curso