Going Beyond v0.dev: Monterail’s AI-powered UI Generator for Vue and Nuxt

At Monterail, we’ve developed our AI-powered UI generator, tailored explicitly for Vue and Nuxt projects. Based on an open-source alternative to v0.dev, our tool (“n0”) leverages best practices, custom prompts, and the flexibility of Nuxt 4+. In this article, we’ll show you why we built it, how it works, and how you can create something similar.

Why We Started With v0.dev

We have been using v0.dev internally for some time now, and we have been pretty happy with the results. It allows us to generate Proof of Concept/Prototypes quickly, which we can then verify for both our internal initiatives and potential customers. The generated UI and functionality are excellent, serving as a great starting point for building your next project.

The v0.dev was created by the company Vercel, which also owns projects such as Next.js - a framework for building server-side rendered and statically generated websites with React. 

Thanks to that, v0.dev produces high-quality React and Next.js code, but struggles a bit with generating projects that use different frameworks, such as Vue and Angular.

The Challenge with Vue and Nuxt Support

At Monterail, we are closely aligned with the Vue and Nuxt communities, having successfully delivered over 40 Vue projects. We also contribute to the ecosystem through initiatives such as the State of Vue.  We have extensive experience with these frameworks, alongside engineers who can build your next project. We tried to use v0.dev for our project generation, but we weren’t happy with the results, so we sought alternatives that we could use for rapid prototyping. As official Vue and Nuxt Partners, we wanted a solution that matched our preferred frameworks and coding standards. 

Limitations we faced with v0.dev:

• It struggles with generating Vue/Nuxt code.

• It uses assumptions and conventions tailored for the React ecosystem.

• It lacks control over framework-specific best practices and structure.

Exploring Alternatives to v0.dev

The first tool that caught our attention was bolt.new - a tool created by Stackblitz that aims to help JS developers build their new projects and test them with Stackblitz. The bolt.new is framework agnostic, which means that it can generate any kind of project that uses modern tooling such as React, Vue, Angular, Node.js, etc. The generated projects were good, but after more in-depth research, we realised that pricing and this generic aspect of the tool may not be the best for us - we wanted something Vue/Nuxt focused.

Building Our Own AI-Powered UI Generator

At a certain point, we decided to develop our own solution, focusing on our specific needs. Obviously, we didn’t want to create our v0.dev from scratch (including chat, attachments, code generation, etc), but instead we tried to look for some open source projects that would help us create a solution that will fit our needs perfectly.

Then we found out about an open-source project bolt.diy - an open source fork of bolt.new that handles all the project generation, GitHub integration, chat, attachments, AI completion, and more - It was just what we needed! 

Bolt.diy enables you to utilize your LLM, including Anthropic Claude, Gemini, OpenAI, and many more providers. You can also customize both the application's UI and functionality to suit your needs.

So, we created n0 (name is a work in progress), which is an alternative to v0.dev that aims to develop projects specifically for Vue/Nuxt with a solid system prompt that follows best practices for SEO, Performance, Accessibility, and more!

The project was deployed to Cloudflare as it is currently the only supported Hosting platform - if you would like to deploy your version of bolt.diy check out this video tutorial that shows how to do that step by step.

Hosting and Access

We host n0 on Cloudflare, which is the only currently supported platform for bolt.diy. For now, access is restricted via Cloudflare Zero Trust as we continue internal testing.

Want to host your own version? Check out this video tutorial to deploy bolt.diy on Cloudflare.

As we are still testing the solution, we have decided to hide it behind Cloudflare Zero Trust until we are certain that the project meets all our needs. 

Introducing the Monterail Nuxt Starter

At Monterail, we were so impressed by the Nuxt framework's maturity, developer experience, and flexibility that we decided to use it as our default Vue/Nuxt framework. Nuxt provides you with tools to build your next Vue project - whether it's a simple Single Page Application (SPA) or a complex Server-Side Rendered (SSR) application.

