├── .gitattributes
├── .laravel-7x-8x
    └── README.md
├── LICENSE
├── README.md
└── resources
    └── js
        ├── Pages
            ├── Auth
            │   ├── Login.vue
            │   └── Register.vue
            ├── HomeExample.vue
            └── Welcome.vue
        └── app.js


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.laravel-7x-8x/README.md:
--------------------------------------------------------------------------------
 1 | ## Laravel 7.x & 8.x
 2 | 
 3 | To install, please follow these steps. **Note:** We assume you start with a fresh Laravel project.
 4 | 
 5 | - `cd` to project directory
 6 | - Laravel 7.x `composer require vikdiesel/admin-one-laravel-dashboard:1.3.x --dev`
 7 | - Laravel 8.x `composer require vikdiesel/admin-one-laravel-dashboard:1.5.x --dev`
 8 | - `composer require laravel/ui`
 9 | - `php artisan ui:controllers`
10 | - `php artisan ui:auth`
11 | - `php artisan jb:admin-one-preset`
12 | - `npm install`
13 | - `npm run dev` or `npm run prod`
14 | - `php artisan migrate`
15 | - `php artisan db:seed`
16 | 
17 | ## Laravel 9.x
18 | 
19 | Please follow [guide for Laravel 9.x Jetstream Inertia Vue](https://github.com/vikdiesel/admin-one-laravel-dashboard).


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019-2022 JustBoil.me (https://justboil.me)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Free Laravel 9.x Vue.js 2.x Buefy Bulma Dashboard
  2 | 
  3 | <a href="https://vikdiesel.github.io/admin-one-vue-bulma-dashboard/" target="_blank" title="Bulma Vue.js 2.x Buefy free admin dashboard"><img src="https://static.justboil.me/templates/one/repo-bulma-vue.png" /></a>
  4 | 
  5 | This 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.
  6 | 
  7 | **Please note:** this document is work in progress, so [some things are missing](#work-in-progress).
  8 | 
  9 | Simple, beautiful and free **Vue.js 2.x** **Bulma** **Buefy** admin dashboard for **Laravel 9.x Jetstream Inertia + Vue** stack
 10 | 
 11 | * Built with **Vue.js 2.x** **Bulma** and **Buefy**
 12 | * **Laravel 9.x Jetstream Inertia + Vue** stack
 13 | * Laravel Mix
 14 | * Classic **Options API** using `data`, `computed`, `methods`, etc.
 15 | * SPA with **Vuex** & **Inertia Router**
 16 | * **Styled** scrollbars
 17 | * **SCSS sources** with variables
 18 | * Reusable components
 19 | * Responsive
 20 | * Free under MIT License
 21 | * [Premium versions](https://justboil.me/bulma-admin-template/) available
 22 | 
 23 | ## Table of contents
 24 | 
 25 | * [Install](#install)
 26 | * [Copy styles, components and scripts](#copy-styles-components-and-scripts)
 27 | * [Add pages](#add-pages)
 28 | * [Fix router links](#fix-router-links)
 29 | * [Add Inertia-related stuff](#add-inertia-related-stuff)
 30 | * [Work in progress](#work-in-progress)
 31 | * [Laravel 7.x & 8.x](#laravel-7x--8x)
 32 | 
 33 | ## Install
 34 | 
 35 | * [Install Laravel](https://laravel.com/docs/installation) application
 36 | * [Install Jetstream](https://jetstream.laravel.com/2.x/installation.html) with Inertia + Vue stack
 37 | * `cd` to project dir 
 38 | * 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)
 39 | * run `npm remove @inertiajs/inertia-vue3 @vue/compiler-sfc @tailwindcss/forms @tailwindcss/typography postcss postcss-import tailwindcss`
 40 | * 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`
 41 | 
 42 | Replace `postCss()` with `sass()` and `app.scss` with `main.scss` in `webpack.mix.js`:
 43 | 
 44 | ```javascript
 45 | mix.js('resources/js/app.js', 'public/js').vue()
 46 |   .sass('resources/scss/main.scss', 'public/css')
 47 |   .alias({
 48 |     '@': 'resources/js',
 49 |   })
 50 | ```
 51 | 
 52 | ## Copy styles, components and scripts
 53 | 
 54 | Clone 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
 55 | 
 56 | Next, copy these files **from cloned dashboard project** directory **to laravel project** directory:
 57 | 
 58 | * Copy `src/components` `src/store` `src/menu.js` to `resources/js/`
 59 | * Copy `src/App.vue` and `src/FullPage.vue` to `resources/Layouts/`
 60 | * Copy `src/css` and `src/scss` to `resources/`
 61 | * Copy `src/assets/justboil-logo.svg` to `resources/js/images/`
 62 | * Delete `resources/css/app.css`
 63 | * Copy `resources` directory **from this repository** to **to laravel project**
 64 | 
 65 | ##### In resources/views/app.blade.php
 66 | 
 67 | Replace `app.css` with `main.css`:
 68 | 
 69 | ```php
 70 | <!-- Styles -->
 71 | <link rel="stylesheet" href="{{ mix('css/main.css') }}">
 72 | ```
 73 | 
 74 | Add before `</body>`:
 75 | 
 76 | ```html
 77 | <link href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css" rel="stylesheet" type="text/css">
 78 | ```
 79 | 
 80 | ##### In resources/layouts/App.vue & FullPage.vue
 81 | 
 82 | Replace `<router-view />` with `<slot />`
 83 | 
 84 | ##### In resources/layouts/App.vue
 85 | 
 86 | Add `this.$store.dispatch('toggleFullPage', false)` to `created()` lifecycle hook
 87 | 
 88 | ##### In resources/layouts/FullPage.vue
 89 | 
 90 | Add `this.$store.dispatch('toggleFullPage', true)` to `created()` lifecycle hook
 91 | 
 92 | Remove `beforeDestroy()` lifecycle hook
 93 | 
 94 | ##### In resources/layouts/Tiles.vue
 95 | 
 96 | Add `import filter from 'lodash/filter'`
 97 | 
 98 | Add `filter()` and replace `this.$slots.default` with `slots` in `render()` method, so you'll get:
 99 | 
100 | ```javascript
101 | render (createElement) {
102 |     const renderAncestor = elements => createElement(
103 |       // ...
104 |     )
105 | 
106 |     const slots = filter(this.$slots.default, slot => !!slot.tag)
107 | 
108 |     if (slots.length <= this.maxPerRow) {
109 |       return renderAncestor(slots)
110 |     } else {
111 |       return createElement(
112 |         'div',
113 |         { attrs: { class: 'is-tiles-wrapper' } },
114 |         chunk(slots, this.maxPerRow).map(group => {
115 |           return renderAncestor(group)
116 |         })
117 |       )
118 |     }
119 |   }
120 | ```
121 | 
122 | ## Add Pages
123 | 
124 | Let'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.
125 | 
126 | First, copy `src/views/Home.vue` (original dashboard project) to `resources/js/Pages/` (your Laravel project).
127 | 
128 | Add `Head`. Then, wrap page contents into `App` Layout component:
129 | 
130 | ```vue
131 | <template>
132 | <app>
133 |   <Head title="Dashboard" />
134 |   <title-bar :title-stack="titleStack" />
135 |   <!-- ... -->
136 | </app>
137 | </template>
138 | <script>
139 | import { Head } from '@inertiajs/inertia-vue'
140 | import App from '@/Layouts/App.vue'
141 | // ...
142 | 
143 | export default defineComponent({
144 |   name: 'Home',
145 |   components: {
146 |     Head,
147 |     App,
148 |     // ...
149 |   }
150 |   // ...
151 | })
152 | </script>
153 | ```
154 | 
155 | Add route in `routes/web.php`. There's a `/dashboard` route already defined by default, so just replace `Inertia::render('Dashboard')` with `Inertia::render('Home')`:
156 | 
157 | ```php
158 | Route::get('/dashboard', function () {
159 |   return Inertia::render('Home');
160 | })->name('dashboard');
161 | ```
162 | 
163 | ## Fix router links
164 | 
165 | Here we replace router-link with Inertia Link.
166 | 
167 | ##### resources/js/menu.js
168 | 
169 | Optionally, you can pass menu via Inertia shared props, so it's going to be controlled with PHP. Here we'd just use JS.
170 | 
171 | `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`:
172 | 
173 | ```javascript
174 | export default [
175 |   'General',
176 |   [
177 |     {
178 |       route: 'dashboard',
179 |       icon: mdiDesktopMac,
180 |       label: 'Dashboard'
181 |     },
182 |     {
183 |       href: 'https://example.com/',
184 |       icon: mdiDesktopMac,
185 |       label: 'Example.com'
186 |     }
187 |   ]
188 | ]
189 | ```
190 | 
191 | Route names reflect ones defined in `routes/web.php`:
192 | 
193 | ```php
194 | Route::get('/dashboard', function () {
195 |   return Inertia::render('Home');
196 | })->name('dashboard');
197 | ```
198 | 
199 | Now, let's update vue files, to make them work with route names and Inertia links.
200 | 
201 | ##### resources/js/components/AsideMenuItem.vue
202 | 
203 | Add `Link` import to `<script>`:
204 | 
205 | ```vue
206 | <script>
207 | import { Link } from '@inertiajs/inertia-vue'
208 | // ...
209 | </script>
210 | ```
211 | 
212 | ##### resources/js/components/AsideMenuItem.vue
213 | 
214 | Replace `componentIs` in `computed{}` with:
215 | 
216 | ```vue
217 | <script>
218 | export default defineComponent({
219 |   // ...
220 |   computed: {
221 |     componentIs () {
222 |       return this.item.route ? Link : 'a'
223 |     }
224 |     // ...
225 |   }
226 |   // ...
227 | })
228 | </script>
229 | ```
230 | 
231 | Replace `<component>` attrs with:
232 | 
233 | ```vue
234 | <template>
235 | <component
236 |   :is="componentIs"
237 |   :href="item.route ? $route(item.route) : item.href"
238 |   :target="item.target"
239 |   :class="{ 'has-icon': !!item.icon, 'has-dropdown-icon': hasDropdown, 'is-active': item.route && $route().current(item.route) }"
240 |   @click="menuClick"
241 | >
242 |   <!-- ... -->
243 | </component>
244 | </template>
245 | ```
246 | 
247 | ##### .vue files in resources/js/ containing <router-link>
248 | 
249 | Import and register `Link` component:
250 | 
251 | ```vue
252 | <script>
253 | import { Link } from '@inertiajs/inertia-vue'
254 | // ...
255 | 
256 | export default defineComponent({
257 |   components: {
258 |     Link
259 |     // ...
260 |   }
261 |   // ...
262 | })
263 | </script>
264 | ```
265 | 
266 | Replace `<router-link>` with `<Link>`:
267 | 
268 | ```vue
269 | <template>
270 | <Link
271 |   :href="$route('dashboard')"
272 |   class="navbar-item"
273 |   :class="{ 'is-active': $route().current('dashboard') }"
274 | >
275 |   <!-- ... -->
276 | </Link>
277 | </template>
278 | ```
279 | 
280 | ##### resources/js/components/NavBar.vue
281 | 
282 | Replace `this.$router` with `Inertia`:
283 | 
284 | ```vue
285 | <script>
286 | import { Inertia } from '@inertiajs/inertia'
287 | // ...
288 | 
289 | export default defineComponent({
290 |   // ...
291 |   mounted () {
292 |     Inertia.on('navigate', (event) => {
293 |       this.isMenuActive = false
294 |     })
295 |   }
296 |   // ...
297 | })
298 | </script>
299 | ```
300 | 
301 | ## Add Inertia-related stuff
302 | 
303 | ##### resources/js/components/UserAvatar.vue
304 | 
305 | Fix `newAvatar` computed property, so it fetches profile photo from backend:
306 | 
307 | ```vue
308 | <script>
309 | export default defineComponent({
310 |   // ...
311 |   computed: {
312 |     newAvatar () {
313 |       return this.avatar ? this.avatar : this.$page.props.user.profile_photo_url
314 |     }
315 |   }
316 | })
317 | </script>
318 | ```
319 | 
320 | ##### resources/js/components/NavBar.vue
321 | 
322 | Update `userName` and `logout`:
323 | 
324 | ```vue
325 | <script>
326 | export default defineComponent({
327 |   // ...
328 |   computed: {
329 |     // ...
330 |     userName () {
331 |       return this.$page.props.user.name
332 |     },
333 |     ...mapState([
334 |       'isAsideMobileExpanded',
335 |       'isNavBarVisible',
336 |       // remove 'userName'
337 |     ])
338 |   },
339 |   methods: {
340 |     // ...
341 |     logout () {
342 |       Inertia.post(route('logout'))
343 |     }
344 |   }
345 |   // ...
346 | })
347 | </script>
348 | ```
349 | 
350 | ## Work in progress
351 | 
352 | As mentioned, this guide is WIP - work in progress. Contributions open. Here's the list of what's missing right now:
353 | 
354 | * Pages for resources/Pages/API
355 | * Pages for resources/Pages/Auth (except Login.vue and Register.vue)
356 | * Pages for resources/Pages/Profile
357 | * Unused default Jetstream files list
358 | 
359 | ## Laravel 7.x & 8.x
360 | 
361 | If you're using an older version of Laravel, please follow [Laravel 7.x & 8.x guide](https://github.com/vikdiesel/admin-one-laravel-dashboard/tree/master/.laravel-7x-8x).
362 | 


--------------------------------------------------------------------------------
/resources/js/Pages/Auth/Login.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <full-page>
  3 |     <Head title="Login" />
  4 |     <div v-if="status" class="notification is-danger">
  5 |       {{ status }}
  6 |     </div>
  7 |     <card-component
  8 |       title="Login"
  9 |       icon="lock"
 10 |     >
 11 |       <form
 12 |         method="POST"
 13 |         @submit.prevent="submit"
 14 |       >
 15 |         <b-field label="E-mail Address">
 16 |           <b-input
 17 |             v-model="form.email"
 18 |             name="email"
 19 |             type="email"
 20 |             required
 21 |           />
 22 |         </b-field>
 23 | 
 24 |         <b-field label="Password">
 25 |           <b-input
 26 |             v-model="form.password"
 27 |             type="password"
 28 |             name="password"
 29 |           />
 30 |         </b-field>
 31 | 
 32 |         <b-field>
 33 |           <b-checkbox
 34 |             v-model="form.remember"
 35 |             type="is-black"
 36 |             class="is-thin"
 37 |           >
 38 |             Remember me
 39 |           </b-checkbox>
 40 |         </b-field>
 41 | 
 42 |         <hr>
 43 | 
 44 |         <div class="level is-mobile">
 45 |           <div class="level-left">
 46 |             <div class="level-item">
 47 |               <b-button
 48 |                 native-type="submit"
 49 |                 type="is-black"
 50 |                 :loading="form.processing"
 51 |               >
 52 |                 Login
 53 |               </b-button>
 54 |             </div>
 55 |             <div v-if="canResetPassword" class="level-item">
 56 |               <Link
 57 |                 :href="$route('password.request')"
 58 |                 class="button is-text"
 59 |               >
 60 |                 Forgot password?
 61 |               </Link>
 62 |             </div>
 63 |           </div>
 64 |           <div class="level-right">
 65 |             <div class="level-item">
 66 |               <Link
 67 |                 :href="$route('register')"
 68 |                 class="button is-text"
 69 |               >
 70 |                 Register
 71 |               </Link>  
 72 |             </div>
 73 |           </div>
 74 |         </div>
 75 |       </form>
 76 |     </card-component>
 77 |   </full-page>
 78 | </template>
 79 | 
 80 | <script>
 81 | import { Head, Link } from '@inertiajs/inertia-vue'
 82 | import { defineComponent } from '@vue/composition-api'
 83 | import CardComponent from '@/components/CardComponent.vue'
 84 | import FullPage from '@/Layouts/FullPage.vue'
 85 | 
 86 | export default defineComponent({
 87 |   name: 'Login',
 88 |   components: { CardComponent, FullPage, Head, Link },
 89 |   props: {
 90 |     canResetPassword: Boolean,
 91 |     status: String
 92 |   },
 93 |   data () {
 94 |     return {
 95 |       form: this.$inertia.form({
 96 |         email: '',
 97 |         password: '',
 98 |         remember: false
 99 |       })
100 |     }
101 |   },
102 |   methods: {
103 |     submit () {
104 |       this.form
105 |         .transform(data => ({
106 |           ...data,
107 |           remember: this.form.remember ? 'on' : ''
108 |         }))
109 |         .post(this.$route('login'), {
110 |           onFinish: () => this.form.reset('password')
111 |         })
112 |     }
113 |   }
114 | })
115 | </script>
116 | 


--------------------------------------------------------------------------------
/resources/js/Pages/Auth/Register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <full-page>
  3 |     <Head title="Register" />
  4 |     <card-component
  5 |       title="Register"
  6 |       icon="account"
  7 |     >
  8 |       <form
  9 |         method="POST"
 10 |         @submit.prevent="submit"
 11 |       >
 12 |         <b-field label="Name">
 13 |           <b-input
 14 |             v-model="form.name"
 15 |             name="name"
 16 |             required
 17 |             autocomplete="name"
 18 |           />
 19 |         </b-field>
 20 | 
 21 |         <b-field label="E-mail Address">
 22 |           <b-input
 23 |             v-model="form.email"
 24 |             name="email"
 25 |             type="email"
 26 |             required
 27 |           />
 28 |         </b-field>
 29 | 
 30 |         <b-field label="Password">
 31 |           <b-input
 32 |             v-model="form.password"
 33 |             type="password"
 34 |             name="password"
 35 |             required
 36 |             autocomplete="new-password"
 37 |           />
 38 |         </b-field>
 39 | 
 40 |         <b-field label="Confirm Password">
 41 |           <b-input
 42 |             v-model="form.password_confirmation"
 43 |             type="password"
 44 |             name="password_confirmation"
 45 |             required
 46 |             autocomplete="new-password"
 47 |           />
 48 |         </b-field>
 49 | 
 50 |         <b-field v-if="$page.props.jetstream.hasTermsAndPrivacyPolicyFeature">
 51 |           <b-checkbox
 52 |             v-model="form.terms"
 53 |             type="is-black"
 54 |             class="is-thin"
 55 |           >
 56 |             I agree to the <a target="_blank" :href="route('terms.show')">Terms of Service</a> and <a target="_blank" :href="route('policy.show')">Privacy Policy</a>
 57 |           </b-checkbox>
 58 |         </b-field>
 59 | 
 60 |         <hr>
 61 | 
 62 |         <b-field grouped>
 63 |           <div class="control">
 64 |             <b-button
 65 |               native-type="submit"
 66 |               type="is-black"
 67 |               :loading="form.processing"
 68 |             >
 69 |               Register
 70 |             </b-button>
 71 |           </div>
 72 |           <div class="control">
 73 |             <Link
 74 |               :href="$route('login')"
 75 |               class="button is-text"
 76 |             >
 77 |               Already registered?
 78 |             </Link>
 79 |           </div>
 80 |         </b-field>
 81 |       </form>
 82 |     </card-component>
 83 |   </full-page>
 84 | </template>
 85 | 
 86 | <script>
 87 | import { Head, Link } from '@inertiajs/inertia-vue';
 88 | import { defineComponent } from '@vue/composition-api'
 89 | import CardComponent from '@/components/CardComponent.vue'
 90 | import FullPage from '@/Layouts/FullPage.vue'
 91 | 
 92 | export default defineComponent({
 93 |   name: 'Login',
 94 |   components: { CardComponent, FullPage, Head, Link },
 95 |   data () {
 96 |     return {
 97 |       form: this.$inertia.form({
 98 |         name: '',
 99 |         email: '',
100 |         password: '',
101 |         password_confirmation: '',
102 |         terms: false,
103 |       })
104 |     }
105 |   },
106 |   methods: {
107 |     submit () {
108 |       this.form.post(this.$route('register'), {
109 |         onFinish: () => this.form.reset('password', 'password_confirmation'),
110 |       })
111 |     }
112 |   }
113 | })
114 | </script>
115 | 


--------------------------------------------------------------------------------
/resources/js/Pages/HomeExample.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <app>
  3 |     <Head title="Dashboard" />
  4 |     <title-bar :title-stack="titleStack" />
  5 |     <hero-bar :has-right-visible="false">
  6 |       Dashboard
  7 |     </hero-bar>
  8 |     <section class="section is-main-section">
  9 |       <notification class="is-info">
 10 |         Please star this project on GitHub
 11 | 
 12 |         <a
 13 |           slot="right"
 14 |           href="https://github.com/vikdiesel/admin-one-vue-bulma-dashboard"
 15 |           target="_blank"
 16 |           class="button is-white is-small"
 17 |         >
 18 |           <b-icon
 19 |             icon="github-circle"
 20 |             custom-size="default"
 21 |           />
 22 |           <span>GitHub</span>
 23 |         </a>
 24 |       </notification>
 25 | 
 26 |       <tiles>
 27 |         <card-widget
 28 |           class="tile is-child"
 29 |           type="is-primary"
 30 |           icon="account-multiple"
 31 |           :number="512"
 32 |           label="Clients"
 33 |         />
 34 |         <card-widget
 35 |           class="tile is-child"
 36 |           type="is-info"
 37 |           icon="cart-outline"
 38 |           :number="7770"
 39 |           prefix="$"
 40 |           label="Sales"
 41 |         />
 42 |         <card-widget
 43 |           class="tile is-child"
 44 |           type="is-success"
 45 |           icon="chart-timeline-variant"
 46 |           :number="256"
 47 |           suffix="%"
 48 |           label="Performance"
 49 |         />
 50 |       </tiles>
 51 | 
 52 |       <card-component
 53 |         title="Performance"
 54 |         icon="finance"
 55 |         header-icon="reload"
 56 |         @header-icon-click="fillChartData"
 57 |       >
 58 |         <div
 59 |           v-if="chartData"
 60 |           class="chart-area"
 61 |         >
 62 |           <line-chart
 63 |             :chart-data="chartData"
 64 |             :chart-options="chartOptions"
 65 |             :style="{height: '100%'}"
 66 |           />
 67 |         </div>
 68 |       </card-component>
 69 | 
 70 |       <card-component
 71 |         title="Clients"
 72 |         class="has-table has-mobile-sort-spaced"
 73 |       >
 74 |         <clients-table-sample />
 75 |       </card-component>
 76 |     </section>
 77 |   </app>
 78 | </template>
 79 | 
 80 | <script>
 81 | import { Head } from '@inertiajs/inertia-vue'
 82 | import { defineComponent } from '@vue/composition-api'
 83 | import * as chartConfig from '@/components/Charts/chart.config.js'
 84 | import TitleBar from '@/components/TitleBar.vue'
 85 | import HeroBar from '@/components/HeroBar.vue'
 86 | import Tiles from '@/components/Tiles.vue'
 87 | import CardWidget from '@/components/CardWidget.vue'
 88 | import CardComponent from '@/components/CardComponent.vue'
 89 | import LineChart from '@/components/Charts/LineChart.vue'
 90 | import ClientsTableSample from '@/components/ClientsTableSample.vue'
 91 | import Notification from '@/components/Notification.vue'
 92 | import App from '@/Layouts/App.vue'
 93 | 
 94 | export default defineComponent({
 95 |   name: 'Dashboard',
 96 |   components: {
 97 |     ClientsTableSample,
 98 |     LineChart,
 99 |     CardComponent,
100 |     CardWidget,
101 |     Tiles,
102 |     HeroBar,
103 |     TitleBar,
104 |     Notification,
105 |     App,
106 |     Head
107 |   },
108 |   data () {
109 |     return {
110 |       titleStack: ['Admin', 'Dashboard'],
111 |       chartData: null,
112 |       chartOptions: {
113 |         responsive: true,
114 |         maintainAspectRatio: true,
115 |         scales: {
116 |           y: {
117 |             display: false
118 |           },
119 |           x: {
120 |             display: true
121 |           }
122 |         },
123 |         plugins: {
124 |           legend: {
125 |             display: false
126 |           }
127 |         }
128 |       }
129 |     }
130 |   },
131 |   mounted () {
132 |     this.fillChartData()
133 | 
134 |     this.$buefy.snackbar.open({
135 |       message: 'Welcome back',
136 |       queue: false
137 |     })
138 |   },
139 |   methods: {
140 |     fillChartData () {
141 |       this.chartData = chartConfig.sampleChartData()
142 |     }
143 |   }
144 | })
145 | </script>
146 | 


--------------------------------------------------------------------------------
/resources/js/Pages/Welcome.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { Link } from '@inertiajs/inertia-vue'
 3 | import { defineComponent } from '@vue/composition-api'
 4 | 
 5 | export default defineComponent({
 6 |   name: 'Login',
 7 |   components: { Link },
 8 |   props: {
 9 |     canLogin: Boolean,
10 |     canRegister: Boolean,
11 |     laravelVersion: String,
12 |     phpVersion: String
13 |   },
14 |   data () {
15 |     return {
16 |       isMenuActive: false
17 |     }
18 |   },
19 |   created () {
20 |     this.$store.dispatch('toggleFullPage', true)
21 |   }
22 | })
23 | </script>
24 | 
25 | <template>
26 |   <nav class="navbar">
27 |     <div class="navbar-brand">
28 |       <a
29 |         role="button"
30 |         class="navbar-burger"
31 |         :class="{ 'is-active': isMenuActive }"
32 |         aria-label="menu"
33 |         aria-expanded="false"
34 |         @click.prevent="isMenuActive = !isMenuActive"
35 |       >
36 |         <span aria-hidden="true" />
37 |         <span aria-hidden="true" />
38 |         <span aria-hidden="true" />
39 |       </a>
40 |     </div>
41 |     <div
42 |       class="navbar-menu fadeIn animated faster"
43 |       :class="{ 'is-active': isMenuActive }"
44 |     >
45 |       <div
46 |         v-if="canLogin"
47 |         class="navbar-end"
48 |       >
49 |         <Link
50 |           v-if="$page.props.user"
51 |           :href="$route('dashboard')"
52 |           class="navbar-item"
53 |         >
54 |           Dashboard
55 |         </Link>
56 |         <template v-else>
57 |           <Link
58 |             :href="$route('login')"
59 |             class="navbar-item"
60 |           >
61 |             Log in
62 |           </Link>
63 |           <Link
64 |             v-if="canRegister"
65 |             :href="$route('register')"
66 |             class="navbar-item"
67 |           >
68 |             Register
69 |           </Link>
70 |         </template>
71 |       </div>
72 |     </div>
73 |   </nav>
74 | </template>
75 | 


--------------------------------------------------------------------------------
/resources/js/app.js:
--------------------------------------------------------------------------------
 1 | // require('./bootstrap')
 2 | 
 3 | import Vue from 'vue'
 4 | import Buefy from 'buefy'
 5 | import { createInertiaApp } from '@inertiajs/inertia-vue'
 6 | import { InertiaProgress } from '@inertiajs/progress'
 7 | import { Inertia } from '@inertiajs/inertia'
 8 | import store from './store'
 9 | 
10 | Vue.prototype.$route = route
11 | 
12 | const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel'
13 | 
14 | createInertiaApp({
15 |   resolve: name => require(`./Pages/${name}`),
16 |   setup({ el, App, props, plugin }) {
17 |     Vue.use(plugin)
18 |     Vue.use(Buefy)
19 | 
20 |     new Vue({
21 |       store,
22 |       render: h => h(App, props),
23 |     }).$mount(el)
24 |   },
25 | })
26 | 
27 | InertiaProgress.init({ color: '#4B5563' })
28 | 
29 | /* Collapse mobile aside menu on route change */
30 | Inertia.on('navigate', (event) => {
31 |   store.commit('asideMobileStateToggle', false)
32 |   store.dispatch('asideDesktopOnlyToggle', false)
33 | })
34 | 


--------------------------------------------------------------------------------