How to Integrate Vue.js with Laravel: A Step-by-Step Guide

by WebWays

285

Posted 12.04.2024

Laravel Vue.js

Vue.js and Laravel together create a strong foundation for building modern, interactive web applications. While Laravel offers a robust backend framework, Vue.js provides a flexible and responsive frontend framework. This guide will demonstrate how to integrate Vue.js seamlessly into a Laravel application.

Prerequisites

Before getting started, ensure you have the following installed:

  1. Composer (for Laravel)
  2. Node.js and npm (for Vue.js)

Step 1: Set Up a New Laravel Project

If you haven't yet set up a Laravel project, begin by installing Laravel using Composer.

composer create-project --prefer-dist laravel/laravel laravel-vue-app
cd laravel-vue-app

Step 2: Install Vue.js

Next, install Vue.js using npm within your Laravel project directory:

composer require laravel/ui
php artisan ui vue
npm install
npm run dev

Step 3: Create Vue Components

Next, let's generate a Vue component. Within your Laravel project, go to the resources/js directory. Create new file for your Vue component, such as HeaderComponent.vue.

<template>
    <header>
        Header Vue
    </header>
</template>

<script>
    export default {
        mounted() {
            console.log('HeaderComponent mounted.')
        }
    }
</script>

<style scoped>
header  {
    background-color: #27474E;
    color: #FFFFFF;
    font-size: 24px;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
}
</style>

Create a second Vue component, such as MainPageComponent.vue

<template>
    <main>
        <h1>Welcome to my page</h1>
    </main>
</template>

<script>
    export default {
        mounted() {
            console.log('MainPageComponent mounted.')
        }
    }
</script>

<style scoped>
h1  {
  margin-top: 100px;
  text-align: center;
}
</style>

Step 4: Register the Vue Components

To integrate this Vue component into your Laravel application, you'll need to add it to the app.js file found in the resources/js directory.

import './bootstrap';
import { createApp } from 'vue';
import HeaderComponent from './components/HeaderComponent.vue';
import MainPageComponent from "./components/MainPageComponent.vue";

const app = createApp({});

app
    .component('header-component', HeaderComponent)
    .component('main-page-component', MainPageComponent);

app.mount('#app');

Step 5: Include Vue.js in Blade Template

Next, include Vue.js and your Vue component within a Blade template file, such as welcome.blade.php.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel Vue Integration</title>
</head>
<body>
<div id="app">
    <header-component></header-component>
    <main-page-component></main-page-component>
</div>

@vite(['resources/js/app.js'])
</body>
</html>

Step 6: Compile Assets

Compile your assets using Laravel Mix. Run the following command to compile your assets (JavaScript, Vue components, etc.):

npm run dev

Step 7: Run Your Laravel Application

Start your Laravel development server:

php artisan serve

Now, open your web browser and visit http://localhost:8000. You should see the content of the components Header and Main Page displayed on the page, indicating that Vue.js is successfully integrated into your Laravel application!

Conclusion

In summary, integrating Vue.js with Laravel is a simple process that empowers you to create dynamic and responsive web applications effortlessly. Vue components seamlessly interact with Laravel backend APIs, enhancing the user experience. Enjoy coding and exploring these powerful tools!

Share on social media

Comments

Leave your comment


*By submitting this form, I confirm that I have read GDPR Policies and give consent to contact me.

MOST VIEWED POSTS

Integrating Chart.js into Laravel 11
How to Integrate Vue.js with Laravel: A Step-by-Step Guide
How to reset WordPress Admin Password on Localhost
Install Wordpress on Ubuntu Server
Building Laravel UI with Blade Components
How to Schedule Posts in Laravel

RANDOM POSTS

How to reset WordPress Admin Password on Localhost
Install Wordpress on Ubuntu Server
How to Integrate Vue.js with Laravel: A Step-by-Step Guide
Integrating Chart.js into Laravel 11
Building Laravel UI with Blade Components
How to Schedule Posts in Laravel