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

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

Daniel Kelly
Daniel Kelly
Updated: November 14th 2024

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.

bootstap.gif

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
placeholder-images.gif

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.

Screenshot 2024-11-05 at 1.42.23 PM.png

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.

Screenshot 2024-11-05 at 1.52.45 PM.png

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

Screenshot 2024-11-05 at 1.53.37 PM.png

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.

Screenshot 2024-11-05 at 1.55.16 PM.png

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

comments-in-kv-storage.gif

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.
comments-rich-text.gif

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!

    Screenshot 2024-11-05 at 2.20.44 PM.png

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

    Screenshot 2024-11-05 at 2.22.41 PM.png

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

    Screenshot 2024-11-05 at 2.11.57 PM.png

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:

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

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

Related Courses

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Comments

Latest Vue School Articles

Generating Fake Data with Faker.js

Generating Fake Data with Faker.js

Discover the power of Faker.js, the essential JavaScript library for generating realistic fake data, in our new video course created in collaboration with the developers at Vehikl (vehikl.com).
Felipe Flor
Felipe Flor
Database Seeds with the Nuxt Task Runner

Database Seeds with the Nuxt Task Runner

Learn how to integrate Drizzle ORM with Nuxt for type-safe database operations, including database migrations and seeding with Faker.js and Nitro tasks.
Daniel Kelly
Daniel Kelly

Our goal is to be the number one source of Vue.js knowledge for all skill levels. We offer the knowledge of our industry leaders through awesome video courses for a ridiculously low price.

More than 200.000 users have already joined us. You are welcome too!

Follow us on Social

© All rights reserved. Made with ❤️ by BitterBrains, Inc.