Vue/Nuxt Data Fetching

Achievement 8

Due: March 31 @ 11:59PM
Fetch and display data from an api

Nuxt 3 Resource

Nuxt 3 Abbreviated Guide

Morning Javascript: Async/Await

Docs
This is a review of asynchronous javascript which will be needed to fetch data from storyblok
async/await tutorial

Activity: Async/Await Call

Fetch with Vue 3 Composition API

Syntax Gist
Make use of ref()
Render data from an api on a vue web page
Be cognizant about what you are returning, console.log to verify that you're getting the content that you expect (if things aren't working, this is likely your first area to check)

Activity: Fetch using `ref()` 15min

Use the Disney API, Dog API, or any other that you've had success with previously or that you would like to try out.

Fetch Data in Nuxt 3

Gist
Nuxt 3 uses useAsyncData and useFetch, which function very similarly to Nuxt 2's asyncData and fetch
Review Documentation
Note that with storyblok, you should use their build in data fetching component

Activity

See Activities in Gist

Nuxt Routing

nuxt-link
- Nuxt has a built in component for local links. This is built on the vue-router, but the major difference is that the tag ` is used
- You can use Pascal case or kebab-case to declare the nuxt-link. You can also bind :to
Vue Router Documentation

Nuxt Nitro Server

Nuxt will look in the server/api directory for api endpoints
We've seen some examples from earlier today, while we won't go into detail. This offers a bit of insight into how SSR pages are rendered and how to set up a backend routing system

Lab Time

Work on Assignments

Prep

Dynamic Routing