Our Monterail Nuxt Starter is publicly available for you to try it out - it comes with some predefined packages such as Nuxt Image, Nuxt UI, Nuxt Fonts, and VueUse that we believe are must-haves for all kinds of Vue/Nuxt projects.

Included out-of-the-box:

• @nuxt/image for optimized media

• @nuxt/ui (v2) for accessible UI components

• nuxt-fonts and vueuse for performance and utility

• Preconfigured project structure and best practices

Why Nuxt UI v2, not v3? You may have noticed that in this starter template project, we are using Nuxt UI version 2, which is the previous minor version. 

```json 

  "dependencies": {

    "@nuxt/ui": "^2.21.1",

  },

```

This is because Nuxt UI 3 uses TailwindCSS version 4, which does not work well with WASM (Stackblitz project generation). It does not build or run the project in a web container, whereas it works perfectly fine in local and production environments. We decided to temporarily stick with the previous version, which works great with Stackblitz, and later migrate to Nuxt UI 3.

We have instructed n0 to use this template always to have a web container application and a deployed instance working as expected.

Fine-tuning the prompt: Tailoring LLM Output for Nuxt

The default system prompt for bolt.diy is generic, serving all kinds of modern web development projects, so we instantly knew that we would have to modify it to best match our Vue/Nuxt needs. As we have experience in these frameworks, we knew what rules should be created to instruct the LLM to build just the projects we needed!

As of today, we have created the following rules for the system prompt, which we are still modifying to improve the prototypes with each iteration.

<nuxt_best_practices>

  1. Use pnpm for all dependency installation and management.

  2. Use NuxtImg for images: modern formats, lazy loading, width/height set.

  3. Use NuxtLink for internal navigation.

  4. Do not write imports for Vue utils (ref, reactive, computed, watch) in script setup blocks—they are auto-imported.

  5. Use Nuxt UI components (UButton, UInput, USelect, etc.) for consistent, accessible design.

  6. Separate the app by pages based on context.

  7. Keep files under 100 lines; split into smaller files if needed.

  8. Extract reusable logic into composables (e.g., useCounter), never use the word "Store".

  9. Use Nuxt's useFetch for data fetching (SSR/client hydration), handle loading/error/data states, and mock data if needed.

  10. Use useHead for page title/meta tags.

  11. Use Nuxt layout components for page structure.

  12. Place all new components, pages, and composables in the app folder (Nuxt 4+ syntax).

  13. Write complete, copy-pasteable Vue component code.

  14. All code must be accessible and follow best practices.

  15. Remove unused imports; do not import auto-imported components/composables/utils.

  16. Create reusable components for logic like modals/forms; do not place such logic in pages.

  17. Each component, page, or composable must be in its own file.

  18. Wrap Nuxt UI components in custom components for reusability and consistent behavior.

  19. Keep as much logic as possible in composables, not components; components should focus on UI.

  20. Avoid logic in pages—move to composables/components. Only SEO logic belongs in pages.

  21. Use components in pages/layouts for maintainability and clarity.

  22. Always use Nuxt 4+ compatible syntax for all new code.

</nuxt_best_practices>

You can also apply these rules to your projects. These rules guide n0 to create projects that match our needs in terms of software quality, proven patterns, and conventions, allowing Vue/Nuxt developers to quickly jump into the project.

Prototype Swiftly with AI-Powered UI Tools

AI-powered UI generation tools are excellent - they enable us to quickly create new projects in the form of prototypes, allowing us to test our solutions in minutes rather than hours or days. With the introduction of bolt.diy: anyone can create their v0.dev - just clone the project, add your LLM and system prompt rules, and you are ready to go!

Key Takeaways

1. v0.dev is great—for React/Next.

2. Vue/Nuxt developers need something more tailored.

3. bolt.diy + custom prompts = DIY v0.dev clone for Vue/Nuxt.

4. Our internal tool, n0, is now live and powering real prototyping efforts.

5. The Monterail Nuxt Starter and custom LLM prompt rules are available to the community.