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>
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.
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:
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/
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.
This tutorial helps integrate a PHP SDK with Laravel. We'll install aws-php-sdk into laravel application and access all aws services… Read More
in this quick PHP tutorial, We'll discuss php_eol with examples. PHP_EOL is a predefined constant in PHP and represents an… Read More
This Laravel tutorial helps to understand table Relationships using Elequonte ORM. We'll explore laravel table Relationships usage and best practices… Read More
We'll explore different join methods of Laravel eloquent with examples. The join helps to fetch the data from multiple database… Read More
in this Laravel tutorial, We'll explore valet, which is a development environment for macOS minimalists. It's a lightweight Laravel development… Read More
I'll go through how to use soft delete in Laravel 10 in this post. The soft deletes are a method… Read More