How to Add Dynamic Pages/Extensions in Nuxt 4 at Runtime? Need Ideas for My Bun-based Open project
Hey everyone, I'm working on a backend, and the API and data management is being done with Nuxt (compatibility mode for version 4). I could use some help with architecting a part of the system where users can add new pages or even a new application, inheriting from the existing app/core in Nuxt 4.
Initially, I thought about using layers, but it turns out that inserting layouts via
nuxt.config.ts doesn't allow for this to be done at runtime. Has anyone faced something similar or have ideas on how to solve this?
Here's a quick overview of the project, which is built with Bun using bun workspaces:
The idea is that through the studio interface, users can create new tables in the database, and the API is automatically generated with Hono. It's similar to Directus, but due to licensing issues, I can't use Directus in my open-source project, so I'm building my own solution.
My current challenge is to create a way to support dynamic extensions inside studio at runtime. Do you think a plugin-based approach with Nitro could work? Or is there another strategy you'd suggest to handle this?
I appreciate any ideas or experiences you can share! π
Repo link: https://github.com/back3nd-team4 Replies
Hi @Hermes Alves. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Thank you for your question about dynamic page/extension creation in Nuxt 4 at runtime. I'll do my best to provide some insights based on the available information about Nuxt.
First, it's important to note that Nuxt 4 is not officially released yet, and the information available is primarily about Nuxt 3. However, I can provide some suggestions based on Nuxt 3 capabilities that might be applicable or adaptable to your Nuxt 4 (compatibility mode) project.
1. Runtime Route Generation:
Nuxt provides a way to generate routes at runtime using the
prerenderRoutes function. While this is primarily used for prerendering, it might be adaptable for your use case. You can use this function within a Nuxt context to add more routes dynamically Docs > Getting-started > Prerendering > Runtime prerender configuration (https://nuxt.com/docs/getting-started/prerendering#runtime-prerender-configuration).
2. Server Plugins:
Nuxt allows you to create server plugins that can extend Nitro's runtime behavior. You could potentially use this to dynamically register new routes or pages at runtime Docs > Guide > Directory-structure > server > Server Plugins (https://nuxt.com/docs/guide/directory-structure/server#server-plugins).
3. Custom Routing:
While not a runtime solution, Nuxt does offer ways to customize routing through the router.options.ts file or the pages:extend hook Docs > Guide > Recipes > Custom Routing > Router Config (https://nuxt.com/docs/guide/recipes/custom-routing#router-config). You might be able to adapt this approach for runtime use.
4. Nuxt Modules:
Creating a custom Nuxt module could potentially provide the flexibility you need. Modules can extend Nuxt's core functionality and could possibly be used to implement a plugin system for dynamic extensions Docs > Guide > Concepts > Modules (https://nuxt.com/docs/guide/concepts/modules).
5. Runtime Config:
Nuxt provides utilities to access and modify runtime configuration. You might be able to use this to dynamically update your application's configuration, which could include new routes or pages Docs > Api > Kit > Runtime Config (https://nuxt.com/docs/api/kit/runtime-config).
Given the complexity of your requirements, a combination of these approaches might be necessary. A plugin-based approach using Nitro could indeed be a viable solution, especially when combined with server plugins and runtime configuration updates.
However, it's important to note that truly dynamic page creation at runtime is not a standard feature of Nuxt, and implementing this functionality may require significant custom development and potentially some workarounds.
For your specific use case of creating a Directus-like system with dynamic table creation and API generation, you might need to consider a more custom solution that goes beyond Nuxt's standard capabilities. This could involve creating a separate system for managing dynamic content and integrating it with your Nuxt application.
Remember, these suggestions are based on Nuxt 3 documentation, and the exact implementation in Nuxt 4 compatibility mode may differ. You might need to experiment with these approaches to find the best fit for your project.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@727670710033580124> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I appreciate the response, but Iβm specifically looking for insights from people who have faced similar challenges or have experience with this kind of implementation. Personal experiences would be really helpful in guiding my approach.
I think it'll be easier to deal with it like you'd do with any kind of headless CMS. You'd treat "dynamic extensions" simply as "new data from the API". All your routing is then mapped through the API (so only a [...slug].vue, passing it to the API and getting the data)