Building a Lyric Blog with Nuxt.js and Strapi with Daniel Madalitso Phiri

Setting up Nuxt

Hey explorers. Let's get started with setting up our Nuxt js application. I'll open the command line. Let's change directories to the explorers folder, in the explorers folder, we'll use yarn create nuxt app let's name our application front end.

We'll keep frontend as our project name. We'll have, JavaScript as our project language. We use yarn as our package manager and for UI frameworks, we'll select none. Although this is a good place to select something like Chakra, UI, Tailwind CSS, or Vuetify. I will not install any other. So I will just go ahead.

I will use ESLint as a linting tool. And we'll have no testing framework and because we are building a static blog, we'll need to leverage nuxt static site generation functionality. So we'll choose the universal application. We'll select JAMstack static hosting so we can deploy to Netlify and a js config dot json file, which is recommended for vs code development.

My Github user name, we choose Git as our version control system. Now that we have our application set up. We can change directories into the front end folder and start our application using yarn dev because our default localhost 3000 is currently in use. We'll go to the URL, specified in the terminal to access our application.

And this is our front end application with the application title front end displayed. Let's open up vs code. To get a proper understanding of the nuxt js folder structure. Have a look at the Nuxt js mission. We'll go into our pages folder and access our index dot view file. And this is where we edit the content of our front end page.

We want this to say hello, explorers. We'll save this and check our webpage. We should see. Hello explorers. And that's done with the setup part of this mission. Now let's get into Strapi.

Explorers

your progress

28