creativetimofficial / vue-material-dashboard-laravel-bs4 Goto Github PK
View Code? Open in Web Editor NEWVue SPA Material template connected to working Laravel REST API with the help of json:api standard
License: MIT License
Vue SPA Material template connected to working Laravel REST API with the help of json:api standard
License: MIT License
Please answer the following questions for yourself before submitting an issue.
Fresh install should be working. It is currently not functional.
Fresh install gives multiple errors (api and possibly related js errors).
Please provide detailed steps for reproducing the issue.
found in
---> at src/pages/Dashboard/Layout/DashboardLayout.vue
at src/App.vue
4. One major error is that while it possible to log in, the json api does not work on retrieving user due to laravel auth api protection. Go to user profile page on the app and see that it is blank. See js error:
GET http://localhost/laravel-json-api/public/index.php/api/v1/me [HTTP/1.1 401 Unauthorized 43ms]
can you help me? :)
Please answer the following questions for yourself before submitting an issue.
Please describe the behavior you are expecting
What is the current behavior?
Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.
Please provide detailed steps for reproducing the issue.
Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
Please include any relevant log snippets or files here.
when trying to migrate i get this error:
Illuminate\Database\QueryException SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 1000 bytes (SQL: alter table users
add unique users_email_unique
(email
))
I try to correct using this: https://laravel-news.com/laravel-5-4-key-too-long-error
but in the public function boot there is already this line LaravelJsonApi::defaultApi('v1'); so I don't know well how to handle this.
Schema::defaultStringLength(191);
If I keep both then I get this error: Symfony\Component\Debug\Exception\FatalThrowableError : Class 'App\Providers\Schema' not found
Laravel JSON:API Project Installation
Vue Material Dashboard Project Installation
I have installed the files and the database.
I success to create some data when I attempt to register (I see the record in the database) but when I try to login with [email protected]/secret and with [email protected]/secret
Nothing happen
I am runing on Laragon with php 7.2.19 and with mysql 5.7.24
When I try to inspect the login page with Chrome and look at network I got "login" with status "pending"
I checked that laravel is running on server as it indicate in my terminal Laravel development server started: http://127.0.0.1:8000
my .env in the vue-material-dashboard is having this :
VUE_APP_APP_BASE_URL=http://192.168.1.20:8081/
VUE_APP_API_BASE_URL=http://127.0.0.1:8000/api/v1
I cannot login to Laravel API it error 400 (bad request)
please add detail for step 10,11
10.Add the "Laravel Password Grant Client" id to your .env file under the CLIENT_ID key
11.Add the "Laravel Password Grant Client" secret to your .env file under the CLIENT_SECRET key
Assuming I use Largon
I understand that to make this work I must not use "php artisan serve" command. When I use PHP ARTISAN SERVE I get the ip:port clearly indicated which I copy and use in .env config file on the frontend Vue side.
In this case I don't get any IP, what do I enter then for variable vor VUE_APP_API_BASE_URL ?
Currently mine are this one follow:
VUE_APP_APP_BASE_URL=http://192.168.1.20:8080/
VUE_APP_API_BASE_URL=http://localhost/laravel-json-api/public/api/v1
When I try to login I get a "Invalid credentials!" but when I look into the Laragon database table I see the admin and secret passowrd properly created into table and when I try to register I get a "Oops something went wrong"
Please answer the following questions for yourself before submitting an issue.
npm run dev not working
What is the current behavior?
ERROR Failed to compile with 1 error 5:52:38 AM
error in ./src/main.js
Syntax Error: Error: [BABEL] /var/www/html/laramd/vue-material-dashboard/src/main.js: @babel/preset-env: The plugins/built-ins 'es.array.iterator, es.promise, es.object.assign, es.promise.finally' passed to the 'exclude' option are not
valid. Please check data/[plugin-features|built-in-features].js in babel-preset-env (While processing: "/var/www/html/laramd/vue-material-dashboard/node_modules/@vue/babel-preset-app/index.js.overrides[0]$0")
at Generator.next (<anonymous>)
at Generator.next (<anonymous>)
at Generator.next (<anonymous>)
@ multi (webpack)-dev-server/client?http://172.16.200.96:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
If im on /login or any page if i refresh (f5) juts show error page 404: not found, instead of taking me to the beginning.So i need remove / path at url for return.
Any idea what is happening?
Node Version : 16.13.2
NPM Version: 8.1.2
PHP Version : 7.4
latest
Nginx file:
server {
listen 8080;
index index.php index.html index.htm;
server_name example.com;
return 301 https://example.com$request_uri;
}
server {
listen 443 ssl;
server_name example.com;
root /data/vue-material-dashboard-laravel/laravel-json-api/public;
ssl_certificate /etc/nginx/ssl/cert.pem;
ssl_certificate_key /etc/nginx/ssl/key.pem;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-Content-Type-Options "nosniff";
index index.php;
charset utf-8;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }
error_page 404 /index.php;
location ~ \.php$ {
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
include fastcgi_params;
}
# location ~ /\.(?!well-known).* {
# deny all;
# }
}
Ubuntu
server
firefox, latest
I use the npm command, output tells me to look at http://example.com:8081
Everything looks fine and login should be working with default given login
Do you maybe have a nice example of how nginx should server the app?
I could not find anything online. I tried running vue-material-dashboard over https by adding "vue.config.js":
module.exports = {
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8081, // CHANGE YOUR PORT HERE!
https: true,
hotOnly: false,
},
}
Then indeed everything goes through https but login does still not work. Any ideas why? Seems api does not communicatie well with vue
If we can let it all work on a linux server we woudl want to go and buy the PRO version eventually (after we tested it and so on)
api.php under route folder not include class
use Illuminate\Support\Facades\Route;
use CloudCreativity\LaravelJsonApi\Facades\JsonApi;
Please answer the following questions for yourself before submitting an issue.
able to log into the frontend, with user and password displayed on the login screen
I can enter the user and password, and I verified that user is in the users table. when I hit "Lets Go" I get a network error.
Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.
Please provide detailed steps for reproducing the issue.
Please provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.
at first I got a data undefined error, trying to read response.data when an exception occurs.
when I got the data undefined error, I added a check to Login.vue to check that response and response.data is defined before accessing the data component, and I log the exception to the console, ---it is a network error.
e: Error: Network Error
at createError (createError.js?2d83:16)
at XMLHttpRequest.handleError (xhr.js?b50d:83)
xhr.js?b50d:178 POST http://localhost:3000/api/v1/login net::ERR_CONNECTION_REFUSED
got these errors before I tried to login:
GET https://static.hotjar.com/c/hotjar-99526.js?sv=7 net::ERR_NAME_NOT_RESOLVED
VM2835 analytics.js:38 POST https://stats.g.doubleclick.net/j/collect?t=dc&aip=1&_r=3&v=1&_v=j88&tid=UA-46172202-1&cid=1170637701.1614098154&jid=581385674&gjid=2097573773&_gid=344549045.1614786264&_u=SACAAEAAQAAAAC~&z=184435371 net::ERR_NAME_NOT_RESOLVED
VM2835 analytics.js:38 POST https://stats.g.doubleclick.net/j/collect?t=dc&aip=1&_r=3&v=1&_v=j88&tid=UA-46172202-22&cid=1170637701.1614098154&jid=859596022&gjid=376057807&_gid=344549045.1614786264&_u=SACAAEABQAAAAC~&z=765413393 net::ERR_NAME_NOT_RESOLVED
no file api.php console.php and web.php under routes folder
step
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.