PHPackages bantenprov/vue-opd - 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. [Utility & Helpers](/categories/utility) 4. / 5. bantenprov/vue-opd ActiveLibrary[Utility & Helpers](/categories/utility) bantenprov/vue-opd ================== Vue OPD 0151[1 issues](https://github.com/bantenprov/vue-opd/issues)Vue Since Mar 11Pushed 8y ago1 watchersCompare [ Source](https://github.com/bantenprov/vue-opd)[ Packagist](https://packagist.org/packages/bantenprov/vue-opd)[ RSS](/packages/bantenprov-vue-opd/feed)WikiDiscussions master Synced 2w ago READMEChangelogDependenciesVersions (1)Used By (0) Vue OPD ======= [](#vue-opd) [![Join the chat at https://gitter.im/vue-opd/Lobby](https://camo.githubusercontent.com/88209d8a0044afaef02b1e70de7b09b04ed10f4b9ca11bacbe55f559370e912a/68747470733a2f2f6261646765732e6769747465722e696d2f7675652d6f70642f4c6f6262792e737667)](https://gitter.im/vue-opd/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)[![Scrutinizer Code Quality](https://camo.githubusercontent.com/1fb98c23dc54687bde533f38ab8abea0879e2cd7cfbe0fa9bf0780b12b347aa2/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f62616e74656e70726f762f7675652d6f70642f6261646765732f7175616c6974792d73636f72652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/bantenprov/vue-opd/?branch=master)[![Build Status](https://camo.githubusercontent.com/d85cedfb06094f338134ef6d6ef1a570def45d042332cca847235be02de38412/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f62616e74656e70726f762f7675652d6f70642f6261646765732f6275696c642e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/bantenprov/vue-opd/build-status/master)[![Latest Stable Version](https://camo.githubusercontent.com/648c08007e74d3162eb62f48f9dee21ca73ec897d1a94ff59b09b13060ae537b/68747470733a2f2f706f7365722e707567782e6f72672f62616e74656e70726f762f7675652d6f70642f762f737461626c65)](https://packagist.org/packages/bantenprov/vue-opd)[![Total Downloads](https://camo.githubusercontent.com/ba58742f761c2b44eb28ae4beb992f66529482fe38fca40f201bac9218513b7e/68747470733a2f2f706f7365722e707567782e6f72672f62616e74656e70726f762f7675652d6f70642f646f776e6c6f616473)](https://packagist.org/packages/bantenprov/vue-opd)[![Latest Unstable Version](https://camo.githubusercontent.com/abc6d81fd11ca38c8ec46608243d88f644e0c96cbc092fa4ff26fa0f53c8dd50/68747470733a2f2f706f7365722e707567782e6f72672f62616e74656e70726f762f7675652d6f70642f762f756e737461626c65)](https://packagist.org/packages/bantenprov/vue-opd)[![License](https://camo.githubusercontent.com/cb45972d0c868b06b5b4d31630543ec9a0e33107193ea5a838542d7468062563/68747470733a2f2f706f7365722e707567782e6f72672f62616e74656e70726f762f7675652d6f70642f6c6963656e7365)](https://packagist.org/packages/bantenprov/vue-opd)[![Monthly Downloads](https://camo.githubusercontent.com/4b643f83231f2a59c74d18a0626abde020603c94ec8f0d5014606a4046433247/68747470733a2f2f706f7365722e707567782e6f72672f62616e74656e70726f762f7675652d6f70642f642f6d6f6e74686c79)](https://packagist.org/packages/bantenprov/vue-opd)[![Daily Downloads](https://camo.githubusercontent.com/34a052a0fbf7681ee0d94bee31fb2027261e1f8efc6d8ce688cd15fa8927ac9a/68747470733a2f2f706f7365722e707567782e6f72672f62616e74656e70726f762f7675652d6f70642f642f6461696c79)](https://packagist.org/packages/bantenprov/vue-opd) ### Install via composer [](#install-via-composer) - Development snapshot ``` $ composer require bantenprov/vue-opd:dev-master ``` - Latest release: ``` $ composer require bantenprov/vue-opd ``` ### Download via github [](#download-via-github) ``` $ git clone https://github.com/bantenprov/vue-opd.git ``` #### Edit `config/app.php` : [](#edit-configappphp-) ``` 'providers' => [ /* * Package Service Providers... */ Laravel\Tinker\TinkerServiceProvider::class, //.... Bantenprov\VueOpd\VueOpdServiceProvider::class, Emadadly\LaravelUuid\LaravelUuidServiceProvider::class, ``` ``` 'aliases' => [ 'App' => Illuminate\Support\Facades\App::class, 'Artisan' => Illuminate\Support\Facades\Artisan::class, 'Auth' => Illuminate\Support\Facades\Auth::class, 'Blade' => Illuminate\Support\Facades\Blade::class, 'Broadcast' => Illuminate\Support\Facades\Broadcast::class, ... 'Opd' => Bantenprov\LaravelOpd\Facades\LaravelOpd::class, ``` #### Publish vendor : [](#publish-vendor-) ``` $ php artisan vendor:publish --tag=vue-opd-seeds $ php artisan vendor:publish --tag=vue-opd-assets $ php artisan vendor:publish --tag=vue-opd-public $ php artisan vendor:publish --provider="Emadadly\LaravelUuid\LaravelUuidServiceProvider" ``` #### Edit config/uuid.php [](#edit-configuuidphp) Change `'default_uuid_column' => 'uuid'` to `'default_uuid_column' => 'id'` like this ``` 'default_uuid_column' => 'id', ``` ### Edit "vendor/kalnoy/nestedset/src/NestedSet.php" [](#edit-vendorkalnoynestedsetsrcnestedsetphp) Change `$table->unsignedInteger(self::PARENT_ID)->nullable();` to `$table->string(self::PARENT_ID)->nullable();` like this ``` public static function columns(Blueprint $table) { $table->unsignedInteger(self::LFT)->default(0); $table->unsignedInteger(self::RGT)->default(0); $table->string(self::PARENT_ID)->nullable(); $table->index(static::getDefaultColumns()); } ``` #### Lakukan auto dump : [](#lakukan-auto-dump-) ``` $ composer dump-autoload ``` #### Lakukan migrate : [](#lakukan-migrate-) ``` $ php artisan migrate ``` #### Lakukan seeding : [](#lakukan-seeding-) ``` $ php artisan db:seed --class=BantenprovVueOpdSeeder ``` #### Tambahkan route di dalam file : `resources/assets/js/routes.js` : [](#tambahkan-route-di-dalam-file--resourcesassetsjsroutesjs-) ``` { path: '/dashboard', redirect: '/dashboard/home', component: layout('Default'), children: [ //== ... { path: '/dashboard/vue-opd', components: { main: resolve => require(['./components/views/bantenprov/vue-opd/DashboardVueOpd.vue'], resolve), navbar: resolve => require(['./components/Navbar.vue'], resolve), sidebar: resolve => require(['./components/Sidebar.vue'], resolve) }, meta: { title: "Vue OPD" } }, //== ... ] }, ``` ``` { path: '/admin', redirect: '/admin/dashboard/home', component: layout('Default'), children: [ //== ... { path: '/admin/vue-opd', components: { main: resolve => require(['./components/bantenprov/vue-opd/VueOpd.index.vue'], resolve), navbar: resolve => require(['./components/Navbar.vue'], resolve), sidebar: resolve => require(['./components/Sidebar.vue'], resolve) }, meta: { title: "Vue OPD" } }, { path: '/admin/vue-opd/create', components: { main: resolve => require(['./components/bantenprov/vue-opd/VueOpd.add.vue'], resolve), navbar: resolve => require(['./components/Navbar.vue'], resolve), sidebar: resolve => require(['./components/Sidebar.vue'], resolve) }, meta: { title: "Add Root Vue OPD" } }, { path: '/admin/vue-opd/:id/create', components: { main: resolve => require(['./components/bantenprov/vue-opd/VueOpd.add.vue'], resolve), navbar: resolve => require(['./components/Navbar.vue'], resolve), sidebar: resolve => require(['./components/Sidebar.vue'], resolve) }, meta: { title: "Add Child Vue OPD" } }, { path: '/admin/vue-opd/:id', components: { main: resolve => require(['./components/bantenprov/vue-opd/VueOpd.show.vue'], resolve), navbar: resolve => require(['./components/Navbar.vue'], resolve), sidebar: resolve => require(['./components/Sidebar.vue'], resolve) }, meta: { title: "View Vue OPD" } }, { path: '/admin/vue-opd/:id/edit', components: { main: resolve => require(['./components/bantenprov/vue-opd/VueOpd.edit.vue'], resolve), navbar: resolve => require(['./components/Navbar.vue'], resolve), sidebar: resolve => require(['./components/Sidebar.vue'], resolve) }, meta: { title: "Edit Vue OPD" } }, //== ... ] }, ``` #### Edit menu `resources/assets/js/menu.js` [](#edit-menu-resourcesassetsjsmenujs) ``` { name: 'Dashboard', icon: 'fa fa-dashboard', childType: 'collapse', childItem: [ //== ... { name: 'Vue OPD', link: '/dashboard/vue-opd', icon: 'fa fa-angle-double-right' }, //== ... ] }, ``` ``` { name: 'Admin', icon: 'fa fa-lock', childType: 'collapse', childItem: [ //== ... { name: 'Vue OPD', link: '/admin/vue-opd', icon: 'fa fa-angle-double-right' }, //== ... ] }, ``` #### Tambahkan components `resources/assets/js/components.js` : [](#tambahkan-components-resourcesassetsjscomponentsjs-) ``` import VueOpd from './components/bantenprov/vue-opd/VueOpd.chart.vue'; Vue.component('echarts-vue-opd', VueOpd); import VueOpdKota from './components/bantenprov/vue-opd/VueOpdKota.chart.vue'; Vue.component('echarts-vue-opd-kota', VueOpdKota); import VueOpdTahun from './components/bantenprov/vue-opd/VueOpdTahun.chart.vue'; Vue.component('echarts-vue-opd-tahun', VueOpdTahun); import VueOpdAdminShow from './components/bantenprov/vue-opd/VueOpdAdmin.show.vue'; Vue.component('admin-view-vue-opd-tahun', VueOpdAdminShow); //== Echarts Angka Partisipasi Kasar import VueOpdBar01 from './components/views/bantenprov/vue-opd/VueOpdBar01.vue'; Vue.component('vue-opd-bar-01', VueOpdBar01); import VueOpdBar02 from './components/views/bantenprov/vue-opd/VueOpdBar02.vue'; Vue.component('vue-opd-bar-02', VueOpdBar02); //== mini bar charts import VueOpdBar03 from './components/views/bantenprov/vue-opd/VueOpdBar03.vue'; Vue.component('vue-opd-bar-03', VueOpdBar03); import VueOpdPie01 from './components/views/bantenprov/vue-opd/VueOpdPie01.vue'; Vue.component('vue-opd-pie-01', VueOpdPie01); import VueOpdPie02 from './components/views/bantenprov/vue-opd/VueOpdPie02.vue'; Vue.component('vue-opd-pie-02', VueOpdPie02); //== mini pie charts import VueOpdPie03 from './components/views/bantenprov/vue-opd/VueOpdPie03.vue'; Vue.component('vue-opd-pie-03', VueOpdPie03); ``` ### Health Score 21 — LowBetter than 18% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity7 Limited adoption so far Community11 Small or concentrated contributor base Maturity41 Maturing project, gaining track record Bus Factor1 Top contributor holds 83.3% 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. ### Community Maintainers ![](https://avatars.githubusercontent.com/u/28588981?v=4)[Provinsi Banten](/maintainers/bantenprov)[@bantenprov](https://github.com/bantenprov) --- Top Contributors [![achmadhadikurnia](https://avatars.githubusercontent.com/u/4408971?v=4)](https://github.com/achmadhadikurnia "achmadhadikurnia (30 commits)")[![andri-sudarmawijaya](https://avatars.githubusercontent.com/u/28795941?v=4)](https://github.com/andri-sudarmawijaya "andri-sudarmawijaya (5 commits)")[![bantenprov](https://avatars.githubusercontent.com/u/28588981?v=4)](https://github.com/bantenprov "bantenprov (1 commits)") ### Embed Badge ![Health badge](/badges/bantenprov-vue-opd/health.svg) ``` [![Health](https://phpackages.com/badges/bantenprov-vue-opd/health.svg)](https://phpackages.com/packages/bantenprov-vue-opd) ``` ### Alternatives [jeffersongoncalves/filament-whatsapp-widget This Filament package provides a simple yet customizable WhatsApp widget for your website. It allows you to easily add a clickable WhatsApp button or floating widget to connect visitors directly with your WhatsApp account. The widget is designed to be easily integrated into your Laravel application and is fully customizable to match your website's design. 112.1k](/packages/jeffersongoncalves-filament-whatsapp-widget) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)