Developing a Full Stack Nuxt App with Bolt.new – An AI Experiment

Introduction to Bolt.new

bolt.new is an amazing new AI tool for generating and running code. It was created by the StackBlitz team and is useful for generating UI’s and even full stack application logic and API endpoints using modern tooling like Vue, React, Astro, or Nuxt.

In this article, let’s give it a test drive to see how well it performs generating a blog with Nuxt content and utilizing the useStorage function from Nitro as a persistent storage layer.

Along the way we’ll see how well it does with generating UI elements, API endpoints, and more. We’ll also take a look at a few tips for getting the most out of bolt.new.

Bootstrapping the Project

Let’s start the project by prompting bolt to create a blog for us with the following prompt:

Let's create a blog about video games using Nuxt and Nuxt Content. 
It should use TailwindCSS for styling and have a cool, modern gamer vibe.

This produces a stylish and functional starting point that even has some relevant dummy posts! It has a homepage, a blog listing page, and a post page that uses a dynamic slug parameter to fetch the proper post all setup properly to manage content with Nuxt Content.

Iterating on A Bolt.new Nuxt Project

The images are currently all broken. Let’s add in some placeholder images from lorem picsum.

use placeholder images from lorem picsum for all the images

Making Relative Time Displays with Bolt and the VueUse Nuxt Module

Currently each of the blog posts has a published at date that is absolute like 4/2/2024. What if we wanted to make the times relative. We can definitely do that! I just so happen to know that VueUse has a great composable for this, so let’s see if Bolt uses it.

Can we make the date display relative (like 1 day ago, etc) 
and then only show the human readable date on hover? Use the `useTimeAgo`
composable from the VueUse Nuxt module.

This does the trick! Bolt installs the VueUse Nuxt module and even creates an abstracted RelativeDate component and puts it into place in the blog post page.

There were a couple hang ups in this step though, an extra <content> tag got randomly added to the [...slug] component (presumably this is used by Bolt under the hood when generating new content) and since bolt had to run npm install, the dev server stopped. Both were easily fixed with a little manual attention though.

Persistent Data Storage in Bolt for Comments with useStorage

At this point, we’ve got a decently functional blog. Let’s use the useStorage function from nitro to support key-value storage (or KV storage) for post comments. The useStorage function provides an abstraction layer over the KV storage services of many different hosting platforms like CloudFlare, Netlify, and Vercel meaning we have flexibility to deploy almost anywhere. In development, we’ll just use memory for storing data.

Add comments support to the single blog post page. 
Create an API endpoints to get and store comments. 
In the API endpoints, use the useStorage function from Nitro 
to store comments in KV storage.

This prompt get’s a pretty nice UI bootstrapped and writes the code for a couple API endpoints.

When trying to post a comment, though I get an error that crypto is not defined.

The node version running in bolt.new is Node 18, so the crypto module isn’t available. It’s being used in the API endpoint for creating new comments to generate a random UUID. No problem, I can install nanoid with the terminal tab and generate a UUID that way instead.

This time it works! Even when I refresh the page, my comment sticks around because it’s persisted to the running node application’s memory. When deploying I’d simply need to configure the KV storage driver of my choice in nuxt.config.ts

Rich Text Comments with Tip Tap Editor

Plain text comments are fine, but supporting rich text with options like bold and italic would be even nicer. TipTap editor can take care of that no problem!

Provide rich text support for comments with tip tap.

It even escapes the HTML output by TipTap to prevent malicious JavaScript injection and uses the Tailwind typography plugin to style the output.

![escape-html.gif]https://i.imgur.com/osozRST.gif)

Authorization with Nuxt Auth Utils

Let’s try making this just a little more complicated by implementing authentication with Nuxt Auth Utils. This means that users will have to login with github to make a comment. I’m also going to hint to bolt where to find docs for Nuxt auth utils as it’s pretty new and I want to make sure bolt handles things accurately.

Let's implement authentication with Nuxt Auth Utils 
(https://github.com/atinux/nuxt-auth-utils) and require a user 
to login with github to make a comment.

This time I get mixed results….

The Good!

• The UI looks great!

  

• A Sign-In link was added the the main nav

  

• Bolt walks me through the setup needed on the Github side and even gives me placeholders for the needed env vars

  

The Bad

Some things don’t go quite as well… There are several errors I have to fix manually with the help of the Nuxt auth utils docs, including:

• Re-installing the nuxt auth utils package at the latest version
• Renaming useAuth to the proper useUserSession() composable.
• Renaming the .env vars as required by the Nuxt Auth Utils docs (NUXT_OAUTH_GITHUB_CLIENT_SECRET and NUXT_OAUTH_GITHUB_CLIENT_ID)
• Providing the server side route to handle the Github auth as in this example in the docs.

Even after making these changes, auth still didn’t quite work so I stopped trying and asked bolt to revert the auth feature:

the nuxt auth utils didn't work, let's roll that back

and too be fair it did a good job rolling things back to the previous state, I only had to delete one file manually (that is server side route I added manually above to handle github auth)

Prompts and Finished Project

Here are all my prompts I used to generate the finished project. This easy copy was made possible with a bookmarklet shared by StackBlitz engineer Tomek Sułkowski.

Let's create a blog about video games using Nuxt and Nuxt Content. It should use TailwindCSS for styling and have a cool, modern gamer vibe.

use placeholder images from lorem picsum for all the images

Can we make the date display relative (like 1 day ago, etc)
and then only show the human readable date on hover? Use the useTimeAgo
composable from the VueUse Nuxt module.

Add comments support to the single blog post page. Create an API endpoints to get and store comments. In the API endpoints, use the useStorage function from Nitro to store comments in KV storage.

Provide rich text support for comments with tip tap.

Let's implement authentication with Nuxt Auth Utils (https://github.com/atinux/nuxt-auth-utils) and require a user to login with github to make a comment.

the nuxt auth utils didn't work, let's roll that back

And here is the project at the end of the blog post.

Some Closing Remarks and Tips

In my experience, Bolt.new is the best way to generate code from scratch when working on a new web application or app. It certainly isn’t perfect but is a huge step forward. Besides this example blog, I’ve been experimenting with it for other purposes and found the following practices to be helpful:

• Let bolt do the heavy lifting on creating the front-end UI and ask it to use dummy info within API endpoints (then hookup your database yourself)
• Open in StackBlitz every once and a while for better manual editing and save the code to a github repo before opening up again in bolt to continue iterating with bolt
• Provide a markdown file with hints about how you like things done and tell bolt to reference it for generating code based on your preferences