Nuxt Dynamic Routes & State Management

Logic Warmup: The Fox, Goose, and Corn Problem

Conditions

• The fox cannot be alone with the goose
• The goose cannot be alone with the corn

Solve with your team

• Outline an algorithmic approach (pseudocode) to solving the fox, goose, and corn problem

Dynamic Routes in Nuxt

Demo Repository

• this repo shows how to use the different types of syntax that you may need
  • it shows client side external fetch and server side external fetch
  • it also shows how to pass data from your own endpoints
  • and it shows how to use the nuxt content module
• Take advantage of these patterns in relation to examples on the official documentation
• Dynamic routes are created by using [] around a keyword (either id or slug)

File structure (Client Side)

• your folder structure for a blog would look something like this (for the pages)

pages/
    users/
        index.vue | the collection page
        [id].vue  | the individual user pages

File structure (server side)

• this should match how you’re working in the pages for the easiest workflow
• the [id].js is creating a server api route for each user

server/
    api/
        users/
          index.js
          [id].js

Client side data fetching

• in the vue files, use useFetch() to query from either your or an exernal api

const { id } = useRoute().params;
const { data } = await useFetch(`/api/users/${id}`);

Server side data fetching

 const id = event.context.params.id;
 const data = await fetchData(`https://dummyjson.com/users/${id}`);

Stores

All frontend frameworks have a way of handling state, these are usually referred to as stores

Component State vs Global State vs localStorage

• localStorage can be used to save information in a client’s browser. Like session storage, this can be useful for seamless UX, however it can open up security issues… and conflates your app’s storage with the client’s storage
• Stores are great for data that is manipulated by many pages and/or components
• Pinia Stores
• Nuxt built in state management

Types of Stores

• writable: data can be modified by “subscribers” (components)
  • use for data that components should change
• readable: data can only be read by “subscribers”
  • use for data that should only be read

Example 1: Global Readable Data

• Set up a store with reusable data
• Render the data on multiple routes and components

Example 2: Multi Component Counter

• Goal: Break a counter up into multiple components
• render the value on a second page to demonstrate how it can be updated

Activity 1: Build a nav toggle with useState

• create a simple mobile navigation with a toggle
• instead of declaring the togglable variable with a ref(), use useState()

Activity 2: Create global store variables

• create a /store/ directory and add a counter or other file
• set up some stateful variables as per the abovelinked docs
• add the variables to 2 different pages or components
• (extra) create the ability to change the data in one place,
  • but make sure it just reflects the updated data automatically in the other