Building with Sanity and Nuxt with Ekene Eze
Connect Sanity and Nuxt
In the previous lesson, we set up this Nuxt application to interface with our sanity project.
What we want to do in this lesson is connect our Nuxt application to our sanity backend, and display data from sanity here on the front end.
To do that, we need to install the nuxt/sanity module that will facilitate the integration between our Nuxt and Sanity applications.
To install it. Let's go back to vs code and run the following commands.
Pull up the terminal and create a new one. First, let's go into the sanity mission front end directory.
And then the modules we want to install. Is.
@nuxtjs/sanity and sanity client.
Great. Now that the nuxt sanity module is installed. The next thing we want to do is configure the module.
And the easiest way to do that is to come back to our sanity mission project. Copy the sanity dot Jason file, which we have here. And copy it over to the frontend Nuxt project.
And paste it here.
So, this is basically telling our Nuxt application that we're connecting to a sanity backend. And the project ID is this and the data sets we are querying from is this.
The last thing we want to do. Let's close to this. Is add the Nuxt sanity module as a build module in our front end application.
And that is done inside our projects config file. In H And save that.
And with that done, We're basically done with connecting our sanity mission backend application with our Nuxt front end application.
Now to ensure that the integration is successful. Let's go ahead and write some queries. In our front-end application to fetch products from our sanity application.
Remember that sanity uses groq, which is a query language that you can use to query sanity datasets.
To do that, let's revisit our studio so that I can show you what a groq query looks like. Back in sanity studio, this is a groq query that you can run to fetch all the products you have in these datasets.
So. Basically, you can either run this command. Here. To fetch the product or we can copy it and run the command directly from our Nuxt application, which is what we're going to do
So let's clean up, here.
In the meantime, we can just say products
Great. Let's go back to our projects and there we go, we have products.
The next thing we want to do is import groq. And that should come from our module.
All right. Let's use Nuxtjs's asyncData to fetch the products.
We pass in the sanity helper and here let's define And this is exactly the same query that we have in our studio. So let's copy it from here.
And paste it in here. Great.
Products. dot fetch and we want to fetch the query we defined.
We have two a And lastly, we want to return the products.
Great. So let's clean this up. And add a v-for.
And let's give it a key.
Which will be product ID.
In here, we can display the product's title, for all the products.
So if we saved this.
We should now get all our products coming from sanity, showing up in the template. So let's look at your browser and find out.
And there you go. We are successfully getting data from our sanity application into our Nuxt project. Let's go ahead and clean this up a little bit more. And take out all the style.
Save that. And there you go. This is much better now.
So this is how to connect your sanity application to your Nuxt front-end application. In the next lesson. We'll look at how we can clean up the UI a little bit more And also implement dynamic page routing for all of our product pages.
See you there.