Creating New Posts
Learn how to create new blog posts in Nuxt 3 by building a front-end form that interacts with server APIs. Understand using reactive objects, handling HTTP POST requests with useFetch, updating data stores, and dynamically updating the UI with new content.
We'll cover the following...
We can use the setItem method to set or update data in our store. We can also use this in our project to create a new blog post. This will involve creating a new form on the front end to create a new post.
Updating our projects page structure
Before we add this, our front-end pages can be restructured as follows:
We will have a home page, a blog page, and a page to display a single post when clicked. These pages have been added to the following project:
<template> <div> <h3>Home page</h3> <p>Welcome to my blog</p> </div> </template>
Run the code, and you will see a simple home page and blog page to display the posts.
pages/blog/index.vueLines 1–16: This code has been moved from the
app.vueto display the posts. ...