{"id":14974704,"url":"https://github.com/vikdiesel/admin-one-laravel-dashboard","last_synced_at":"2025-04-06T10:12:19.696Z","repository":{"id":62544104,"uuid":"204904377","full_name":"vikdiesel/admin-one-laravel-dashboard","owner":"vikdiesel","description":"Free Laravel 9.x Jetstream Inertia Bulma Buefy Vue.js 2.x Dashboard","archived":false,"fork":false,"pushed_at":"2022-11-21T09:19:22.000Z","size":191,"stargazers_count":142,"open_issues_count":4,"forks_count":34,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-30T07:46:25.412Z","etag":null,"topics":["buefy","bulma","bulma-admin","bulma-admin-dashboard","bulma-css","bulma-css-framework","bulma-extensions","bulma-framework","bulma-template","bulma-ui","bulmacss","laravel","laravel-framework","laravel-package","vue","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vikdiesel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-28T10:17:40.000Z","updated_at":"2024-07-01T23:02:59.000Z","dependencies_parsed_at":"2023-01-23T01:31:07.335Z","dependency_job_id":null,"html_url":"https://github.com/vikdiesel/admin-one-laravel-dashboard","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikdiesel%2Fadmin-one-laravel-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikdiesel%2Fadmin-one-laravel-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikdiesel%2Fadmin-one-laravel-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikdiesel%2Fadmin-one-laravel-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vikdiesel","download_url":"https://codeload.github.com/vikdiesel/admin-one-laravel-dashboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247464222,"owners_count":20942970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["buefy","bulma","bulma-admin","bulma-admin-dashboard","bulma-css","bulma-css-framework","bulma-extensions","bulma-framework","bulma-template","bulma-ui","bulmacss","laravel","laravel-framework","laravel-package","vue","vuejs","vuejs2"],"created_at":"2024-09-24T13:50:57.757Z","updated_at":"2025-04-06T10:12:19.676Z","avatar_url":"https://github.com/vikdiesel.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Free Laravel 9.x Vue.js 2.x Buefy Bulma Dashboard\n\n\u003ca href=\"https://vikdiesel.github.io/admin-one-vue-bulma-dashboard/\" target=\"_blank\" title=\"Bulma Vue.js 2.x Buefy free admin dashboard\"\u003e\u003cimg src=\"https://static.justboil.me/templates/one/repo-bulma-vue.png\" /\u003e\u003c/a\u003e\n\nThis guide will help you integrate your **Laravel Jetstream** application with [vikdiesel/admin-one-vue-bulma-dashboard](https://github.com/vikdiesel/admin-one-vue-bulma-dashboard) Vue Bulma Buefy dashboard.\n\n**Please note:** this document is work in progress, so [some things are missing](#work-in-progress).\n\nSimple, beautiful and free **Vue.js 2.x** **Bulma** **Buefy** admin dashboard for **Laravel 9.x Jetstream Inertia + Vue** stack\n\n* Built with **Vue.js 2.x** **Bulma** and **Buefy**\n* **Laravel 9.x Jetstream Inertia + Vue** stack\n* Laravel Mix\n* Classic **Options API** using `data`, `computed`, `methods`, etc.\n* SPA with **Vuex** \u0026 **Inertia Router**\n* **Styled** scrollbars\n* **SCSS sources** with variables\n* Reusable components\n* Responsive\n* Free under MIT License\n* [Premium versions](https://justboil.me/bulma-admin-template/) available\n\n## Table of contents\n\n* [Install](#install)\n* [Copy styles, components and scripts](#copy-styles-components-and-scripts)\n* [Add pages](#add-pages)\n* [Fix router links](#fix-router-links)\n* [Add Inertia-related stuff](#add-inertia-related-stuff)\n* [Work in progress](#work-in-progress)\n* [Laravel 7.x \u0026 8.x](#laravel-7x--8x)\n\n## Install\n\n* [Install Laravel](https://laravel.com/docs/installation) application\n* [Install Jetstream](https://jetstream.laravel.com/2.x/installation.html) with Inertia + Vue stack\n* `cd` to project dir \n* Move `resources/js` folder to `resources-temp/js`. These js files will serve as a reference during development process (just in case, you'll ever need to extract some logic, that is missing here)\n* run `npm remove @inertiajs/inertia-vue3 @vue/compiler-sfc @tailwindcss/forms @tailwindcss/typography postcss postcss-import tailwindcss`\n* run `npm i vuex@^3 vue@^2 vue-loader@^15 @vue/composition-api @inertiajs/inertia-vue bulma buefy chart.js vue-chartjs numeral sass sass-loader -D`\n\nReplace `postCss()` with `sass()` and `app.scss` with `main.scss` in `webpack.mix.js`:\n\n```javascript\nmix.js('resources/js/app.js', 'public/js').vue()\n  .sass('resources/scss/main.scss', 'public/css')\n  .alias({\n    '@': 'resources/js',\n  })\n```\n\n## Copy styles, components and scripts\n\nClone either [vikdiesel/admin-one-vue-bulma-dashboard](https://github.com/vikdiesel/admin-one-vue-bulma-dashboard) or [vikdiesel/admin-two-vue-bulma-dashboard](https://github.com/vikdiesel/admin-two-vue-bulma-dashboard) project locally into a separate folder\n\nNext, copy these files **from cloned dashboard project** directory **to laravel project** directory:\n\n* Copy `src/components` `src/store` `src/menu.js` to `resources/js/`\n* Copy `src/App.vue` and `src/FullPage.vue` to `resources/Layouts/`\n* Copy `src/css` and `src/scss` to `resources/`\n* Copy `src/assets/justboil-logo.svg` to `resources/js/images/`\n* Delete `resources/css/app.css`\n* Copy `resources` directory **from this repository** to **to laravel project**\n\n##### In resources/views/app.blade.php\n\nReplace `app.css` with `main.css`:\n\n```php\n\u003c!-- Styles --\u003e\n\u003clink rel=\"stylesheet\" href=\"{{ mix('css/main.css') }}\"\u003e\n```\n\nAdd before `\u003c/body\u003e`:\n\n```html\n\u003clink href=\"https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css\" rel=\"stylesheet\" type=\"text/css\"\u003e\n```\n\n##### In resources/layouts/App.vue \u0026 FullPage.vue\n\nReplace `\u003crouter-view /\u003e` with `\u003cslot /\u003e`\n\n##### In resources/layouts/App.vue\n\nAdd `this.$store.dispatch('toggleFullPage', false)` to `created()` lifecycle hook\n\n##### In resources/layouts/FullPage.vue\n\nAdd `this.$store.dispatch('toggleFullPage', true)` to `created()` lifecycle hook\n\nRemove `beforeDestroy()` lifecycle hook\n\n##### In resources/layouts/Tiles.vue\n\nAdd `import filter from 'lodash/filter'`\n\nAdd `filter()` and replace `this.$slots.default` with `slots` in `render()` method, so you'll get:\n\n```javascript\nrender (createElement) {\n    const renderAncestor = elements =\u003e createElement(\n      // ...\n    )\n\n    const slots = filter(this.$slots.default, slot =\u003e !!slot.tag)\n\n    if (slots.length \u003c= this.maxPerRow) {\n      return renderAncestor(slots)\n    } else {\n      return createElement(\n        'div',\n        { attrs: { class: 'is-tiles-wrapper' } },\n        chunk(slots, this.maxPerRow).map(group =\u003e {\n          return renderAncestor(group)\n        })\n      )\n    }\n  }\n```\n\n## Add Pages\n\nLet's just add first page. You can repeat these steps for other pages, if you wish to. If you've followed previous steps, there's already `resources/js/Pages/HomeExample.vue` for your reference.\n\nFirst, copy `src/views/Home.vue` (original dashboard project) to `resources/js/Pages/` (your Laravel project).\n\nAdd `Head`. Then, wrap page contents into `App` Layout component:\n\n```vue\n\u003ctemplate\u003e\n\u003capp\u003e\n  \u003cHead title=\"Dashboard\" /\u003e\n  \u003ctitle-bar :title-stack=\"titleStack\" /\u003e\n  \u003c!-- ... --\u003e\n\u003c/app\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nimport { Head } from '@inertiajs/inertia-vue'\nimport App from '@/Layouts/App.vue'\n// ...\n\nexport default defineComponent({\n  name: 'Home',\n  components: {\n    Head,\n    App,\n    // ...\n  }\n  // ...\n})\n\u003c/script\u003e\n```\n\nAdd route in `routes/web.php`. There's a `/dashboard` route already defined by default, so just replace `Inertia::render('Dashboard')` with `Inertia::render('Home')`:\n\n```php\nRoute::get('/dashboard', function () {\n  return Inertia::render('Home');\n})-\u003ename('dashboard');\n```\n\n## Fix router links\n\nHere we replace router-link with Inertia Link.\n\n##### resources/js/menu.js\n\nOptionally, you can pass menu via Inertia shared props, so it's going to be controlled with PHP. Here we'd just use JS.\n\n`to` should be replaced with `route` which specifies route name defined in `routes/web.php`. For external links `href` should be used instead. Here's an example for `menu.js`:\n\n```javascript\nexport default [\n  'General',\n  [\n    {\n      route: 'dashboard',\n      icon: mdiDesktopMac,\n      label: 'Dashboard'\n    },\n    {\n      href: 'https://example.com/',\n      icon: mdiDesktopMac,\n      label: 'Example.com'\n    }\n  ]\n]\n```\n\nRoute names reflect ones defined in `routes/web.php`:\n\n```php\nRoute::get('/dashboard', function () {\n  return Inertia::render('Home');\n})-\u003ename('dashboard');\n```\n\nNow, let's update vue files, to make them work with route names and Inertia links.\n\n##### resources/js/components/AsideMenuItem.vue\n\nAdd `Link` import to `\u003cscript\u003e`:\n\n```vue\n\u003cscript\u003e\nimport { Link } from '@inertiajs/inertia-vue'\n// ...\n\u003c/script\u003e\n```\n\n##### resources/js/components/AsideMenuItem.vue\n\nReplace `componentIs` in `computed{}` with:\n\n```vue\n\u003cscript\u003e\nexport default defineComponent({\n  // ...\n  computed: {\n    componentIs () {\n      return this.item.route ? Link : 'a'\n    }\n    // ...\n  }\n  // ...\n})\n\u003c/script\u003e\n```\n\nReplace `\u003ccomponent\u003e` attrs with:\n\n```vue\n\u003ctemplate\u003e\n\u003ccomponent\n  :is=\"componentIs\"\n  :href=\"item.route ? $route(item.route) : item.href\"\n  :target=\"item.target\"\n  :class=\"{ 'has-icon': !!item.icon, 'has-dropdown-icon': hasDropdown, 'is-active': item.route \u0026\u0026 $route().current(item.route) }\"\n  @click=\"menuClick\"\n\u003e\n  \u003c!-- ... --\u003e\n\u003c/component\u003e\n\u003c/template\u003e\n```\n\n##### .vue files in resources/js/ containing \u003crouter-link\u003e\n\nImport and register `Link` component:\n\n```vue\n\u003cscript\u003e\nimport { Link } from '@inertiajs/inertia-vue'\n// ...\n\nexport default defineComponent({\n  components: {\n    Link\n    // ...\n  }\n  // ...\n})\n\u003c/script\u003e\n```\n\nReplace `\u003crouter-link\u003e` with `\u003cLink\u003e`:\n\n```vue\n\u003ctemplate\u003e\n\u003cLink\n  :href=\"$route('dashboard')\"\n  class=\"navbar-item\"\n  :class=\"{ 'is-active': $route().current('dashboard') }\"\n\u003e\n  \u003c!-- ... --\u003e\n\u003c/Link\u003e\n\u003c/template\u003e\n```\n\n##### resources/js/components/NavBar.vue\n\nReplace `this.$router` with `Inertia`:\n\n```vue\n\u003cscript\u003e\nimport { Inertia } from '@inertiajs/inertia'\n// ...\n\nexport default defineComponent({\n  // ...\n  mounted () {\n    Inertia.on('navigate', (event) =\u003e {\n      this.isMenuActive = false\n    })\n  }\n  // ...\n})\n\u003c/script\u003e\n```\n\n## Add Inertia-related stuff\n\n##### resources/js/components/UserAvatar.vue\n\nFix `newAvatar` computed property, so it fetches profile photo from backend:\n\n```vue\n\u003cscript\u003e\nexport default defineComponent({\n  // ...\n  computed: {\n    newAvatar () {\n      return this.avatar ? this.avatar : this.$page.props.user.profile_photo_url\n    }\n  }\n})\n\u003c/script\u003e\n```\n\n##### resources/js/components/NavBar.vue\n\nUpdate `userName` and `logout`:\n\n```vue\n\u003cscript\u003e\nexport default defineComponent({\n  // ...\n  computed: {\n    // ...\n    userName () {\n      return this.$page.props.user.name\n    },\n    ...mapState([\n      'isAsideMobileExpanded',\n      'isNavBarVisible',\n      // remove 'userName'\n    ])\n  },\n  methods: {\n    // ...\n    logout () {\n      Inertia.post(route('logout'))\n    }\n  }\n  // ...\n})\n\u003c/script\u003e\n```\n\n## Work in progress\n\nAs mentioned, this guide is WIP - work in progress. Contributions open. Here's the list of what's missing right now:\n\n* Pages for resources/Pages/API\n* Pages for resources/Pages/Auth (except Login.vue and Register.vue)\n* Pages for resources/Pages/Profile\n* Unused default Jetstream files list\n\n## Laravel 7.x \u0026 8.x\n\nIf you're using an older version of Laravel, please follow [Laravel 7.x \u0026 8.x guide](https://github.com/vikdiesel/admin-one-laravel-dashboard/tree/master/.laravel-7x-8x).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikdiesel%2Fadmin-one-laravel-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvikdiesel%2Fadmin-one-laravel-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikdiesel%2Fadmin-one-laravel-dashboard/lists"}