tuandm/laravue

Admin dashboard for enterprise Laravel applications built by VueJS and Element UI https://laravue.dev

Laravue

Laravue (pronounced /ˈlarəvjuː/) is a beautiful dashboard combination of Laravel, Vue.js and the UI Toolkit Element. The work is inspired by vue-element-admin with our love on top of that. With the powerful Laravel framework as the backend, Vue.js as the high performance on the frontend, Laravue appears to be a full-stack solution for an enterprise application level.

Documentation: https://doc.laravue.dev

Screenshot

Getting started

Prerequisites

• Laravue is positioned as an enterprise management solution, and it is highly recommended to use it to start from scratch.
• For existing Laravel project, you should check Laravue Core for integration.
• Your machine needs to be ready for the latest Laravel and Node.js.

Installing

Manual

# Clone the project and run composer
composer create-project tuandm/laravue
cd laravue

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

# Install dependency with NPM
npm install

# develop
npm run dev # or npm run watch

# Build on production
npm run production

Docker

docker-compose up -d

Build static files within Laravel container with npm

# Get laravel docker container ID from containers list
docker ps

docker exec -it <container ID> npm run dev # or npm run watch
# Where <container ID> is the "laravel" container name, ex: src_laravel_1

Open http://localhost:8000 (laravel container port declared in docker-compose.yml) to access Laravue

Running the tests

• Tests system is under development

Deployment and/or CI/CD

This project uses Envoy for deployment, and GitLab CI/CD. Please check Envoy.blade.php and .gitlab-ci.yml for more detail.

Built with

• Laravel - The PHP Framework For Web Artisans
• Laravel Sanctum - Laravel Sanctum provides a featherweight authentication system for SPAs and simple APIs.
• spatie/laravel-permission - Associate users with permissions and roles.
• VueJS - The Progressive JavaScript Framework
• Element - A Vue 2.0 based component library for developers, designers and product managers
• Vue Admin Template - A minimal vue admin template with Element UI

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, please look at the release tags on this repository.

Authors

• Tuan Duong - Initial work - tuandm.
• Tony Tin Nguyen - Frontend and Designer - nguyenquangtin.

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Related projects

• Laravue-core - Laravel package which provides core functionalities of Laravue.

Acknowledgements

• vue-element-admin A magical vue admin which insprited Laravue project.
• tui.editor - Markdown WYSIWYG Editor.
• Echarts - A powerful, interactive charting and visualization library for browser.

Donate

If you find this project useful, you can buy me a coffee

laravue's Issues

Responsive layout on mobile

User Register and Login Page

How can i create user registration and login page easily so that each new register use listed as user role only?

We need some icons for more context

http://laravue.cipherpols.com/#/icon/index
The current icons on laravue is a bit limited so I want to improve the quantities of it.

Tree tables don't load

https://laravue.dev/#/table/tree-table

problem to get laravel api route and that always get in laravel.blade.php as xhr(html)

Hi
Thank you for your Great work. That's very good.

So i have problem to get a laravel controller as a api. i try any ways for one weekend and so dissapointed. now i have one table name 'personal' is migrated true. that's have controller named 'app/Http/controllers/Api/PersonalController' and there class is 'app/Personal' and the resource are 'app/Http/Resources/PersonalCollection'. inside 'route/api.php' controller are routed true.
that's have on command 'php artisan route:list' true. so inside 'resources/js/api/tabel.js' i add the below code:
export function getPersonal() { return request({ url: '/personal', method: 'get', }); }
then create a vue component for test it like this:

so after run server and 'npm run watch' inside browser console have an error say TypeError: response.data is undefined and inside browser network personal are loaded as xhr couses and html type. that's header are passed OK but in Response are loaded laravue default page.
this page are routed on 'route/web.php' as {any}

i try other way like SPA, direct request, loaded axios inside component and etc but all wayes return this problem.

Homepage for FrontEnd Using SPA

Could you please guide me how can i create pages for Front-End in spa, which will allow to see for all. like, home, about, testimonials, contacts, etc etc. Thanks.

