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.