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 foremost I'm going assume that Laravel is installed and that you have a fresh project ready to go. If you haven't head over to https://laravel.com/docs/8.x/installation and follow the guide there to set up a new project.
Set up Laravel
Ok so first we are going to change up the web.php routes file, head to routes/wep.php, and replace the content with:
Route::get('/{any}', 'App\Http\Controllers\PagesController@index')->where('any', '.*');
What we are saying here is that we are happy for anything to come after the / in the URL.
Next, pop on a terminal and create the PagesController.
PHP artisan make:controller PagesController
When that has fired into the app/http/controllers folder open in up and between the two curly brackets add:
//
public function index()
{
return view('welcome');
}
This will just return the welcome view that's in our resources/views folder, so let's head there and make that look good. First, delete everything in Welcome.blade.php and paste in the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&display=swap" rel="stylesheet">
<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script>
<link rel="stylesheet" href="{{ mix('css/app.css') }}" />
<title>{{env('APP_NAME')}}</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
That sets our app up and gives us a nice place to insert our vue.js components.
So it's Vue time!
In the terminal run
npm install
npm install vue
npm install vue-template-compiler vue-loader@^15.9.5 --save-dev --legacy-peer-deps
Now we have vue.js and all its glory installed head over to the resources/js folder and create a folder called views, in there pop a new vue.js file called app.vue and add the following code
<template>
<div>
{{message}}
</div>
</template>
<script>
const default_layout = "default";
export default {
computed: {},
data() {
return {
message:'Hello World'
}
}
};
</script>
That's our entry point vue.js component and we just need to tell vue.js to load it and we are done.
So lets head to app.js in our js folder and replace the code in there with the following
import Vue from 'vue'
//Main pages
import App from './views/app.vue'
const app = new Vue({
el: '#app',
components: { App }
});
What we do here is import vue.js from our node modules folder, import the component we just made, create a new vue.js instance, and mount it to the id of the app we added in our Welcome.blade.php file.
We now need to update our webpack.mix.js file
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
If you run
npm run dev
PHP artisan serve
from the terminal, you can fire in and get the wonderful hello world and you are all set up and ready to go!
Any issues with this or wanna ask a question please leave a comment below.
I also created a video of the process! Yes I had to update the article after doing it but you can see my process
Top comments (18)
Great article Graham,
there is room for improvement in your code. So instead of
you could use the invokable flag so you don't use the index
and then use this route:
it tells Laravel routing to respond to any route provided or nothing with the question mark "?" and responds with an invokable controller
Great tutorial my friend.
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:
need change to:
Thank you for the invoke parameters information.
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!
As i do my friend, we are all learning, we progress by sharing knowledge :)
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! ;)
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 detailsfound 0 vulnerabilities
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
Hey , I cant replicate the error. It works out of the box for me. Is NPM and node upto date on your machine
Vue-template-compiler is not compatible with vue 3.
Use @vue/compiler-sfc . Ensure it is same version as vue
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!
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.
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/...
Had the same issue, solved it by adding in the webpack.mix.js
a single additional
.vue();
I have added .vue(); but still nothing
can you run: npm run dev?
when i run npm it show that error i have attached the image as will
Sort of working solution, thanks.
Is it missing something? I would want to make sure its correct
Some comments may only be visible to logged-in visitors. Sign in to view all comments.