Unable to locate Mix file: /js/vendor.js

hello
First of all. Excelent Job!!!
project is ok but then i copy in my project
Unable to locate Mix file: /js/vendor.js

Why use JWT and not passport?

First of all I would like to congratulate you for the excellent work. I am studying it to put on a project person.

My question is regarding API authentication. I saw that you use "tymondesigns / jwt-auth". My question is why not use the laravel passport?

Sorry for my english, I'm using google translator.

Use Laravel Filesystem for ImageUpload component

fsevents vulnerability

So im doing everything prior and I get this error when I run npm install

https://pastebin.com/zdcMpVzQ

Fetching data to build form

First of all. Excelent Job!!!

I think my question will be covered in the docs. But I´ve been playing with laravue, I´d like to know wich is the best way to load data for selects to build a form. It´s not even a question directly related to laravue especifically, but I´d like your suggestion.

I found out, that the requests to the server api, are made from js files in the api folder. Do you think it would be better to make a js file to load all the information to use on the form, like form.js (loading select options, radio options all at once) ? The orther way would be creating related to the select itself like cities.js, to fill the cities select in the form?

I´m newbie in vue. Hope I´ve explained well my question. Sorry if it´s not the right place to discuss this kind of thing. Really thankfull for your work.

What's the port of the SPA?

Hello, after running npm run watch on the host machine, what is the url of the front-end?

I tried http://localhost, http://localhost:8000 but not working.

Do you have documentation right now? Thanks!

Can't Login after setup: Property "type" must be accessed

Hello!
Thank you for this awesome project - but i have a problem with the implementation of the framework in an existing Laravel Application. The Login page itself is working, but i can't login in the dashboard because of this errors:

Anybody an idea why this is happening?

Vue Version is: 2.6.10

500 Error on login

Hi it's me again... So ive have no installed it on my Homestead but cannot login, am I forgetting something?

api/auth/login 500 (Internal Server Error) (in console)

Request failed with status code 500

Lint error

Hello,

can you help plz?

npm run lint -- --fix
npm ERR! missing script: lint

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/stevanaleksic/.npm/_logs/2019-07-31T10_16_47_164Z-debug.log

Problem with migration. "setup_role_permissions

Following the first steps I have a problem when doing the first migration

After doing: php artisan migrate --seed

I'm using SQL Server. Some tables are created succesfully but in the step "setup_role_permissions" I receive the following error:

PS C:\path\laravue> php artisan migrate:fresh --seed
Dropped all tables successfully.
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table
Migrating: 2019_03_16_102314_add_simple_role_to_user_table
Migrated:  2019_03_16_102314_add_simple_role_to_user_table
Migrating: 2019_04_20_125200_create_permission_tables
Migrated:  2019_04_20_125200_create_permission_tables
Migrating: 2019_04_20_130706_setup_role_permissions

   Illuminate\Database\QueryException  : SQLSTATE[42000]: [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]The object 'DF__users__role__20C1E124' is dependent on column 'role'. (SQL: alter table "users" drop column "role")

  at C:\path\laravue\vendor\laravel\framework\src\Illuminate\Database\Connection.php:664
    660|         // If an exception occurs when attempting to run a query, we'll format the error
    661|         // message to include the bindings with SQL, which will make this exception a
    662|         // lot more helpful to the developer instead of just the database's errors.
    663|         catch (Exception $e) {
  > 664|             throw new QueryException(
    665|                 $query, $this->prepareBindings($bindings), $e
    666|             );
    667|         }
    668|

  Exception trace:

  1   PDOException::("SQLSTATE[42000]: [Microsoft][ODBC Driver 17 for SQL Server][SQL Server]The object 'DF__users__role__20C1E124' is dependent on column 'role'.")
      C:\path\laravue\vendor\laravel\framework\src\Illuminate\Database\Connection.php:458

  2   PDOStatement::execute()
      C:\path\laravue\vendor\laravel\framework\src\Illuminate\Database\Connection.php:458

  Please use the argument -v to see more details.

