skyrpex / laravel-nuxt-js

Build a SPA with Laravel and Nuxt.

Warning: this project has been deprecated

laravel-nuxt was created to offer some sugar when working locally with Laravel+Nuxt, solving some cookie problems in the process. Today, it isn't necessary anymore.

We recommend using Laravel Sanctum, which plays nicely with SPAs (see Sanctum's SPA Authentication section). If you can't migrate, just keep using laravel-nuxt.

Laravel Nuxt JS

This package allows you to build a SPA with Laravel and Nuxt.

I'm currently very busy so don't expect updates anytime soon. Please, check out m2sd/nuxt-laravel which is based on this repository but it's more active.

Installation

npm install laravel-nuxt

Attention! You must install the laravel-nuxt PHP package first.

Getting Started

Optionally, you will want to get rid of the default Laravel scaffolding.

Add a script to your package.json like this:

{
    "scripts": {
        "start": "laravel-nuxt"
    },
}

Wrap you nuxt.config.js's export with laravelNuxt:

const laravelNuxt = require("laravel-nuxt");

module.exports = laravelNuxt({
  // Your Nuxt options here...
  modules: [],
  plugins: [],

  // Options such as mode, srcDir and generate.dir are already handled for you.
});

Populate resources/nuxt/pages/index.vue inside your project:

<template>
  <h1>Hello {{ name }}!</h1>
</template>

<script>
export default {
  data: () => {
    return { name: 'world' };
  },
};
</script>

And then run:

npm start

Go to http://localhost:8000.

Commands

Development

laravel-nuxt dev

Starts both Nuxt and Laravel artisan servers in development mode (hot-module reloading, error reporting, etc).

Production

laravel-nuxt build

Compiles the application for production deployment.

This command will output the compiled assets in public/_nuxt.

Analysis

laravel-nuxt build -a

Launch webpack-bundle-analyzer to optimize your bundles.

Other

Getting rid of the default Laravel scaffolding

The default Laravel installation comes with some frontend files which are not needed anymore.

You can remove the following files and directories:

• resources/assets/
• package.json
• package-lock.json
• webpack.mix.js

laravel-nuxt-js's Issues

Change public to public_html

How i can change generate dir "public/_nuxt -> public_html/_nuxt"?

TypeError: Cannot read property 'compilation' of undefined

I am having this error while I run build

> @ build F:\temp\nuxtLaravel
> laravel-nuxt build

  nuxt:build Building... +0ms
» baseURL: /                                                                                                                                                      nuxt:axios 16:31:12
» browserBaseURL: /                                                                                                                                               nuxt:axios 16:31:12
  nuxt:build App root: F:\temp\nuxtLaravel\resources\nuxt +0ms
  nuxt:build Generating F:\temp\nuxtLaravel\.nuxt files... +0ms
  nuxt:build Generating files... +30ms
  nuxt:build Generating routes... +16ms
  nuxt:build Building files... +125ms

 ERROR 

  TypeError: Cannot read property 'compilation' of undefined

  - ProgressPlugin.js:211 ProgressPlugin.apply
    [nuxtLaravel]/[webpack]/lib/ProgressPlugin.js:211:19

  - Tapable.js:375 Compiler.apply
    [nuxtLaravel]/[nuxt]/[tapable]/lib/Tapable.js:375:16

  - webpack.js:33 webpack
    [nuxtLaravel]/[nuxt]/[webpack]/lib/webpack.js:33:19

  - builder.js:524 compilers.compilersOptions.map.compilersOption
    [nuxtLaravel]/[nuxt]/lib/builder/builder.js:524:24

  - Array.map

  - builder.js:523 Builder.webpackBuild
    [nuxtLaravel]/[nuxt]/lib/builder/builder.js:523:39

  - builder.js:168 Builder.build
    [nuxtLaravel]/[nuxt]/lib/builder/builder.js:168:16


TypeError: Cannot read property 'compilation' of undefined
    at ProgressPlugin.apply (F:\temp\nuxtLaravel\node_modules\webpack\lib\ProgressPlugin.js:211:19)
    at Compiler.apply (F:\temp\nuxtLaravel\node_modules\nuxt\node_modules\tapable\lib\Tapable.js:375:16)
    at webpack (F:\temp\nuxtLaravel\node_modules\nuxt\node_modules\webpack\lib\webpack.js:33:19)
    at compilers.compilersOptions.map.compilersOption (F:\temp\nuxtLaravel\node_modules\nuxt\lib\builder\builder.js:524:24)
    at Array.map (<anonymous>)
    at Builder.webpackBuild (F:\temp\nuxtLaravel\node_modules\nuxt\lib\builder\builder.js:523:39)
    at Builder.build (F:\temp\nuxtLaravel\node_modules\nuxt\lib\builder\builder.js:168:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build: `laravel-nuxt build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Sharif\AppData\Roaming\npm-cache\_logs\2019-06-24T10_31_20_211Z-debug.log

npm start doesn't generate _nuxt folder

I was all day trying to make this package work, but the only way i could make it work was using npm run build and then npm start, obviously that's isn't confortable to work, it should work with npm start and rebuild automatically as i make changes on the code.

Aparently, npm start is detecting changes and all, but is generating all files in the .nuxt folder, not in the _nuxt folder, so i get an error like file_get_contents(/my-project/public/_nuxt/index.html): failed to open stream: No such file or directory.

I've tried with starter projects, like areindl/laravel-nuxt-starter-project
and a few others, but i always face the same problem.

I'm not sure if the problem is about nuxt or is that i'm using linux.

Anyone got the same problem?

Thoughts on v2

I don't have time lately but I was thinking on the v2 for a while. The major changes would be:

• Drop the laravel-nuxt binary and launch php artisan serve from within a Nuxt module.
• Use less intrusive config: try to drop the laravelNuxt config helper (not sure if this will be possible).
• Add cool documentation using vuepress.

Can this do Server-side-rendering or SSR for SEO?

@skyrpex Thanks for this repo. I know this was asked over a year ago(#2), but can this run in SSR mode now?

I found your repo from your article here: https://dev.to/skyrpex/create-a-spa-with-laravel-and-nuxt--54k

Background:
Like a lot of devs, I am building a complex, dynamic site in Laravel with lots of features. I am interested in making my Laravel app quick to render (client-side), and SEO is an important consideration because I need to be indexed well on Google. So, SSR becomes a necessity.

Tools like Nuxt.js exist for this reason. Can this repo / tool now do SSR?

More docs explaining the relationship between Nuxt and Laravel

I stumbled here, looking for projects that try to combine Nuxt.js and Laravel. Yours seems to be the most lightweight so far, especially when compared to https://github.com/cretueusebiu/laravel-nuxt

I have a few questions before giving this project a shot:

How does authentication get handled in the SPA?

How does the Laravel Controllers pass data to the nuxt pages, via API call?

Can the full Nuxt directory structure be used?

I understand this project is very new, however some documentation on how the Nuxt spa communicates with Laravel and what restrictions there may be would be helpful.

Don't use artisan server

Hello,

Is there any way to force the package to not create an artisan server in order to redirect on docker installation ( used to test redis installation with horizon in my case ) ?
It could be great to have an option to specify the URL and if empty -> generate the artisan server.
To be more precise in our case -> change the redirect that is usually in localhost:3001 to the URl given.

Thanks,
Gautier

Update dependencies (vulnerabilities: 1 high, 2 moderate)

Hello:

As npm audit shows (using the latest 1.5.0 version), there are the following vulnerabilities:

• js-yaml (Moderate: Denial of Service and High: Code Injection)
• webpack-bundle-analyzer (Moderate: Cross-Site Scripting)

Thanks,

Typescript not supported

The nuxt version does not support Typescript

Wrong output on WSL/Ubuntu in dev mode

Hey! I followed all of your steps to the letter and am getting a weird situation where the server is up/works, but the files are in the wrong place in development: in .nuxt rather than public/nuxt - have you seen this before?

Oddly enough, switching to yarn build actually makes them output in the right place, but without the watch as expected....

@nuxtjs/vuetify wont work

Hi, @nuxtjs/vuetify wont work when added nuxt.config.js

{
  buildModules: [
    '@nuxtjs/vuetify'
  ],
  vuetify: {
    /* module options */
  }
}

while it works when add as plugin or, add nuxt manually and then add @nuxtjs/vuetify

A way to create meta tags in server side

Hi, since laravel-nuxt has no server side rendering, is there any way to create meta tags that crawlers could read? right now my meta tags are unreadable for facebook and twitter and I'm totally stuck now, I can't imagine a way to make my meta tags being render in server side. Any idea will be appreciated, thanks

Spawn's detached options is awkward in Windows

Detached opens new CLI windows, which is awkward. Maybe we can get rid of it... but I remember having some problems killing child processes.

It's used here:

laravel-nuxt-js/bin/laravel-nuxt-dev.js

Line 57 in ad93f70

detached: true,

laravel-nuxt-js/bin/laravel-nuxt-dev.js

Line 74 in ad93f70

detached: true,

Can I change nuxt dir?

It is redundant to put nuxt's development directory under laravel resources, especially in projects where the front-end (nuxt) and back-end (laravel) teams are separate.

How can I change nuxt dir path? Thank you

How to change layouts?

i want to overwrite the default layout
resources/nuxt/layouts/default.vue not work
spa/layouts/default.vue not work

help please

Confusing installation instructions for nuxt.config.js

Following the install instructions here:
https://github.com/skyrpex/laravel-nuxt
and then
https://github.com/skyrpex/laravel-nuxt-js

All of a sudden I see a reference to

const laravelNuxt = require("laravel-nuxt");

module.exports = laravelNuxt({
  // Your Nuxt options here...
  modules: [],
  plugins: [],

  // Options such as mode, srcDir and generate.dir are already handled for you.
});

However, up until this point we don't have a nuxt.config.js file (we never installed Nuxt directly).
What am I missing?

Also where does all the code at https://github.com/skyrpex/laravel-nuxt-js go, given that we started with https://github.com/skyrpex/laravel-nuxt ?

generate mode

Hi, I looked at the configuration and saw in the required parameters mode: "spa", it turns out in "generate" work is not provided?

How can I run it in SSR mode?

Are there any example how i can run it for server side rendering?

installling @nuxtjs/tailwindcss

Looking for recommendation on using @nuxtjs/tailwindcss

Add to nuxt.config.js as recommended by Tailwindcss

module.exports = laravelNuxt({
  // Options such as mode, srcDir and generate.dir are already handled for you.
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  plugins: [],
});

Error message on npm start

 TypeError: Cannot read property 'resolveAlias' of undefined
  
  - module.js:13 ModuleContainer.module.exports
    [spa]/[@nuxtjs]/tailwindcss/lib/module.js:13:41
  
  - module.js:162 Promise
    [spa]/[nuxt]/lib/core/module.js:162:30
  
  - new Promise
  
  - module.js:146 ModuleContainer.addModule
    [spa]/[nuxt]/lib/core/module.js:146:12
  
  - utils.js:96 promise.then
    [spa]/[nuxt]/lib/common/utils.js:96:43
  
  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7

[ERROR| Help] Change base route url from nuxt.config.js

Hello @skyrpex !

I want change base route for nuxt app via configuration field in nuxt.config.js like this:

router: {
  base: '/admin/',
},

But after change this settings I get error 404 _nuxt directory.
I want startup my nuxt app with next route: localhost:8000/admin/

axios module is not working out of the box.

Hi, I just was testing your package using this guide https://dev.to/skyrpex/create-a-spa-with-laravel-and-nuxt--54k, when I started the server with npm start it throws an error:

/node_modules/@nuxtjs/axios/lib/plugin.js: globalName is not defined

I found that is about a recent update on the axios module, but how can We handle this with your integration?

Use fkill to kill processes

Lets use https://github.com/sindresorhus/fkill here

laravel-nuxt-js/src/utils.js

Lines 30 to 36 in 45c0db5

	module.exports.kill = child => {
	if (process.platform !== "win32") {
	spawn("sh", ["-c", "kill -INT -" + child.pid]);
	} else {
	child.kill("SIGINT");
	}
	};

CSRF token

It's possible to add csrf meta tags inside <head> like vue does?
Thank you

Host IP

Hey There,

Thanks for the module!

How do I get it to listen on any IP (eg 192.168.x.x)? - I can't seem to change it from only serving on 127.0.0.1:8000 for "npm start"?

Cheers,
Ben

Does not support nuxt-ts

Hey,
your module can't be run using the nuxt-ts keywork instead of nuxt. It would be nice If you can add TypeScript / nuxt-ts support.

Thanks

work with apache http or nginx

hi!
it possible to work with apache or nginx? not only php server.

Can't get production working.

I ran laravel-nuxt build. Set up nginx as a proxy. But I will just get a 502 error. Any idea how I can get it working?

Upgrade this to nuxt-edge

It would be really interesting to port this to nuxt 2.0 (aka as nuxt-edge)

Module i18n not working

1. Install module: npm i nuxt-i18n
2. Then add the module to nuxt.config.js

const laravelNuxt = require("laravel-nuxt");

module.exports = laravelNuxt({

    modules: [
        'nuxt-i18n',
    ],
    plugins: [],
    i18n: {},

});

3. And then run npm start

  Error: Could not compile template /Users/User/Project/node_modules/nuxt  -i18n/src/plugins/routing.js: MODULE_NAME is not defined
  
  - builder.js:471 Promise.all.templatesFiles.map
    [wr]/[nuxt]/lib/builder/builder.js:471:17

Costumize builded folder name

Can i costumize the name of builded _nuxt folder in public folder ?

Great project - general questions / additions

Great project! I use L+N for tons of projects and have two types of production servers so I'd like to look into and test/contribute to this setup since it provides a much simpler solution.

If you'd like to answer these here I can help update your docs and contribute with PR's:

• would it be possible to make the nuxt folder configurable? /resources/nuxt
• this doesn't install the boilerplate nuxt stuff, does @import in nuxt look in /resources/nuxt for everything else? components/ and state/ etc?
• for deployment you said i can just npm run build , do i then just need to have nginx or apache run PHP on production setups? does the laravel package just proxy to the static pages?
• how about we pass in and support dotenv then we can share the same .env for both nuxtjs and PHP, maybe allow support to put the nuxt folder in there?
• where exactly does all my other nuxt.config.js stuff go? same file? i just add the JS you stated in the readme?
• i wonder if a comment in the docs to add 2 space indentation for *.js would help since thats most of the standards and installing laravel defaults * to 4.

I also forked this project and updated all the deps to use nuxtjs v2.3.4, working great so far!

npm run build not build from static folder

Hi,

npm start command still work OK, but when i run npm run build command for production, everything in static folder has gone.

So, what should I do?

Thanks!