Tuan Duong

Posted on Feb 14, 2019 • Updated on Mar 19, 2020

Laravue - a beautiful dashboard for Laravel

#vue #laravel #php #dashboard

Introductions

Couple months ago I was trying to find a new solution for my project, and I had built a SPA dashboard with Vue (using this great framework, Laravel Lumen as API gateway, Laravel Passport as SSO server). After some weeks of working, I found that architecture has some limitations, especially in deployment and hard to open source (because many components involved, CORS setup,...). Then one day new idea came to me:

Why don't we use builtin VueJS of Laravel to build a SPA dashboard?

And Laravel + VueJS = Laravue

Demo: https://laravue.dev
Documentation: https://doc.laravue.dev

Laravue is a beautiful dashboard inspired by vue-element-admin but beyond that. It provides all necessary components for building an enterprise application for admin to control business and manage others. My plan is to apply newest technologies/libraries/components of Laravel/Vue to this project and make it easy to use for everyone. In the demo, API will be served by Laravel itself and most of them are faked - but easy to implement.

Getting started

# Clone the project with composer
composer create-project tuandm/laravue
cd laravue

# Migration and DB seeder (after changing your DB settings in .env)
php artisan migrate --seed

# Install passport
php artisan passport:install

# install dependency
npm install

# Build for development
npm run dev # or npm run watch

# Start local development server
npm artisan serve

Next steps

This project is on heavy development and it has not being built as Laravel plugin (as it should be). Next step will be a standalone plugin for Laravel to easy to integrate to existing Laravel websites.
Provide full documentation and strict coding convention. PHP/Laravel has an excellent PSR and VueJS has a good standard here but it's too basic and not enough.
Fully tests.

I greatly appreciate any feedback, comments, suggestions,... they absolutely make me and this library better. Thank you.

Also, this is my first DEV post 🎉

Top comments (63)

Comment deleted

Tuan Duong • Apr 3 '20

@hamdimesbah : Have you run DB seeder to create sample data?

Comment deleted

Tuan Duong • Apr 6 '20

Hi,

Can you please go to github.com/tuandm/laravue-core/issues, post your screenshot there?
401 means the login failed for some reason: github.com/tuandm/laravue-core/blo...

Please make sure your database has sample users, or you have to create new one using Laravel Tinker.

Again, the error "Target class [Tuandm\Laravue\Database\Seeds\DatabaseSeeder] does not exist." means that class is not added to classmap. But it's there: github.com/tuandm/laravue-core/blo...

namespace Tuandm\Laravue\Database\Seeds;
...
class DatabaseSeeder extends Seeder

Tuan Duong • Apr 6 '20

Hope this helps: github.com/tuandm/laravue-core/iss...

Tuan Duong • Apr 4 '20

Are use using Laravue or laravue-core? This class should be in laravue-core package: github.com/tuandm/laravue-core/blo....

Comment deleted

Tuan Duong • Apr 4 '20

Have you run composer dump-autoload to generate classmap, which should be done automatically?

Comment deleted

Tuan Duong • Apr 4 '20

401 is the unauthorized request. Can you please open the Chrome console and check all the XHR requests? It's good if you can take screenshot and post here.

I suggest you creating issues on github.com/tuandm/laravue/issues so the community can help :)

Glenn Carremans • Feb 14 '19 • Edited

This looks great! I suggested it to our web team, currently they are using AdminLTE–template (unless they changed it already).

Btw you said "Laravel Lamen as API gateway" (typo Lamen = Lumen 😉) but is that correct? Aren't you using the full Laravel framework and not the minimal Lumen version.

Tuan Duong • Feb 14 '19 • Edited

Thanks @glennmen , I corrected the typo 😉.

In this version, I'm using full Laravel framework because I want to experiment more on other packages - not only which Lumen offers. I will release a version for Lumen when everything is... so so 😛.

Glenn Carremans • Feb 14 '19