vendor.js is huge even after npm run prod

你这是直接照抄vue-element-admin啊？

vue-element-admin，你这富文本编辑器的文档都和他一样，抄袭好歹改一改？

Webpack (watch) takes too much time to compile - 30-40s

laravue & swoole?

Is there a plan to be compatible with "swooletw/laravel-swoole" due to some performance reasons of laravel?

whiteList no auth routes does not support Dynamic Route Matching

the whiteList constant in permission.js does not support vue-router Dynamic Route Matching and redirect password-reset/:token to /login
here are permission.js and router/index.js

Docs?

The first.... AWESOME PROJECT AND WORK!

Just a question, where can I find documentation? Will be helpfully for create new pages or components.

Thanks!

New install: First login result in "Request failed with status code 404"

Hi,

After of first installation, when I try to login with default credentials I receive an error message with this text:
"Request failed with status code 404"
and I can't login in app.

I have checked .env configuration and it seems correct. There isn't any error in log either.

can't find the articles api route config

Hi, I'm having trouble finding the endpoint config of the articles route.
I was expecting it to be in the routes/api file.

Will you add new feature？

The project I have been looking for for a long time has finally appeared.
First of all, thank you very much for your contribution.

Especially users, role, permission and routing，example use the package of spatie/laravel-permission ? Because adding these is like a perfect system.I really hope that you can add these features.

First run error with application encrytion key

On the first time you run there should be error
RuntimeException No application encryption key has been specified.

We can use this to fix the error

php artisan key:generate
php artisan config:cache

App blank when deploying to heroku

The app is beautiful, and it runs flawlessly on local. When deploying to Heroku it just returns a blank page. DB was seeded successfully. Error in the console is "Uncaught SyntaxError: Unexpected token <"

Question - control premissions add - edit - delete

Hello Bro ,
Thank you for perfect admin panel , it's really helpful .

i have question about roles and premissions please .

Where can i control role or premissions add - edit - delete ??

error npm install

ENOENT: no such file or directory, open '/Users/newowner/laravue/node_modules/.staging/@types/jquery-fc08fbbe/JQueryStatic.d.ts'
npm ERR! Error while executing:

Npm install

I cant seem to get project to work,
After I install all(node-sass always fails), and I try npm run dev, it throws a complain that It cant find node-sass.

ive tried "sudo npm install --save-dev --unsafe-perm node-sass"

I use a linux. ive granted all permissions on the node_modules folder recursively. seeing this project im so eager t test it but wont work for me.

Sorry for the noob question by the way

Usage?

First of all, the admin panel looks fantastic! We've just started using Vue JS as SPA application on top of Laravel, so this looks perfect.

