How I stumbled into Sanity

September 10, 2022

Headless CMS

Nuxt.js

Vue.js

The Inspiration

Since I created my portfolio site, from day one I have had this thing about starting my Blog, you know just journalizing my journey, whatever I am learning, and it will be really good for me as a Developer. I never got time to implement it into my site, till I heard from my mentor Tanay Pratap, He talked about starting your blog that will solidify your learning and will be a great proof of work for future Job prospects. That day I decided to just do it

The Journey

My website is made on my favorite Stack i.e. Nuxt/vue.js, I had worked on various Nuxt projects including e-commerce and major Products in my earlier jobs, but never actually made a blog from scratch. So, I started looking into the website of the people whose blogs and YouTube channels I follow. I came across two of my favorites James Q Quick and Web Dev Simplified, I wanted to see how they have implemented their blog page. I investigated their API request and figured out one of them writing the blog statically and the other is using some kind of API service that is getting the blog content. I am kind of lazy in writing, so I knew I didn’t want to write it statically because I will have to design it every time ill write a new blog.

I have heard the name Headless CMS many times but never looked into it. James Q Quick was using Sanity.io to fetch his blogs, I thought why not give it a try?

The Implementation

I signed up on sanity.io and started reading about it. At this point still I wasn’t sure how things will work; Will I be getting an editor just like we use to get in WordPress? Is it free or paid? Many things were unclear. At first, it was daunting, but I came across 3 major parts of Sanity.io you need to understand

1. The Schema

Schema is the model of your blog, like what fields you will be dynamically adding in every blog. In My case it was

          name: 'blogsList',
type: 'document',
title: 'Blog Template',
fields: [
  {
    name: 'date',
    type: 'date',
    title: 'Date',
  },
  {
    name: 'title',
    type: 'string',
    title: 'Blog Title',
  },
  {
    name: 'slug',
    type: 'slug',
    title: 'Slug',
    options: {
      source: 'title',
    },
  },
  {
    name: 'subtext',
    type: 'string',
    title: 'Sub Title',
  },
  {
    name: 'image',
    type: 'image',
    title: 'Title Image',
  },
],

This is the first thing that needs to be defined in the implementation. Once the Schema is Defined you will see the defined fields once you run Sanity CLI (What!! what is it)

2. Sanity CLI

Sanity.io provides its own CLI, I know CLI is a fancy term but just to simplify this you need to clone the Sanity.io Repo locally and log in with your credential. Once it is logged in you will be able to see a UI in your localhost: PORT. This is the place where you be putting your content and there (I could see the Text editor Finally).

So, at this point, I started filling my blog fields and created 4-5 blogs and it was getting saved fine, but wait how to Integrate it into my portfolio site?

3. The API

The API integration was straightforward, till I learned there is something called GROQ. GROQ (Graph-Relational Object Queries) yes you heard it right, even though I never heard of this term before. Turns out you don’t need to learn it much, just to get the work done. It is a query language describing sanity and the exact data you need for our application. I needed two queries in my project

1. To get a list of the blogs

          const query = groq`*[_type == "blogsList"]`

2. To get a particular blog selected by the user.

          const query = groq`*[_type == "blogsList" && slug.current == "${this.$route.params.slug}"][0]`

and that was it.

Final Thoughts

This was technically not a how-to integrate Sanity into Nuxt.js project article, there is enough content on google and Stackoverflow. I wanted to share the experience of How I Integrated it, If you need any help or support with your project to integrate, I would love to help.

Thank you for Reading.