I would suggest to keep using the Lavavel framework.
Even though your dashboard will work with only Lumen it will be harder for other developers to customize and extend your dashboard for their projects. Lumen for example doesn't support views.

Tuan Duong • Feb 14 '19 • Edited

@glennmen : Thanks for your suggestion. Well noted.

iqbaltld • May 15 '19

This is the first time I am developing a Laravel Vue app. When I use 'php artisan serve', everything works fine. But when I load it with 'localhost/myProject/public', assets are not loaded. My images are in 'img' directory inside public folder. I was using blade templating to manage this issue when I use Laravel alone. But now I can't use blade since it is a Vue component. How can I run the project without 'php artisan serve'? My Ultimate aim is to deploy the project in godaddy shared server. Please help me.

Tuan Duong • May 20 '19 • Edited

Hi @iqbaltld

Thanks for reaching this project. If you don't want to use php artisan serve, you should create vhost file (depends on which web server you are using) and point to /your/project/public folder, then you open browser to access to http://your_vhost_name. With the current release, Laravue doesn't support to be run as subfolder.

If you have any question, please let me know. I also suggest you open issue on github.com/tuandm/laravue/issues so that everyone can get noticed about your trouble.

Tuan Duong • Oct 14 '19

Hi @iqbaltld ,

Laravue now supports running in subfolder, please check the document here: doc.laravue.dev/guide/#change-the-...

Phat Nguyen • Feb 14 '19

It looks great!!!

alfanzain • Jun 13 '19

It's look very easy if we apply 'Vue + Laravel template'.
I am trying to apply 'Vue template' to Laravel and I really don't know what should I do.

Would you like to make a tutorial how to do that? It's like none ever write the tutorial.

Tuan Duong • Jun 14 '19

Hi @alfanzain ,
We are working on the documentation and trying to release this month. Please keep following up.

hamdimesbah • Apr 8 '20 • Edited

now i need just to know how to update any word in my panel view ..should i have some knowledge in vuejs or somthing ?

Tuan Duong • Apr 9 '20

Honestly, Laravue is not too suitable for the beginner. You should know the basic knowledge of Laravel and VueJS to start with it.

hamdimesbah • Apr 9 '20

good thanks ..i'll learn vue js

hamdimesbah • Apr 9 '20

hey bro..the problem is that i cannot find anything to change in file.vue..there is no text to change

Tuan Duong • Apr 9 '20

You should learn vuejs and vue18n (kazupon.github.io/vue-i18n/). Most texts are defined in github.com/tuandm/laravue/tree/mas...

hamdimesbah • Apr 9 '20

I dont need to switch language ...I use en...i need just to change words

Tuan Duong • Apr 9 '20

It's not switching language, it's the place to store text: github.com/tuandm/laravue/blob/mas...

hamdimesbah • Apr 9 '20

Aa ok..thank you very mush bro and sorry for all those many questions

Comment deleted

Tuan Duong • Apr 7 '20

It depends on your purpose. If you already know how Laravel/Vue works, you can use laravue-core and add component one by one. Otherwise, I suggest you use Laravue directly (github.com/tuandm/laravue) to have full features, then start working on each one.

Comment deleted

Tuan Duong • Apr 8 '20

@hamdimesbah
You can find current documentation at at doc.laravue.dev. We are working to create more guidelines.

Comment deleted

furqon • Jun 30 '19

Hi, This is great. Is there any chance to add ionic/capacitor so that vue can be bundled as apk?

Akila-Rumesh • Jan 26 '20

Mr.Tuan Duong, Could you please explain me how to add more roles ?

Tuan Duong • Jan 27 '20

@akilarumesh ,

I hope this document will help you: doc.laravue.dev/guide/development/.... Let me know if you have any concern.

Akila-Rumesh • Jan 27 '20

Thank you Mr.Tuan Duong. This is really awesome. Most important thing is you replying me.. Can we make another interface to add more roles ? Thank you again.