Vue in custom apps

[Manas]

Currently, custom apps are created using React. Is there a roadmap to allow Vue also? Or can we create custom apps in Vue right now?

[bear]

I am testing it now for you… let’s see!

[bear]

I tested it and this is what Claude as a conclusion: Fibery custom apps can be written in Vue, even though Fibery’s platform is built around React and builds every app with its own fixed, React-oriented setup. Fibery’s build can’t read Vue’s single-file .vue components, so the simplest option is to write components as plain TypeScript with HTML template strings, which Vue compiles in the browser. For full .vue support, you compile them yourself before uploading, using Vue’s official compiler, so Fibery only ever receives ordinary TypeScript and CSS it can build. That compile step runs on your own computer and needs Node.js installed, but once it’s part of the upload script, writing and deploying Vue apps works the same as for React.

A few limits remain:

• Fibery’s build setup stays fixed. You can’t add other Vite plugins, such as auto-imports, Vue JSX or Vue-specific i18n tooling, unless your own pre-compile step does that work too.
• Fibery’s ready-made UI pieces are React. Its rich-text editor, for example, is a React component, so using it in a Vue app means mounting a bit of React just for that part.
• Fibery’s built-in AI app builder expects React. It can’t help with a Vue app and may try to rewrite it.
• The app runs embedded inside Fibery. That’s true for any framework, and it means browser tools like Vue Devtools may not connect as easily as on a standalone site.

So you get all of Vue itself, but not Fibery’s React-specific extras or a customizable build.

My conversation with Claude to make this app and ask about Vue.js support and limitations.

Me: can you create a simple app in the volcano workspace about volcanoes with vue.js?

---

Claude: Fibery’s app template is React + Vite, so I’m extending the deploy setup to swap in Vue. Next I’ll check the Volcano schema and the tool that creates apps.

Created the “Volcano Explorer” app in the Volcanoes space and taught deploy.py to swap React for Vue. Now writing the Vue sources.

The first build failed: Fibery ignored my Vue build config. I’m checking Fibery’s dev guide to see which files it controls.

Fibery’s guide says vite.config.ts is platform-owned, so the Vue SFC plugin can’t be added. I’m switching to Vue’s in-browser template compiler, which needs no build plugin.

The build succeeded. Leftover files from the failed first attempt are still on the server, so I’m redeploying once to remove them.

Deployed. Now checking it in the browser.

The browser pane isn’t signed in to Fibery, and I can’t sign in for you. Instead I’ll run the app’s exact query through the Fibery connector to confirm the data side works.

Data shape matches what the app expects. Saving the Vue setup notes to memory.

I’ve built Volcano Explorer, a Vue 3 app in the Volcanoes space: Fibery

Fibery’s build succeeded, but I haven’t seen the app running. The in-app browser isn’t signed in to Fibery, so I ran the app’s data query through the Fibery connector instead, and it returned the fields the app expects. Please reload the page and check it.

What it does:

• Header: total volcanoes, how many are erupting now, number of countries, and the highest volcano.
• Finding volcanoes: search by name, country or type. Filter buttons for All, Erupting now, Holocene and Pleistocene, plus a region dropdown and sorting (name, highest, most recent eruption, most eruptions, largest VEI).
• Cards: photo (or a lava-coloured placeholder), an “Erupting” badge, elevation, last eruption, eruption count, max VEI and population within 30 km. Clicking a card opens that volcano in Fibery.
• Theme: it follows your workspace’s light/dark theme.

One thing that’s different from a typical Vue project: Fibery builds apps with React and won’t accept a changed build config, so the standard Vue build plugin can’t be added. That means no .vue files. Instead, the components are .ts files with template strings that Vue compiles in the browser. It’s still normal Vue (defineComponent, ref, computed, v-for, v-model), and its source is in apps/volcano-explorer/src.

Changes to deploy.py:

• It has a new explorer app entry.
• It can now upload files outside src/, such as index.html.
• It can remove Fibery’s starting React files.

To redeploy after you edit the app (get a fresh dev token first; they last about an hour):

python3 deploy.py --only explorer --token explorer=TOKEN

---

Me: does this app use no react at all?

does it use vue entirely and does everything from vue work?

---

