Fake Blog With Nuxt.js

Simple fake blog with Nuxt.js and json-server

Status: Finished

About • Features • Layout • How it works • Tech Stack • Author

About

It is a simple fake blog it save the posts in a JSON file using json-server lib and rendering using micromark lib.

Concepts to study during development

• File system routing and dynamic routing
• Data fetching and why Axios is not supported in Nuxt.js?
• SSR and SSG with Nuxt.js, how it works?
• More about slot Vue functionality
• json-server with Nuxt.js
• Nuxt Content for render markdown content and study other use cases of this lib also
• Environment variables
• More about nuxt.config.ts file and your options
• Basic of page transitions with default functionality of Nuxt.js
• SEO with Nuxt.js
• Basic use of PrimeVue
• Tailwind with Nuxt.js

Features

• See recent posts
• See all posts
• See post details with dynamic route

Layout

Homepage

All posts page

Post page

How it works

Pre-requisites

Before you begin, you will need to have the following tools installed on your machine:
Git, Node.js and the pnpm package manager.

In addition, it is good to have an editor to work with the code like VSCode.

# Clone this repository
$ git clone https://github.com/Artur-Poffo/JSON-Blog-Nuxt.js.git

# Access the project folder cmd/terminal
$ cd JSON-Blog-Nuxt.js

# install the dependencies
$ pnpm i

# Run the application in development mode
$ pnpm dev

# This run then Nuxt app and the json-server API

# The server of Nuxt.js app will start at port: 3000 - go to http://localhost:3000
# If you want to access the JSON API - go to http://localhost:3333

Tech Stack

The following tools were used in the construction of the project:

• Vue.js
• Typescript
• Nuxt.js
• Tailwind CSS
• vue-router
• heroicons/vue (Icons lib)
• Nuxt PrimeVue
• micromark (Render Markdown lib)
• json-server (Serve a JSON based API)

See the file package.json

Author

• Artur Poffo - Developer