My question (and I'm not sure this is the right place to ask it), is when will this be packaged into a library, so that we don't have all the components and laravue code throughout the application.

I wanted to be able to use this for a project, but it'll be quite difficult to differentiate our code from laravue. Also, do you have any guidance/docs for how to create new pages, update the nav, etc, to get started? Thanks in advance.

API Call not hitting controller

I have created an api route to get a list of items. I have added the route to the routes/api file. I added a method to my api/projects.js file. I then created a method on my index.vue file to get the data. However, it doesn't appear to be hitting my controller method at all. I keep getting this in response, "No query results for model [App\Laravue\Models\Product\Product] manufacturers". I have tested the query that is being used in the method and it returns data. I tried a dd() inside the method and nothing happened. It seems like it isn't hitting the method at all. Below is the code I have used.

index.vue
async getManufacturers() { const { data } = await productResource.manufacturers(); this.manufacturers = data; }

projects.js
manufacturers() { return request({ url: '/' + this.uri + '/manufacturers', method: 'get', }); }

api.php
Route::get('products/manufacturers', 'ProductController@manufacturers');

ProductController.php
public function manufacturers() { dd('Hello'); }

Am I missing something?

Laravel mix - extractVueStyles does not work

Scss/css from Vue components are unable to extract along with app.css

Vendor extraction doesn't work with dynamic import

Reference: laravel-mix/laravel-mix#1870

php artisan migrate --seed (SQLSTATE[HY000] [2002] Connection refused)

Tooling Versions: FF quantum 68.0.1, npm 6.9.0, composer 1.9.0, Laravel Framework 5.8.13.

When running php artisan migrate --seed I get this error.
If you like I can post the verbose output.

   Illuminate\Database\QueryException  : SQLSTATE[HY000] [2002] Connection refused (SQL: select * from information_schema.tables where table_schema = homestead and table_name = migrations)

  at /root/PROJECTS_RAND/vue_demos/vue_blog_demo/laravue/vendor/laravel/framework/src/Illuminate/Database/Connection.php:664
    660|         // If an exception occurs when attempting to run a query, we'll format the error
    661|         // message to include the bindings with SQL, which will make this exception a
    662|         // lot more helpful to the developer instead of just the database's errors.
    663|         catch (Exception $e) {
  > 664|             throw new QueryException(
    665|                 $query, $this->prepareBindings($bindings), $e
    666|             );
    667|         }
    668| 

  Exception trace:

  1   PDOException::("SQLSTATE[HY000] [2002] Connection refused")
      /root/PROJECTS_RAND/vue_demos/vue_blog_demo/laravue/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

  2   PDO::__construct("mysql:host=127.0.0.1;port=3306;dbname=homestead", "homestead", "secret", [])
      /root/PROJECTS_RAND/vue_demos/vue_blog_demo/laravue/vendor/laravel/framework/src/Illuminate/Database/Connectors/Connector.php:70

This issue prevents me from logging into the dashboard with the developer account and presents as a (500) invalid server error.

I have changed DB_HOST=127.0.0.1 to DB_HOST=localhost in the .env file [1] but this did not resolve my issue.

[1] https://stackoverflow.com/questions/43804784/database-laravel-php-artisan-migrate-connection-refused

Laravel 6.0 LTS support

Hi!

First, thanks a lot, is a great work you did here. I'm still doing some things to adapt to my needs but that is another matter.

Laravel 6.0 is out, and i would like to do things on that version, there is a near plan to support it?

Thanks!

Error log component

https://vuejs.org/v2/api/#errorHandler

Usiny Element UI Icons in Sidenav

I can not get any Elelemt UI icons working in the side navigation

meta: { title: 'Import', icon: 'el-icon-upload', noCache: true },

This doesn't who the upload icon. if I use the standard icons this works fine is there documentation to how I declare these el-icons inside a meta grouping?

User profile page

New routes resulting in 404

I am trying to implement a "Create" and "Edit" button that will open the desired page. I set the routes up the same as it is done in the admin routes file for articles/create and articles/edit. However, when I click on the button I get a 404 response. I am not seeing a route set up for articles/create yet it still works. Am I missing something here?

Here is my router module:
`import Layout from '@/layout';

const productsRoutes = {
path: '/products',
component: Layout,
redirect: '/products/catalog',
name: 'Products',
alwaysShow: true,
meta: {
title: 'Products',
icon: 'shopping',
permissions: ['view menu products'],
},
children: [
{
path: 'catalog',
component: () => import('@/views/products/List'),
name: 'Catalog',
meta: { title: 'Catalog', icon: 'list', noCache: true },
},
{
path: 'products/create',
component: () => import('@/views/products/Create'),
name: 'CreateProduct',
meta: { title: 'createProduct', icon: 'edit', permissions: ['manage products'] },
hidden: true,
},
{
path: 'products/edit/:id(\d+)',
component: () => import('@/views/products/Edit'),
name: 'EditProduct',
meta: { title: 'editProduct', noCache: true, permissions: ['manage products'] },
hidden: true,
},
],
};

export default productsRoutes;`

Here is the code for the button to open the page:
<router-link :to="'/products/edit/'+row.id"> <el-button type="primary" size="small" icon="el-icon-edit" v-permission="['manage products']"> Edit </el-button> </router-link>

SyntaxError: invalid regexp group, but works fine in chrome/brave

Hey thank you for creating this project.
I did go through all of the steps to create the project.
I also did run dev and production.

The thing is that it does not work in firefox.
It gives me the following error: SyntaxError: invalid regexp group in the console. The page itself is blank.
Where as when I run it in chrome-based browsers (like chromium or brave) it works.
I am using php artisan serve to run the it in localhost.

I am running manjaro-linux.

Wave directive not working

Hello,
First thank you for the awesome work,
I noticed a small issue with the wave directive, If you go in administrator > Users tab, the waves directive isn't working, no error just no effect.

PanThumb has weird bottom border on dashboard

New Install - 405 on Login

On first install (after key gen and config:cache):

php artisan:serve

Attempting to login via default credentials results in a 405 error.

message: "The POST method is not supported for this route. Supported methods: GET, HEAD."

Route: /auth/login

RTL Support

Hi, i wanna say thanks for amazing work and i have a question about do you have plan for add rtl support to this project b coz some language same Persian or Arabic need it.
Best Regards.

Specified key was too long; max key length is 767 bytes

Before runing
php artisan migrate --seed
try adding Schema::defaultStringLength('191') to the AppServiceProvider, or you might face problems migrating.

Breadcrumbs don't work for some path

Open https://laravue.dev/#/nested/menu1/menu1-1
you see in breadcrumbs the following:
dashboard / nested / menu1 / menu1-1
"nested" works well, but if you click "dashboard" or "menu1" nothing happens and you get an error in browser console.

A few questions

Not an issues - but where can we post questions?

A. Is there a blank starter without all the mock data and preset routes? If not what is safest way to strip out all pre-built routes etc?
B. The project is an SPA which loads the admin panel directly correct? What would be best option to route to a public front end that loads instead of the dashboard before the admin login? This way we can just link to the Dashboard login?

The documentation is great, thanks for hard work.

Issue with latest IE (version 11)

I thought that issue is only for local version, but error in console you can see also https://laravue.dev.

Scripts, that was built by webpack, are not minified in my local version, and seems issue is related with ./node_modules/camelcase/index.js.

to be more accurate, this part

` const preserveCamelCase = string => {
let isLastCharLower = false;
let isLastCharUpper = false;
let isLastLastCharUpper = false;

	for (let i = 0; i < string.length; i++) {
		const character = string[i];

		if (isLastCharLower && /[a-zA-Z]/.test(character) && character.toUpperCase() === character) {
			string = string.slice(0, i) + '-' + string.slice(i);
			isLastCharLower = false;
			isLastLastCharUpper = isLastCharUpper;
			isLastCharUpper = true;
			i++;
		} else if (isLastCharUpper && isLastLastCharUpper && /[a-zA-Z]/.test(character) && character.toLowerCase() === character) {
			string = string.slice(0, i - 1) + '-' + string.slice(i - 1);
			isLastLastCharUpper = isLastCharUpper;
			isLastCharUpper = false;
			isLastCharLower = true;
		} else {
			isLastCharLower = character.toLowerCase() === character && character.toUpperCase() !== character;
			isLastLastCharUpper = isLastCharUpper;
			isLastCharUpper = character.toUpperCase() === character && character.toLowerCase() !== character;
		}
	}

	return string;
};`

And seems issue is with const declaration.

I've have done some research, tried one on the babel plugins, but that doesn't work for me.

Screenshot from my local version
https://www.screencast.com/t/AtYN0vMfR

and from the demo, that you have hosted
https://www.screencast.com/t/LAXTXoqT2cfq

And navigating through error I'm getting to line
https://www.screencast.com/t/GuShyy70VSIm

Any solution, that you can suggest please ?

just a question

hello, I know that this in not an issue, but if i want to add new item in menu, or remove some one, which file I should edit?
I new how to create files and add them to route
thank you all :)