Claude: No React in the app itself. None of my code imports React, and the build only bundles packages that are actually imported, so no React code should be shipped. React does remain in two places I can’t remove:

• package.json: Fibery’s template lists React and its UI packages. They get installed during the build but go unused.
• vite.config.ts: It still loads the React build plugin. Fibery controls this file and ignores uploaded changes. The plugin only acts on .tsx/.jsx files, and the app has none.

Vue runs everything, but not every Vue feature is available. Because the Vue build plugin can’t be added:

• No .vue files. That rules out <script setup>, <style scoped>, CSS modules, and the defineProps/defineEmits shortcuts. Components use defineComponent({ setup, template }) instead, and the styles are in one shared CSS file.
• Templates compile in the browser. That adds roughly 15–20 KB (gzipped) to the download and a little startup time. It also relies on new Function, which a strict browser security policy (CSP) would block. I couldn’t watch the app render because I’m not signed in, so I haven’t confirmed Fibery allows it. If you see a blank page, this is the likely cause.
• Templates aren’t type-checked. TypeScript checks the .ts code but not the template strings, so a typo in the HTML only shows up in the browser.
• Vue JSX/TSX won’t work. The TypeScript config Fibery controls is set up for React JSX.

What works normally: reactivity (ref, computed, watch), the Composition and Options APIs, all template directives (v-for, v-model, events, slots), components, and lifecycle hooks. Vue libraries like Pinia, Vue Router or VueUse can be added through package.json.

Fibery-specific limits:

• Fibery’s rich-text editor (@fibery/custom-app-text-editor) is a React component. Showing or editing a volcano’s Description in the Vue app would require mounting React just for that part.
• Fibery’s built-in AI app builder expects React, so let it edit this app only with care.

So far none of these limits matter for this app. If you want full SFC-style Vue, the only path is building it somewhere Vue’s build plugin can run and uploading the finished files. Fibery’s upload process doesn’t support that today.

---

Me: So, can we create custom apps in Vue right now?

---

Claude: Yes, mostly. Fibery doesn’t officially support Vue (its tooling and docs assume React), but you can get Vue apps running on it today. There are three ways, from simplest to most complete:

1. Templates compiled in the browser (what Volcano Explorer uses). This works today and Fibery’s build passes. One thing is still unconfirmed: whether Fibery’s browser security settings allow the in-browser compiler. Opening Fibery settles it. If you see volcano cards, this approach is good to go.

2. Render functions instead of templates. If the page comes up blank, components can be written with Vue’s h() function instead of HTML templates. No compilation happens in the browser, so the security settings can’t block it. The downside is that it’s more verbose and harder to read than templates.

3. Real .vue files, compiled on your Mac before upload. deploy.py would compile your .vue files into plain TypeScript locally, using Vue’s official compiler, and upload the result. Fibery’s build then sees ordinary .ts files. You’d write proper Vue with <script setup> and scoped styles, and templates would compile ahead of time, so nothing needs compiling in the browser. The catch is a one-time setup: Node isn’t installed on your Mac, so I’d install it with Homebrew.

Whichever you pick, these limits remain:

• React stays in Fibery’s template and build config. It’s unused but you can’t remove it.
• Fibery’s rich-text editor is React-only.
• Fibery’s built-in AI app builder expects React, so it may try to “fix” a Vue app back into React.

If you plan to build more Vue apps, option 3 is the one I’d recommend. Open the Explorer page first; whether it renders tells us if option 1 is already enough for simple apps.

[Manas]

Thanks, this is really nice to see at least the Vue reactivity works. Next, maybe can check if Nuxt works too, including Nuxt UI components and server routes.

[bear]

Server routes won’t work, because as of right now the apps don’t have a backend that you can install and run code on.

and I asked Claude about Nuxt and Nuxt UI:

Fibery builds every app itself with plain Vite and fixed settings. Nuxt needs its own build step, and Fibery has no way to run it.

Nuxt UI can likely work, but not out of the box:

1. It needs a build plugin. Nuxt UI needs its own Vite plugin, and Fibery’s fixed build won’t load it. The workaround is to build the app on your own computer first and upload the result.
2. It doesn’t need a server. Its components run entirely in the browser, so Fibery’s lack of a backend isn’t a problem.