准备一个创建内容用的页面，新建一个页面组件，放在 pages 里面，名字是 create.vue，文件里添加一组 template，里面先用一组 form ，绑定 submit 事件，用一下 prevent 修饰一下，防止提交事件的默认行为。

里面是一组 div，包装的是一个 input ，类型是 text，placeholder 设置成标题，再用 v-model 指令绑定 title 这个数据。再添加一组 div，里面包装的是 textarea，把 placeholder 设置成正文，v-model 绑定 content 数据。

再添加一组 div，里面是一组 button ，按钮元素上添加一个类，名字是 primary，绑定 click 事件，用 createPost 这个方法来处理这个事件。按钮文字是发布。

再处理一下组件的脚本，一组带 setup 的 script ，先用一下 useHead 设置一下页面的标题，提供一个对象，设置一下 title 属性，值是创建内容。

在组件的脚本里再准备一下标题数据，声明一个 title，用 ref，提供一个空白字符。再准备一下正文数据，声明一个 content，用一下 ref，提供一个空白字符。

然后定义一个创建内容用的函数，名字是 createPost，函数里面用 console.log 在控制台上输出 title.value 还有 content.value。

default.vue

打开 default 这个默认布局，在 header 里面的这组 div 里面，再添加一组 div，上面加上 v-if 判断一下 currentUser，如果当前用户有值，就显示这个元素，里面用一下 NuxtLink，地址是 /create，链接里面用一个图像元素，图像的地址是 /assets/icons/add.svg，alt 设置成添加内容。

测试

在浏览器上测试一下，点击页头这里的加号小图标，会打开这个创建内容页面。

创建内容

继续编辑一下 createPost 这个方法，先用 async 标记一下，因为这个方法里会有一些异步动作。在这个方法里解构一下执行 useApiFetch 返回的结果，在它前面加上 await。需要的是 data，也就是请求接口以后得到的响应数据。

请求的接口地址是 posts，再提供一个选项参数，把请求用的方法 method，设置成 post。请求里需要包含主体数据，添加一个 body 属性，它是一个对象，里面需要 title 属性，值是 title 这个数据的值，还需要 content 属性，值是 content 这个数据的值。

下面判断一下，如果 data.value 有值，可以清理一下组件数据，把 title 这个数据的值设置成空白字符，再把 content 这个数据的值也设置成空白字符。

测试

下面在浏览器上测试一下，在标题字段里输入要创建的内容的标题，然后是内容的正文。点击 发布，会执行 createPost 请求创建内容。如果成功创建了内容，会清空这个创建内容表单上的数据。

在 tableplus 观察一下，打开后端应用的数据仓库，再打开 post 这个数据表，在这里会出现刚刚新创建的这个内容。