How to Setup Vue in Laravel

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.