This tutorial helps to integrate vue.js with Laravel. We’ll walk through a detailed step-by-step procedure for integrating Laravel with Vue.js.
Taylor Otwell is one of the first famous people in the developer community to endorse Vue.js publicly. as we know, He is also the creator of the Laravel framework which was introduced in 2011.
The vue.js is Built on top of standard HTML, CSS, and JavaScript with intuitive API and world-class documentation.
You can also use Vue directly from a CDN via a script tag:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Getting Started With Laravel and Vue.js
Let’s start to create a Laravel project with Vue. You can create a fresh Laravel project by running the following command:
composer create-project laravel/laravel laravel-and-vue
Once Your project has been created, You’ll have to install the Laravel dependencies. To do so, execute the following command inside your project directory:
npm install
Let’s execute the following command to compile the assets and make sure everything’s working fine:
npm run dev
If everything works out fine, you’ll see a welcome page.
Installing Vue.js in Laravel
Let’s execute the below command inside our Laravel project:
npm install --save vue
The above command will install Vue.js as one of the project dependencies.
You can verify the vue version and project dependencies: Open the package.json file and look for “vue” under the “Dependencies” section:
Create First Vue.js Component
Now, I am going to create the first vue.js component, Please Open the resources/app.js file and update the below code into this file:
// resources/app.js
require('./bootstrap');
import { createApp } from 'vue';
import HelloComponent from './components/HelloComponent.vue';
createApp({
components: {
HelloComponent,
}
}).mount('#app');
Create a new file resources/components/HelloComponent.vue and put the following code in it:
// resources/components/HelloComponent.vue
<template>
<h1>Hello! PHPFlow.com</h1>
</template>
<script>
export default {
name: 'HelloComponent'
}
</script>
The above component will print out Hello! PHPFlow.com on the page.
Create a resources/views/welcome.blade.php and put the following code in it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel Vue</title>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div id="app">
<hello-component />
</div>
</body>
</html>
Now, open webpack.mix.js on the project root and update its content as follows. Laravel Mix requires the package to perform the compilation, and it’s intelligent enough to install it automatically.
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css');
We have used .vue() method that will compile any Vue.js code and bundle that with the production JavaScript file.
We will compile components using the below command.
npm run dev
Run your application using php artisan serve and open it in your favorite browser.
The application can be accessed on localhost using below.
http://127.0.0.1:8000/
Conclusion
I hope you enjoyed to read this article, we have created a simple hello component in vue.js, and called it into a welcome blade template. You can create other components as per your needs. If you have any questions, feel free to reach out to me.
