Usando el módulo HTTP para consumir nuestro backend

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

Carlos Perilla

student•

Si estas usando Nuxt 3, recomiendo usar useAsyncData.

Mi codigo:

<script setup>
    const articleContent = reactive({
        articles: [],
    })

    const url = 'http'+'://localhost:9999/.netlify/functions/articles'
// Desestructuramos data, y el proxy value, para obtener el proxy articles.
    const { data: {value: { articles }}} = await useAsyncData('articles', () => $fetch(url))
    
    onMounted(async () => {
        articleContent.articles = articles.map((a) => ({
            // Hacemos copia de los datos en a
            ...a,
            // Sobreescribimos author, date y cover.
            // Para tener un acceso más directo a los datos.
            author: a['author-name'][0],
            date: new Date(a.updated),
            cover: a.cover[0]?.thumbnails.large.url,
        }))
    })
</script>

Más info:

Sobre desestructurar: https://medium.com/@pyrolistical/destructuring-nested-objects-9dabdd01a3b8
Data Fetching: https://nuxt.com/docs/getting-started/data-fetching

Carlos Perilla

student•

Una corrección, el async en la función flecha dentro del ciclo de vida onMounted, es irrelevante, no es necesario.

Así que es un tipo.

Emanuel Borbon

student•

Tambien Nuxt 3 mejoro esto para solo usar useFetch(url) que es lo mismo que useAsyncData + $fetch

Usando el módulo HTTP para consumir nuestro backend

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