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

In full-stack development, speed and efficiency matter. That’s where Bolt.new comes in—a game-changing AI tool that helps you build Nuxt apps, generate APIs, and design UIs in no time. By leveraging AI, it simplifies the coding process, so you can focus on creating and deploying powerful applications faster than ever. Ready to see how it works? Let’s dive into building a full-stack Nuxt app with Bolt.new!

Introduction to Bolt.new

bolt.new, developed by the StackBlitz team, is an amazing and powerful AI tool designed to streamline web development by automating code generation. This tool makes it easier to build both front-end and back-end logic without the need for extensive manual coding.

It supports popular frameworks like Nuxt, Vue, React, and Astro, allowing you to quickly create dynamic UIs, generate API endpoints, and handle complex full-stack development tasks. By leveraging AI, Bolt.new accelerates your workflow and eliminates the repetitive coding tasks that slow down your progress.

Bolt.new also makes integrating persistent storage easier with tools like Nitro’s useStorage function, enabling smooth data management in your applications. This makes it an ideal tool for developers who want to quickly spin up projects without sacrificing flexibility or control.

In this article, we’ll explore how to use Bolt.new to create a Nuxt-based blog, showcasing its ability to handle both front-end UI generation and back-end API management. Let’s dive in and see how well it performs in real-world development scenarios.

Bootstrapping the Project

Let’s start the Nuxt 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 abstracts the KV storage services provided by various hosting platforms, including Cloudflare's KV, Netlify’s Blob Storage, and Vercel's KV storage. This abstraction offers flexibility, allowing us to deploy our applications across multiple platforms. For development, we'll use in-memory storage to simulate data persistence without external dependencies.

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.

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