PHPackages aimeos/pagible-admin - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Admin Panels](/categories/admin) 4. / 5. aimeos/pagible-admin ActiveLibrary[Admin Panels](/categories/admin) aimeos/pagible-admin ==================== Pagible CMS - Admin panel 0.10.4(1mo ago)073↑100%1LGPL-3.0-onlyVuePHP ^8.2CI passing Since Apr 16Pushed 1w agoCompare [ Source](https://github.com/aimeos/pagible-admin)[ Packagist](https://packagist.org/packages/aimeos/pagible-admin)[ Docs](https://pagible.com)[ RSS](/packages/aimeos-pagible-admin/feed)WikiDiscussions master Synced 3w ago READMEChangelogDependencies (6)Versions (7)Used By (1) PagibleAI CMS Admin Backend =========================== [](#pagibleai-cms-admin-backend) Admin panel for [Pagible CMS](https://pagible.com) built with Vue 3, Vuetify, and CKEditor 5. This package is part of the [Pagible CMS monorepo](https://github.com/aimeos/pagible). For full installation, use: ``` composer require aimeos/pagible ``` Tech Stack ---------- [](#tech-stack) - **Vue 3** with Composition API - **Vite** - Build tool and dev server - **Vuetify** - Material Design component library - **Pinia** - State management - **Apollo Client** - GraphQL (batch + file upload support) - **CKEditor 5** - Rich text editing - **Chart.js** - Metrics visualization - **vue3-gettext** - Internationalization (32 languages) - **Cypress** - Component and E2E testing Configuration ------------- [](#configuration) After installation, the configuration is available in `config/cms/admin.php`: ### Theme Colors [](#theme-colors) The `colors` section defines Vuetify theme colors for `light` and `dark` modes. Each theme contains 14 color tokens (background, surface, primary, secondary, error, info, success, warning, text-primary, text-secondary, map-accent, border, etc.) using 6-char hex format (`#RRGGBB`). ### Media Proxy [](#media-proxy) OptionEnv VariableDefaultDescription`proxy.maxsize``CMS_PROXY_MAXSIZE``10`Maximum downloadable file size in MB via proxy`proxy.timeout``CMS_PROXY_TIMEOUT``30`Stream timeout in seconds`proxy.middleware``['throttle:cms-proxy']`Middleware applied to the proxy route### CSP Media Source [](#csp-media-source) OptionDescription`csp.media-src`Additional CSP `media-src` directive for the admin panel (e.g., CDN domains)Commands -------- [](#commands) ### cms:install:admin [](#cmsinstalladmin) Installs the Pagible CMS admin package. ``` php artisan cms:install:admin ``` Publishes admin assets and configuration to `public/vendor/cms/admin` and `config/cms/admin.php`. Project Setup ------------- [](#project-setup) ``` npm install ``` ### Compile and Hot-Reload for Development [](#compile-and-hot-reload-for-development) ``` npm run dev ``` ### Compile and Minify for Production [](#compile-and-minify-for-production) ``` npm run build ``` ### Run Component Tests with [Cypress Component Testing](https://on.cypress.io/component) [](#run-component-tests-with-cypress-component-testing) ``` npm run test:unit:dev # or `npm run test:unit` for headless testing ``` ### Run End-to-End Tests with [Cypress](https://www.cypress.io/) [](#run-end-to-end-tests-with-cypress) ``` npm run test:e2e:dev ``` This runs the end-to-end tests against the Vite development server. It is much faster than the production build. But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments): ``` npm run build npm run test:e2e ``` ### Lint with [ESLint](https://eslint.org/) [](#lint-with-eslint) ``` npm run lint ``` ### Other Commands [](#other-commands) ``` npm run format # Prettier formatting npm run gettext:extract # Extract translatable strings npm run gettext:compile # Compile translations ``` Directory Structure ------------------- [](#directory-structure) ``` admin/ ├── src/ │ ├── main.js # App entry point and plugin setup │ ├── App.vue # Root component (provides helpers via inject) │ ├── routes.js # Vue Router config (login, pages, elements, files) │ ├── stores.js # Pinia stores (auth, app, config, clipboard, etc.) │ ├── graphql.js # Apollo Client setup (batch + upload links) │ ├── i18n.js # Internationalization config │ ├── vuetify.js # Vuetify theme and locale config │ ├── audio.js # Audio recording and transcription │ ├── utils.js # UID generation │ ├── components/ # Reusable components (30+) │ ├── views/ # Page views (Login, PageList/Detail, etc.) │ ├── fields/ # Dynamic field type components (23+) │ └── assets/ # Stylesheets ├── tests/components/ # Cypress component tests ├── cypress/e2e/ # Cypress E2E tests ├── i18n/ # Translation JSON files (32 languages) └── index.html # HTML template with data-attribute config ``` Architecture Notes ------------------ [](#architecture-notes) ### Dynamic Field System [](#dynamic-field-system) Field components in `src/fields/` (String, Select, Html, Table, Images, etc.) are auto-registered at startup via `import.meta.glob()` in `main.js`. They follow a common interface: - **Props**: `modelValue`, `config`, `assets`, `readonly`, `context` - **Emits**: `update:modelValue`, `error` Fields are rendered dynamically based on schema configuration, allowing pages and elements to define their own field layouts. ### GraphQL API [](#graphql-api) All data operations use Apollo Client through GraphQL. Two transport links handle different needs: - **Batch Link** - Groups multiple queries (up to 50 ops, 20ms interval) - **Upload Link** - Handles file uploads via `apollo-upload-client` On 401/unauthenticated errors, the client automatically redirects to the login view. ### View Stack Navigation [](#view-stack-navigation) Instead of route-based dialogs, the app uses a stack-based overlay system. `App.vue` provides `openView()` and `closeView()` helpers via Vue's provide/inject, enabling modal-like slide-in transitions for detail views. ### Permission System [](#permission-system) UI visibility is driven by a JSON permission object stored in `auth.me.permission`. Check access with `auth.can('page:view')` or `auth.can(['page:save', 'page:delete'])`. Common permissions: - `page:view`, `page:save` - Page management - `element:view`, `element:save` - Shared elements - `file:view`, `file:add` - File management - `audio:transcribe`, `text:write`, `text:translate` - AI features Route guards enforce permissions and redirect unauthenticated users to login. ### State Management [](#state-management) Nine focused Pinia stores in `src/stores.js`: - **useAuthStore** - Authentication, user info, permission checks - **useAppStore** - URL configuration from HTML data attributes - **useConfigStore** - App config (dot-notation access) - **useSchemaStore** - Element/content schemas - **useLanguageStore** - 180+ language translations - **useMessageStore** - Snackbar notification queue - **useDrawerStore** / **useSideStore** - UI panel state - **useClipboardStore** - Copy/paste storage ### Internationalization [](#internationalization) All user-facing strings must use `$gettext('message')` or `$pgettext('context', 'message')`. Translations are in `i18n/*.json` for 32 languages. Run `npm run gettext:extract` after adding new strings and `npm run gettext:compile` after updating translations. ### App Configuration [](#app-configuration) The app reads configuration from `index.html` data attributes on the `#app` element: - `data-urladmin` - Admin base URL - `data-urlgraphql` - GraphQL endpoint - `data-urlproxy` - Media proxy URL (for CORS) - `data-urlpage` / `data-urlfile` - Public page/file URLs - `data-config` - JSON config (locales, themes) - `data-schemas` - JSON field schemas (content, meta, config) ### AI Features [](#ai-features) The app integrates AI capabilities (permission-gated): - **Text generation** - `write(prompt, context, files)` - **Translation** - `translate(texts, to, from, context)` - **Audio transcription** - `transcribe(file)` via MediaRecorder API + AudioWorklet License ------- [](#license) LGPL-3.0-only ### Health Score 41 — FairBetter than 87% of packages Maintenance96 Actively maintained with recent releases Popularity12 Limited adoption so far Community10 Small or concentrated contributor base Maturity40 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~10 days Total 5 Last Release 33d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/ccdc84033584516c77fb6aa7f85dc7048f2fbcd08867fc6abf115d094bab5eef?d=identicon)[aimeos](/maintainers/aimeos) --- Top Contributors [![aimeos](https://avatars.githubusercontent.com/u/8647429?v=4)](https://github.com/aimeos "aimeos (147 commits)") --- Tags laravelcmsadminvue ### Embed Badge ![Health badge](/badges/aimeos-pagible-admin/health.svg) ``` [![Health](https://phpackages.com/badges/aimeos-pagible-admin/health.svg)](https://phpackages.com/packages/aimeos-pagible-admin) ``` ### Alternatives [serverfireteam/blog A nice blog system with laravel and laravelpanel 523.1k](/packages/serverfireteam-blog)[bpocallaghan/faq Add Frequently Asked Questions to your laravel admin project - https://github.com/bpocallaghan/laravel-admin-starter 149.1k1](/packages/bpocallaghan-faq) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)