Building with Sanity and Nuxt with Ekene Eze

Setup Nuxt

Resource

Getting started with Nuxt

Hello. And welcome back. It is time to start looking at how sanity works with front end tools and technologies.

Sanity in itself is framework agnostic. This means that sanity will work the same way with any frontend framework of your choosing.

Be it Next.js, React, Vue, Gridsome, Angular and the rest.

However, their implementations can be slightly different depending on the framework you use, since they all handle data fetching and rendering in different ways.

Regardless, since we are mostly dealing with JavaScript in the frontend, it will all be fairly intuitive.

So let's go ahead and set up a Nuxt project. Right here, we are already in the Nuxt documentation. So we'll use the create-nuxt-app CLI tool to set up a new Nuxt project.

To do that. Let's bring up the terminal. And run the command. First I'll go back into the root folder.

And here I will run the command with Yarn.

Let's call it sanity mission frontend.

Now we just have to follow the UI prompts to complete setting up our Nuxt project. Project name is correct. JavaScript? Yes. Yarn, no UI framework,

If you do want a UI framework, like Tailwind or Vuetify or anyone of your choice here is where you select it. But I'll go with none.

I use. Axios. I like prettier. No testing framework. Universal. And go with static.

JS config dot Jason. Yes. My Github user name is correct. Git.

And now it will go ahead and install all the dependencies that will be needed in our application. And when it is done. We should be able to run the dev server and see our Nuxt application on the browser.

Now, our Nuxt application is completely set up. let's go into the project directory, which is sanity mission frontend.

Let's start the dev server with yarn dev.

Our app should be running on localhost 3000. If we check that on the browser.

We should not see our sanity mission frontend application. On the browser as expected.

Seeing that this mission is less about Nuxt and more about sanity. I will not go into more detail about Nuxt JS and how it works. We have a Nuxt Mission already created for that. And you can explore it on this platform if you want. I will add a link to it in the description.

In the next lesson, we'll go ahead and connect our sanity application to this next application that we just created.

See you there.

Explorers

your progress

69