Crypto Forge - Embracing Nuxt

Source: Dev.to

Introduction

I was out of commission for several months. During that time I refocused, recentred, and worked on my writing. When I was finally cleared, I refreshed my memory on several technologies I had settled on, including Nuxt, as I outlined in a previous article.

Project Overview

Crypto Forge is an app that lists cryptocurrencies and allows you to sort them in different ways. It is essentially a migration of Brad Traversy’s Crypto Dash project, which was originally built with React.

I chose to migrate an existing, working project rather than start from scratch to get back into development more quickly while still learning new tools.

Migration from React to Vue/Nuxt

The migration required understanding what the React version was doing and translating that logic to Vue/Nuxt. One key lesson was how to handle data fetching in a Nuxt application.

Server‑Side Data Fetching

Initially I tried to fetch the data directly in the page component. After further reading and advice from the Discord community, I learned that using the server folder and API routes is the recommended approach. This keeps server‑only code separate, improves scalability, and provides a clear structure for endpoints.

Below is an example of a server API route that fetches market data from CoinGecko:

// server/api/coin.get.js
export default defineEventHandler(async (event) => {
  const query = getQuery(event)

  return await $fetch('https://api.coingecko.com/api/v3/coins/markets', {
    params: {
      vs_currency: 'usd',
      order: query.order ?? 'market_cap_desc',
      per_page: query.per_page ?? 10,
      page: query.page ?? 1,
      sparkline: true,
    },
  })
})

While this project only uses GET requests, I’m working on another project that utilizes all HTTP methods, making it more complex.

Using a Composable for Data Fetching

A composable is a reusable function that encapsulates logic. For example, instead of fetching user data on every page, you can create a composable that handles the request once and shares the state across components.

// src/composables/useUser.js
export const useUser = () => {
  // Shared, SSR‑safe state
  const user = useState('user', () => null)

  async function fetchUser() {
    const { data } = await useFetch('/api/user', {
      credentials: 'include', // important for auth cookies
    })
    user.value = data.value
  }

  return {
    user,
    fetchUser,
  }
}

I used a similar composable to fetch the coin data; the full implementation is available in the repository.

Future Work

I have already started work on my next Nuxt project, which will involve authentication and full database integration, including row‑level security policies. I may make this project public in the coming weeks.

Conclusion

This exploration was a fun way to get back into development, allowing me to learn new approaches that I find superior to some of the technologies I’ve previously used. Thank you for reading!