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\[email protected]')->where('any', '.*');
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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');
    }
Enter fullscreen mode Exit fullscreen mode

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:[email protected];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>
Enter fullscreen mode Exit fullscreen mode

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 [email protected]^15.9.5 --save-dev --legacy-peer-deps
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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 }
});
Enter fullscreen mode Exit fullscreen mode

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', [
        //
    ]);
Enter fullscreen mode Exit fullscreen mode

If you run

npm run dev
PHP artisan serve
Enter fullscreen mode Exit fullscreen mode

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

Vue in laravel 8

Buy me a coffee or pizza