DEV Community

Setting up Vue in Laravel 8

Graham Morby on October 14, 2020

Fancy a SPA in laravel? Yes, we all do! So here is the quick and easy way to get the wonder Vue.js sparking into life in laravel 8. First a foremo...

Read full post

Mounir Bennacer • Nov 8 '20 • Edited

Great article Graham,

there is room for improvement in your code. So instead of

php artisan make:controller PagesController

you could use the invokable flag so you don't use the index

php artisan make:controller PagesController --invokable

and then use this route:

Route::get('/{any?}', App\Http\Controllers\PagesController::class);

it tells Laravel routing to respond to any route provided or nothing with the question mark "?" and responds with an invokable controller

//
    public function __invoke()
    {
        return view('welcome');
    }

Great tutorial my friend.

yfktn • Apr 25 '21

Hi, I got an error with this code, because Laravel on the RouteServiceProvider, while reading web.php to get our Route, it has already set up the namespace for us.

So, for this code at web.php:

Route::get('/{any?}', App\Http\Controllers\PagesController::class);

need change to:

Route::get('/{any?}', 'PagesController');

Thank you for the invoke parameters information.

Graham Morby • Nov 8 '20

Thank you, I'm always learning so I hope to help folks and in turn, learn myself, so I will differently try this way out!

Mounir Bennacer • Nov 8 '20

As i do my friend, we are all learning, we progress by sharing knowledge :)

AbelardoLG • Dec 25 '20 • Edited

Hi there,
A merely minute ago I followed your steps to see a Vue component inside a Laravel app but...the following message appeared instead:

Exception
The Mix manifest does not exist. (View: /hello-laravel-vue3/resources/views/welcome.blade.php)

What's wrong?

Nice tutorial! Following you! ;)

AbelardoLG • Dec 25 '20 • Edited

SInce the error page which is showed tells us:
Missing Mix Manifest File
Did you forget to run npm install && npm run dev?

I run npm install && npm run dev. Then, this error happened during the installation of npm install&npm run dev:

up to date, audited 2064 packages in 2s

47 packages are looking for funding
run npm fund for details

found 0 vulnerabilities

dev
npm run development

development
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

    Additional dependencies must be installed. This will only take a moment.

    Running: npm install vue-template-compiler --save-dev --production=false

    Okay, done. The following packages have been installed and saved to your package.json dependencies list:

    - vue-template-compiler

78% module and chunk tree optimization ExtractTextPlugin/hello-laravel-vue3/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:1063
} eLse if ++complEted ===
^^

SyntaxError: Unexpected token 'if'
at hello-laravel-vue3/node_modules/extract-text-webpack-plugin/node_modules/async/dist/async.js:969:16

Graham Morby • Dec 26 '20

Hey , I cant replicate the error. It works out of the box for me. Is NPM and node upto date on your machine

wogas • Jun 20 '21

Vue-template-compiler is not compatible with vue 3.
Use @vue/compiler-sfc . Ensure it is same version as vue

Wagner Silva • Dec 14 '20

Hello Graham! Thanks for this great article.

I'm using Laravel's Sail. After I ran 'sail artisan serve', the server started, but I can't reach it on the browser (This site can't be reached).

Could you help me with this issue?

Thank you!

Wagner Silva • Dec 14 '20

Sorry, Graham.

I was mixing concepts. I'll let my comment to help future "sail's" devs.

When using sail, it isn't necessary using 'artisan serve'. You just need to run 'sail npm run dev' after update vue/js files.

Naqibullah • Jan 19 '21 • Edited

i have followed the exact steps event with fresh install of Laravel 8 but still shows error when run npm run dev command
dev-to-uploads.s3.amazonaws.com/i/...