Giter Site home page Giter Site logo

cretueusebiu / laravel-nuxt Goto Github PK

View Code? Open in Web Editor NEW
1.2K 1.2K 263.0 639 KB

A Laravel-Nuxt starter kit.

Home Page: https://laravel-nuxt.cretueusebiu.com

License: MIT License

PHP 81.30% Vue 17.29% Shell 0.53% Blade 0.88%
laravel nuxt server-rendering spa ssr universal vue

laravel-nuxt's People

Contributors

atymic avatar benceszalai avatar cretueusebiu avatar dependabot[bot] avatar h37kouya avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

laravel-nuxt's Issues

_nuxt folder is missing

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?

Can't take Auth in store function.

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.

Any have an Apache configuration example ?

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?

How do I retrieve data from laravel backend using axios call?

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!

Error handling

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.

Is this project maintained anymore?

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.

Syntax error (class Settings { constructor() ...)

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?

Unable to register after new installation

@cretueusebiu

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?

problem with children routes

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

postmessage didn't send the token

I tried many times to login with socialite, but can't logged in to home.
Even tried to inspect with window.postmessage still the same.

Thank you

_nuxt/index.html is not found in directory

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

session management returns null

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?

Suggestion: Don't use @nuxtjs/router and override the default Nuxt routing functionality

@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.

Is laravel version tightly coupled?

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?

nuxt generate

Hi,in docs i'm not found settings for nuxtjs mode - generate ,it is possible in this project?

Login with github is not working

Uncaught (in promise) TypeError: Cannot read property 'focus' of null

I added these two at my .env

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=

UPDATE NUXT

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

How to Use laravel Echo with a Decoupled Laravel and Nuxt

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

Change the directory path of the pages

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)

Guard api

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

Production with Apache2

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

Question about SSR and the nodejs server

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.

Can't access OWN api endpoints

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.

New mutation handler doesn't work

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

Laravel + Nuxt same server nginx

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/*;```

Working with Laravel Dusk?

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).

Forms not working

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.

Error: Network Error

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 ?

Can't register

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?

Why Nuxt Router Module?

I felt like the way nuxt generates routes automatically by default was one of it's best features.

Problem with upath module

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?

how to deploy on server ?

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 ?

Mail from laravel has link to the api

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

Vuex-CRUD didn't work: Method [viaRemember] does not exist

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.

Problems with the i18n plugin and Nuxt 2.0.0

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

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.