James 'Dante' Midzi

Posted on Jan 6

Crypto Forge - Embracing Nuxt

#nuxt #vue #api

I was out of commission for several months. During my time away I got time to refocus, recentre and work on my writing.

When I was finally cleared one of the things I did was refresh my memory in several technology I had settled on. One of them was Nuxt, as I outlined in this article .

I am here to present to you Crypto Forge- an app that lists cryptocurrencies and allows you to sort them in different ways.

In essence it is a migration of Brad Traversy's project, Crypto Dash that was in React.

Why Recreate Instead of Building Something New?

As I mention, I needed a refresher on a lot of the tools I had chosen. Rather than come up with a whole new ides, to dip my toes back in, I thought migrating something that is already working would be simpler than starting something completely from scratch. I do have ideas.

What I Learnt

This exploration offered several learning opportunities, and entailed understanding what React was doing and translating that to Vue/Nuxt.

API Routes For Data Fetching

Initially when I stated, I tried to fetch the data directly in the page. Upon further reading, and advice from the discord I learnt that it was recommended to use the server folder and API routes to handle fetching of data.

This helps in better managing server only parts of a Nuxt application. Using the server folder also helps in scalability and structuring of endpoints.

While in this project I only made use of GET requests, in another one I am working I made full use of all the HTTP methods - it's a bit more complex.

My usage looks like this:

//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,
        },
    });
});

NOTE:
Ideally the URL would be in an environment variable

Composables To Avoid Logic Duplication

A composable is a reusable function that performs some kind of logic. Say you needed to fetch user data for each page they visit on your app, rather that making that call every time, you would create a composable that does that.

For example:

//src/composables/useUser.js

export const useUser = () => {
  // Shared, SSR-safe state
  const user = useState<any | null>('user', () => null)


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

      user.value = data.value
  }

  return {
    user,
    fetchUser
  }
}

I made use of a composable to fetch the coin data. That piece of code is too long too share, you can view it in the repository though.

What's Next?

I have already started work on my next project using Nuxt. I am still contemplating whether to make it public or not. Broadly, I need to get a authentication and connecting to the database fully functional. So in the next coming weeks, I just might release it to the wild.

I am still fixing issues with my policies and row level security.

Wrapping Up

This was a fun exploration to get me back into the swing of things. I got to learn new ways of doing things; which I would argue are better than the other technologies I have explored.

Thank you for reading, let's connect!

Thank you for visiting this little corner of mine. Let's connect on Twitter, Discord and LinkedIn

DEV Community