cretueusebiu / laravel-nuxt Goto Github PK
View Code? Open in Web Editor NEWA Laravel-Nuxt starter kit.
Home Page: https://laravel-nuxt.cretueusebiu.com
License: MIT License
A Laravel-Nuxt starter kit.
Home Page: https://laravel-nuxt.cretueusebiu.com
License: MIT License
Nuxt compiles his file into .nuxt
directory in the root and builds it to .nuxt/dist
, so _nuxt
folder inside public
doesn't created, that's why this error appeared:
ErrorException (E_WARNING)
file_get_contents(D:\OSPanel\domains\ln.ll\public\_nuxt/index.html): failed to open stream: No such file or directory:
Route::get('{path}', function () {
return file_get_contents(public_path('_nuxt/index.html')); // <----
})->where('path', '(.*)');
Did you try to make clean installation step by step following readme
? Or maybe there's some missing content for settings?
When I try a take User identification (user_id) in function store(), then Auth sends the blank page. I try to check Auth, but this shows me to I'm not logged. I don't have an idea why this is not working, in function index() or show(), this working pretty well, showed me as logged.
First of all, thanks for this boilerplate. I'm finished the my own project. And finally I deploy it to an apache server. Run command npm run start
and then it listening "domain.name:3000". But I want to the not show the port number.
I tried everything but failed. Is there an apache configuration example for this?
Hi there, I have a simple question about this project. I am trying to use it as a template to migrate my vue-laravel project to a nuxt-laravel project. Now I need to get some data from laravel backend to display it in my component but I am struggling to understand where to define the route to reach my laravel backend.
I tried it like this here:
Frontend axios call:
async asyncData ({ $axios }) {
if (process.server) {
return $axios.$get('/api/data')
.then((res) => {
this.data = res.data;
})
}
}
Backend call in api.php:
Route::get('/data', 'HomeController@index');
But I am constantly getting a 404 in any way I try to define the route ...
Do I need to add something into vue-router?
If yes how do I define a route that does not call a specific component but only pulls data from backend?
If no what do I need to do otherwise?
I would be grateful for some example that I can work with to get this to work :)
Thanks in advance!
Hi great work once again. When I submit a form without entering anything (or invalid details) i get a 422 (Unprocessable Entity) from laravel and async promises error in the console but I managed to fix async error with try and catch. Could you help me fix the 422 error, it seems like its being sent from laravel when validation is wrong but I'm not sure where to catch it.
Hi, do you think it's easy to implement Laravel Echo Broadcasting with this app?
Thanks
Why you need redirects in web.php file? Also, _nuxt/index.html does not exists.
It seems like this project is no longer maintained, it's been a year since any commits where pushed and in that time Nuxt has been updated drastically. And laravel has also been updated. It also seems that question and issues are going completely unanswered.
If it is unmaintained I don't want to blame anyone for it, I get that everyone gets busy but it would be nice to know upfront if that is the case so that people can make decisions if they want to spend the time update the package themselves, deal with out of date versions, or even try to find another solution.
In nuxt.config.js in the plugins array I try to add a plugin pstephan1187/vue-datatable (it uses ES6 syntax)
After this I get error in IE10, IE11 - Syntax error (class Settings { constructor() ...)
How can I transform ES6 to ES5 in plugins block?
ssr directive is deprecated
https://nuxtjs.org/guide/plugins#client-side-only
Use
{ src: '~plugins/bootstrap', mode: 'client' }
instead of
{ src: '~plugins/bootstrap', ssr: false }
in https://github.com/cretueusebiu/laravel-nuxt/blob/master/client/nuxt.config.js
@cretueusebiu thanks for this repo...it's much needed!
Can we upgrade to Laravel 5.8.x?
I went through the usual steps in the README and I am trying to get this repo to work on my dev machine in SSR mode. I have npm run dev running on localhost:3000 and php artisan serve running on localhost:8000
However, I keep seeing a "Network Error: An error occurred while rendering the page. Check developer tools console for details." when I enter data at and try to register from http://localhost:3000/register
The console.logs show:
Unchecked runtime.lastError: The message port closed before a response was received.
register:1 Access to XMLHttpRequest at 'http://localhost/api/register' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
vendors.app.js:17293 error Error: Network Error
at createError (commons.app.js:762)
at XMLHttpRequest.handleError (commons.app.js:297)
value @ vendors.app.js:17293
value @ vendors.app.js:17293
value @ vendors.app.js:17293
(anonymous) @ vendors.app.js:17293
push../.nuxt/client.js.vue__WEBPACK_IMPORTED_MODULE_18__.default.config.errorHandler @ app.js:311
globalHandleError @ commons.app.js:13274
handleError @ commons.app.js:13243
(anonymous) @ commons.app.js:13260
Promise.catch (async)
invokeWithErrorHandling @ commons.app.js:13260
invoker @ commons.app.js:13583
original._wrapper @ commons.app.js:18306
Btw I went through the usual steps in the README, and made the following changes:
.env file:
APP_URL=http://localhost:8000
CLIENT_URL=http://localhost:3000
nuxt.config.js (commented out mode: 'spa'
module.exports = {
// mode: 'spa', // Comment this for SSR
Not sure if there's something missing in the install instructions but I haven't been able to get it to work today. I'm not sure but I think it was working before? Is something missing from what you can see here?
my parent/child route like this in router,js:
{
path: '/admin/base',
component: Navs,
children: [
{path: 'breadcrumbs', component: Breadcrumbs},
{path: 'cards', component: Cards}
]
},
when i navigate to admin/base/breadcrumbs my app got a error like this:
Converting circular structure to JSON
i want to understand why this problem occured
Is their any planned update to migrate to Laravel 5.6?
I have setup everything and it says in the installation section and my app URL is http://127.0.0.1:8888/nuxt/api but each time I register or log in I get 404! any suggestions or help?
im getting this error
file_get_contents(C:\Users\uriah\sites\www\laravel-nuxt\public\_nuxt/index.html): failed to open stream: No such file or directory
there suppose to be a folder of _nuxt and index.html but there is none,
may i know if that is generated dynamically or its static
Is it possible to use sessions with laravel in this project? The session is not persistent, for each request a new one is generated without taking into account the previous one. Does not generate cookie laravel_session.
I save with: session(['languages' => $all_languages])
and read with $all_languages = session('languages') but it always returns null.
What is the best way to work with sessions?
@cretueusebiu thanks for sharing this repo, we thank you for it.
THis is just a suggestion, and I've seen the comment here:
#33
What is the advantage of using this module: https://github.com/nuxt-community/router-module with a router.js file instead of auto-route generation from the pages/ directory?
Instead of overriding the default nuxt routing config functionality, why not add aliases or register custom routes instead of using @nuxtjs/router
This will allow this repo to be more compliant with other nuxt code, allowing us to copy paste from other repos into our application.
public/.htaccess is not working on ssr mode.
where do I add htaccess when using ssr?
First of all, thank you for creating this project.
I played around with it and wanted to know if laravel version is tighly coupled to the nuxt version. can it be upgraded to 5.8 without breaking anything?
I think the problem is similar to this issue. I have educated it. but I don't know how to implement with my project. Can you help me?
Hi,in docs i'm not found settings for nuxtjs mode - generate ,it is possible in this project?
Uncaught (in promise) TypeError: Cannot read property 'focus' of null
I added these two at my .env
GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
When do you plan to update next.js to 2.3.4 ?
I uploaded this on a VPS server.
after configuring .env I did
npm run build
npm run start
it outputs on console http://localhost:3000
but when I access it using my VPS IP like http://xxx.xx.xx.xxxx:3000
it does not work.
Not an issue, more of a question.
Is it feasible for Laravel Spark to integrate with laravel-nuxt?
Thanks for what seems to be a fantastic package.
Hi!
I try to update nuxt and it is giving me problems.
npm install nuxt@^2.6.3
It is possible to upgrade to version 2.6.3 ?
I have to do some extra configuration?
Thanks
On the Documentation of Laravel Echo, we need the csrf token
Any Help with this?
First Question if disbling csrf token , the best choice?
Or We need to make an endpoint to fetch on the initial page load
The Csrf token and simply add it to your store...
I wanna here your reaction to this approach... and ho w you would do it on your SSR version that is decoupled laravel and nuxt
Token will expire immediately when I try to refresh the page. I do not know if it's due to my application malfunction or whether it's normal for the token.
Thank you.
how to change the directory path of the pages. (client -> pages -> auth -> index.vue)
to the directory resources views of laravel (resources -> views -> auth -> index.vue)
In production is there a way to stop user from accessing api.****. For example if I type in api.laravel-nuxt.test/login in the browser, i should be presented with a 404 page
Hey, Thank you so much for your lovely boilerplate.
We are using it in a mid-sized project and all good so far.
Would you provide some guidelines on how to deploy to prod using apache2 instead of nginx?
Thanks again
Hi !
Thank you for this amazing package! :D
I am fairly new to vuejs, Nuxtjs SSR with Laravel and I have a hard time understand how it works. Since I am using Laravel on my server to do all the backend stuff, do I need to have another server with nodejs running and if yes, is the only purpose of that nodejs server, to serve server side rendered files ? It wont deal with autorisation and authentication at all?
Thank you for your time.
I was testing and trying your start template but unable to connect or access the api endpoints even accessing it via browser like http://localhost:3000/test which I put
Route::get('/test', function(){
return ['a' => 'data a','b' => 'data b'];
});
the login returns "Unhandled promise rejection " because of 404.
Hi, I created a mutation function in store/auth with action, getter and a state but when i called the getter function i get a null value. I debugged it and it seems like mutation is never called, any idea as to why or am I doing it wrong?
this is my code
import axios from 'axios'
export const state = () => ({
name: null
})
export const getters = {
name: state => state.name
}
export const mutations = {
FETCH_DETAILS_SUCCESS (state, name) {
state.name = name
}
}
export const actions = {
async getName ({ commit }) {
try {
const { data } = await axios.get('/username')
commit('FETCH_DETAILS_SUCCESS', data)
} catch (e) {
// log error
}
}
}
And in my vue component I did this
computed: mapGetters({
name: 'auth/name'
}),
created () {
//it returns null
console.log(this.name)
},
Although when i change your fetchUser async call to get username instead of user it works but my new function doesn't work and all return null
Hello, Yusuf!
I using your laravel-nuxt starter project and the my question is How I run laravel api server and nuxt client in the same server. I found this example in https://nuxtjs.org/faq/nginx-proxy/, but it use forge. I`m using DigitalOcean to host my website with ubuntu18.04. I would like run laravel and nuxt on it.
# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/YOUR_WEBSITE_FOLDER/before/*;
map $sent_http_content_type $expires {
"text/html" epoch;
"text/html; charset=utf-8" epoch;
default off;
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name YOUR_WEBSITE_DOMAIN;
# FORGE SSL (DO NOT REMOVE!)
ssl_certificate /etc/nginx/ssl/YOUR_WEBSITE_FOLDER/258880/server.crt;
ssl_certificate_key /etc/nginx/ssl/YOUR_WEBSITE_FOLDER/258880/server.key;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA:!3DES';
ssl_prefer_server_ciphers on;
ssl_dhparam /etc/nginx/dhparams.pem;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
charset utf-8;
gzip on;
gzip_types text/plain application/xml text/css application/javascript;
gzip_min_length 1000;
# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/YOUR_WEBSITE_FOLDER/server/*;
location / {
expires $expires;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_redirect off;
proxy_read_timeout 1m;
proxy_connect_timeout 1m;
proxy_pass http://127.0.0.1:3000; # set the adress of the Node.js
}
access_log off;
error_log /var/log/nginx/YOUR_WEBSITE_FOLDER-error.log error;
location ~ /\.(?!well-known).* {
deny all;
}
}
# FORGE CONFIG (DOT NOT REMOVE!)
include forge-conf/YOUR_WEBSITE_FOLDER/after/*;```
When you run Laravel Dusk, Dusk will swap the .env file. This doesn't work with the way laravel-nuxt
works with php artisan serve. Also, using nuxt in production mode won't work because Vue warnings and some other debug stuff don't work without nuxt dev server (I checked).
I have a completely blank, not modified version of this project, latest release, and I can not get any of the forms to work. Looking at the network request it shows that it is sending a request to the server as a OPTIONS request.
The problem though is that when I use postman to make the request to the server I get a 500 error about missing a _nuxt/index.html file. But when I add the Accept: application/json header to the request it works perfectly. But I can not find how to add this header to all the form request.
hi i am use you repository.
And i do all steps you write in readme - Installation
i use OpenServer
but when i try click come button (register or log in) i see Error: Network Error.
ca you help me with that ?
how to test SSR in laravel/homestead?
thx
Hi. I've followed instructions to change mode to spa, done some migrations and just tested register. It isn't working. I'm getting 500 error in console. I've found there are bad(?) routes to register and login. Changed it to:
Route::post('login', 'Auth\LoginController@attemptLogin'); Route::post('register', 'Auth\RegisterController@register');
attemptLogin yet exists. Register looks like that:
`public function register(Request $request){
if(!Validator::make($request, [
'name' => 'required|max:255',
'email' => 'required|email|max:255|unique:users',
'password' => 'required|min:6|confirmed',
]))
return response([
'status' => 'error',
'msg' => 'Validation failed'
], 400);
$user = new User;
$user->email = $request->email;
$user->name = $request->name;
$user->password = bcrypt($request->password);
$user->save();
return response([
'status' => 'success',
'data' => $user
], 200);
}`
Another log(which means nothing to me):
Error: Request failed with status code 500
at FtD3.t.exports (vendor.7f943d49379b19889618.js:2)
at t.exports (vendor.7f943d49379b19889618.js:2)
at XMLHttpRequest.d.(anonymous function) (http://localhost:8000/_nuxt/vendor.7f943d49379b19889618.js:2:90914)
How to make register and login work?
I felt like the way nuxt generates routes automatically by default was one of it's best features.
api.jerico.xyz/oauth/github/callback?code=8f153b514f42bd6d5c11:6 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3000') does not match the recipient window's origin ('http://jerico.xyz').
Hi, I'm testing AVA with sample code from https://nuxtjs.org/examples/testing I have encountered an error: failed to resolve "@ nuxtjs / router"
I do not know what the problem is coming from. Please help me
I'm running WAMP on Win 10 using yarn 1.9.4
and node 10.8.0
.
I ran composer create-project --prefer-dist cretueusebiu/laravel-nuxt
as per your readme and that was all fine.
I was able to migrate the database tables as well.
When I came to yarn
, I got this error:
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=4 <=9".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
I guess I'm using the wrong version of Node, but is there a way around this if I want to use Node > 9.x.x?
node version: v9.11.1
php ver: PHP 7.1.16
npm ver: 5.6.0
when i deploy on hosting i got a error like this :
"file_get_contents(/home/tmediair/public_html/public/_nuxt/index.html): failed to open stream: No such file or directory"
my question is a there any complete guide to deploy laravel-nuxt on hosting ?
In header of the letters (recover password, etc) in header of the letter
<td class="header" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; padding: 25px 0; text-align: center;">
<a href="http://api.my-site.local" style="font-family: Avenir, Helvetica, sans-serif; box-sizing: border-box; color: #bbbfc3; font-size: 19px; font-weight: bold; text-decoration: none; text-shadow: 0 1px 0 white;">
My App Name
</a>
</td>
</tr>
In .env
:
APP_URL=http://api.my-site.local
CLIENT_URL=http://my-site.local
The link could be to the env.CLIENT_URL
not to env.APP_URL
Hi.
I tried use library https://github.com/JiriChara/vuex-crud with your package. But when I call to api I get 500 error:
message: "Method [viaRemember] does not exist.", exception: "BadMethodCallException",…}
exception: "BadMethodCallException"
file: "/var/www/varus/vendor/tymon/jwt-auth/src/JWTGuard.php"
line: 445
message: "Method [viaRemember] does not exist."
So, as I understand I should use axios from nuxt plugin. But if I try something like:
import createCRUDModule from 'vuex-crud';
import axios from 'axios'
const crudModule = createCRUDModule({
resource: 'domain',
urlRoot: '/domain',
client: axios
});
const state = () => crudModule.state;
const { actions, mutations, getters } = crudModule;
export {
state,
actions,
mutations,
getters
};
It is not working. How can I adjust it? Or how can I put right interceptors.request?
Update. I try: client: window.$nuxt.$axios
( as described: nuxt-community/axios-module#28 and JiriChara/vuex-crud#19 ) but it is not work too.
I am having problems with translating some keys after I upgraded to version 2.0.0 of Nuxt. As much as I define the translation of the text in json, the translation of the site is partially done, ie it is as if the plugin read only half of the json. Any idea what might be happening?
Did you even try to update the project?
Follows an image with the error given in the console
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.