This tutorial helps to combine vue.js with Laravel. We’ll stroll by means of an in depth step-by-step process for integrating Laravel with Vue.js.
Taylor Otwell is likely one of the first well-known folks within the developer group to endorse Vue.js publicly. as we all know, He’s additionally the creator of the Laravel framework which was launched in 2011.
The vue.js is Constructed on high of normal HTML, CSS, and JavaScript with intuitive API and world-class documentation.
You too can use Vue immediately from a CDN by way of a script tag:
<script src="https://unpkg.com/vue@3/dist/vue.international.js"></script>
Getting Began With Laravel and Vue.js
Let’s begin to create a Laravel undertaking with Vue. You may create a contemporary Laravel undertaking by working the next command:
composer create-project laravel/laravel laravel-and-vue
As soon as Your undertaking has been created, You’ll have to put in the Laravel dependencies. To take action, execute the next command inside your undertaking listing:
npm set up
Let’s execute the next command to compile the property and ensure all the things’s working effective:
npm run dev
If all the things works out effective, you’ll see a welcome web page.
Putting in Vue.js in Laravel
Let’s execute the under command inside our Laravel undertaking:
npm set up --save vue
The above command will set up Vue.js as one of many undertaking dependencies.
You may confirm the vue model and undertaking dependencies: Open the package deal.json file and search for “vue” underneath the “Dependencies” part:
Create First Vue.js Element
Now, I’m going to create the primary vue.js element, Please Open the sources/app.js file and replace the under code into this file:
// sources/app.js
require('./bootstrap');
import { createApp } from 'vue';
import HelloComponent from './parts/HelloComponent.vue';
createApp({
parts: {
HelloComponent,
}
}).mount('#app');
Create a brand new file sources/parts/HelloComponent.vue and put the next code in it:
// sources/parts/HelloComponent.vue
<template>
<h1>Hiya! PHPFlow.com</h1>
</template>
<script>
export default {
identify: 'HelloComponent'
}
</script>
The above element will print out Hiya! PHPFlow.com on the web page.
Create a sources/views/welcome.blade.php and put the next code in it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta identify="viewport" content material="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Appropriate" content material="ie=edge">
<title>Laravel Vue</title>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<physique>
<div id="app">
<hello-component />
</div>
</physique>
</html>
Now, open webpack.combine.js on the undertaking root and replace its content material as follows. Laravel Combine requires the package deal to carry out the compilation, and it’s clever sufficient to put in it robotically.
combine.js('sources/js/app.js', 'public/js')
.vue()
.postCss('sources/css/app.css', 'public/css');
Now we have used .vue() methodology that can compile any Vue.js code and bundle that with the manufacturing JavaScript file.
We’ll compile parts utilizing the under command.
npm run dev
Run your software utilizing php artisan serve and open it in your favourite browser.
The applying could be accessed on localhost utilizing under.
http://127.0.0.1:8000/
Conclusion
I hope you loved to learn this text, we’ve got created a easy whats up element in vue.js, and referred to as it right into a welcome blade template. You may create different parts as per your wants. When you’ve got any questions, be happy to achieve out to me.
