Build a personal blog with Nuxt 3 and Nuxt Content 2 - Part 1

Introduction to Nuxt and up and running.

26 November, 2022

Contributors

Chetan Kharel

@chetank

Introduction to Nuxt

Nuxt is an open source framework built on the top of Vue. It's like Next.js for the Vue ecosystem. It provides all the necessary features like SSR, SSG, image optimization etc. to build modern website or web application. It supports both webpack 5 and Vite. Version 3 has been released recently. With the release of version 3, There is a lot for developer experience which includes: a. Auto Imports b. Data-fetching utilities b. Zero-config TypeScript support

Nuxt 3 is now production ready and with the power of Nitro (nuxt server engine), it has unlocked the full-stack capabilities.

Few months back, I built my blog using the same stack. I really enjoyed building it. I was waiting for the stable release of Nuxt 3 to write the post, now here I am sharing what I learned building the blog.

Before getting started, I assume that you have some experience in building Vue applications. This series of posts heavily focuses on nuxt and nuxt content.

Installing and Running our first Nuxt app

First make sure you have latest version of Node.js. You can download and install easily. But I recommend to use nvm (node version manager). It allows to to switch between different versions of Node.js. You must have node version at least of 16.11 to continue.

If you are using vscode then, you need some of the extensions:

Volar (for Vue language support)

Tailwind CSS IntelliSense (it is optional but we are going to use Tailwind to style our blog so I recommend you to install it)

Now, open up your favorite terminal and use the following command to create a new project.

Now, a folder will be created using the same name called blogging-app. navigate to the folder and install the dependencies.

You can start the development server by using following command inside the project folder. You can quit you dev server using the ctrl+c keys.

It looks something like this when you start the dev server.

welcome page of nuxt app

Exploring the initial project structure

Open up the project in your favorite code editor and let's explore the files within it.

initial folder structure of nuxt app

As you can see Nuxt comes with bare minimum folder structure. We will be adding folders and files as we start building the blog.

•

.nuxt (it is the folder generated by nuxt which contains all the build generated files)

•

node_modules (this folder doesn't need any explanation though it contains the dependencies installed from the npm repository)

•

app.vue (it is the entry point for the nuxt app. It's like master page for the nuxt app)

•

nuxt.config.ts (it is the configuration file for the nuxt app. We will add some configuration later)

•

ts.config.json (it is the typescript configuration file)

Our first Nuxt page

Create a folder called pages in the root directory of the project. We will create a file contact.vue. You can add any number of pages insides the pages directory. It looks something like this.

starting of contact page

When you run the app after adding the contact page. You will get something weird like this:

not found page of nuxt

When you visit the /contact page you will be redirect to the initial welcome page. This is due to the by default nuxt only renders the content inside the app.vue file. Let's tell the nuxt that we are building pages. Open you app.vue file and add the single line which tells nuxt to render the pages.

Even if you add the above code, you will still get not found page. But when you visit the /contact page, you will see the contact page rendered. But problem with not found is we do not have any home page in our site. So, we need to add a special file called index.vue inside the pages folder. The name should be exactly index.vue. We will end up with following folder structure.

basic pages folder structure

Closing

This is the first post of the building a personal blog with Nuxt 3 and Nuxt Content 2. I hope I explained well. I will add the link of part 2 as soon as I complete it.

Keep Learning :)

vue

nuxt

develevate