How to Setup Vue in Laravel

AuthorSumit Dey Sarkar

Pubish Date22 Mar 2023

categoryLaravel

In this tutorial we will learn how to setup vue in laravel.

 

How to setup vue in laravel

The steps below can be used to configure Vue in Laravel: Install Laravel first: Make sure PHP is set up on your PC.

 

Step 1 - Install Laravel :

  • Make sure PHP is set up on your PC
  • Open the command prompt and run: composer create-project --prefer-dist laravel/laravel <project-name>
  • This will create a new Laravel project with the name you specified

 

Step 2 - Install Vue :

  • Open the command prompt and go to your Laravel project directory
  • Run this command: npm install vue
  • This will install Vue in your project

 

Step 3 - Install Vue Loader :

  • Run this command on cmd: npm install vue-loader vue-template-compiler
  • This will install the important packages to compile Vue templates

 

Step 4 - Configure Laravel Mix :

  • Open the webpack.mix.js file in your Laravel project
  • Add the below code to the file:
    const mix = require('laravel-mix');
    mix.js('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css');

 

Step 5 - Create a Vue component :

  • Create a new file resources/js/components/ExampleComponent.vue
  • Add the below code to the file:
    <template>
        <div>
            <h1>{{ message }}</h1>
        </div>
    </template>

    <script>
        export default {
            data() {
                return {
                    message: 'Hello from Vue!'
                }
            }
        }
    </script>

 

Step 6 - Include the Vue component in a Blade template :

  • Open the resources/views/welcome.blade.php file in your Laravel project
  • Add the below code to the file:
    <div id="app">
        <example-component></example-component>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>

 

Step 7 - Run Laravel Mix :

  • Run this command: npm run dev
  • This will compile your assets and generate a js/app.js file
  • Refresh your browser to see the Vue component in action

 

That's it! You have successfully set up Vue in Laravel.

Comments 0

Leave a comment