Skip to content
Orbix Nuxt · Tailwind CSS v1.0.3

FAQ

Do I need a back end or a database? No. The template renders static demo data and the default build is a static site. Connect your own API when you build your application.

Static site or Node.js server: which one should I use? The static site (npm run build) is the default: every page is prerendered to HTML and any static host serves it. Use the Node.js server build (npm run build:server) when your application renders data per request on the server (server routes in server/api/, authentication on the server, useFetch with request cookies). Both come from the same code; see Installation.

Why does the page appear in English for a moment, then in my language? It does not appear: the pages are generated once, in English, and the preloader covers the page until the saved language has been applied in the browser (a fraction of a second). URLs stay the same for every language. See Languages for the @nuxtjs/i18n alternative with one URL per language.

Can I deploy it in a sub-folder? Yes: ORBIX_BASE=/admin/ npm run build (see Installation).

Why are there no auto-imports? Orbix turns Nuxt's auto-imports off so every file shows where its functions and components come from (and the same code reads the same in every Orbix Vue edition). To turn them on, remove imports: { autoImport: false } and components: { dirs: [] } from nuxt.config.ts; the explicit imports keep working.

Does it use the Options API or the Composition API? The Composition API with <script setup lang="ts"> in every component. You can still write Options API components of your own; Vue supports both.

Does it use Pinia? No store is needed by the template: the page data lives in definePageMeta, the theme and the language in their runtimes. Add Pinia when your application needs shared state (npx nuxi module add pinia).

Does it use jQuery or a CDN? No. Every script and style is compiled locally. There are no external requests.

Is TypeScript required? The template is written in strict TypeScript and npm test runs nuxi typecheck. You can write <script setup> blocks without lang="ts" if you prefer, but typed props catch most mistakes when you change a component.

How do I change the logo and the app name? The logo is the brand block in src/components/shell/Brand.vue: change the name there, and replace the ox-i-mark symbol in src/svg/orbix-icons.svg with your own SVG, then run npm run assets. The document title suffix is in src/composables/usePageDocument.ts and the default title in nuxt.config.ts (app.head); the favicon is public/favicon.svg.

How do I change the default language? The language comes from the user's saved choice (or ?lang=), English otherwise. To start in another language, set it before the first visit in the boot script src/boot/orbix-boot.js (or call setLanguage('es') from @foundry/ui once in src/core/app.ts when nothing is saved).

How do I remove a language? See Languages.

How do I make dark mode the default? initTheme({ product: { mode: 'dark' } }) in src/core/app.ts (see Theming).

Why do the icons I added not show? Run npm run assets (or npm run dev / npm run build): only the icons referenced in src/ are added to the sprite.

I see a hydration warning in the console after my changes. What does it mean? The HTML rendered on the server and the first render in the browser differ. Typical causes are reading window, document, localStorage, Math.random() or the current time while rendering. Move that code to onMounted (or a page script) or wrap the part in <ClientOnly>. The test suite renders every page on the server and hydrates it to catch this (tests/hydration.test.ts).

Can I use Vue state, v-model and my own composables in the pages? Yes. The pages are regular single-file components: add refs, computed values, watchers, data fetching (useFetch, useAsyncData) and event handlers as usual. The demo pages keep their interactions in small page scripts (src/scripts/) so that the markup stays identical across the Orbix editions.

Why is there one v-html in the template? The command palette reads its quick actions from a <template> element whose content (a separate document fragment) a Vue render cannot fill. src/components/shell/CommandPalette.vue sets that static markup with v-html; nothing else uses raw HTML, and the test suite checks it.

Can I use Orbix for a SaaS where my customers pay? Yes, with the Extended License. The Regular License covers one end product whose users are not charged.

Where are the source images of the illustrations? The illustrations are inline SVG inside the auth and status components; edit their colors with the design tokens.

Can I use the demo photos in my product? Yes. They are CC0 1.0 or public domain (credits in public/images/CREDITS.json and licensing.txt). To use your own, replace the files in public/images with WebP or JPEG images of the same size, or change the src in the components; avatars fall back to initials when there is no photo.