Laravel 9

Installing Vue.js in a Laravel Project

Vue.js is a powerful JavaScript framework for creating dynamic user interfaces, while Laravel is a robust PHP framework for web application development. Combining these two tools enables developers to build modern, interactive applications with ease. This guide will walk you through the process of setting up Vue.js in a Laravel project.

Prerequisites

Before starting, ensure you have the following installed on your machine:

PHP (>= 7.3)
Composer
Node.js and npm
Laravel CLI

Step 1: Create a New Laravel Project

Begin by creating a new Laravel project using Composer. Open your terminal and run

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

Then navigate to the project directory:

cd my-vue-app

Step 2: Install Laravel UI

Laravel UI is a package that provides a way to set up frontend scaffolding for your Laravel application. To install it, run the following command:

composer require laravel/ui

Step 3: Scaffold Vue.js

Next, you need to scaffold Vue.js using Laravel UI. Run the following command to generate the basic Vue.js files and setup:

php artisan ui vue

If you also want to include authentication scaffolding (optional), you can run:

php artisan ui vue --auth

Install NPM Dependencies

Now, install the necessary npm dependencies, including Vue.js, by running:

npm install

Compile Assets

After installing the dependencies, you need to compile the front-end assets. Run the following command to compile the assets:

npm run dev

This command will compile the assets and place them in the public directory.

Verify the Setup

To verify that Vue.js is correctly set up in your Laravel project, open the resources/js/app.js file. You should see the following lines of code:

require('./bootstrap');

import { createApp } from 'vue';
import ExampleComponent from './components/ExampleComponent.vue';

const app = createApp({});

app.component('example-component', ExampleComponent);

app.mount('#app');

This code imports Vue.js, registers a sample component, and mounts the Vue.js instance to an HTML element with the id app.

Create a Vue Component

Let’s create a simple Vue.js component to test the setup. Open the resources/js/components directory and create a new file called HelloWorld.vue with the following content:

<template>
  <div class="hello">
    <h1>Hello, Vue.js with Laravel!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
};
</script>

<style scoped>
.hello {
  text-align: center;
  margin-top: 50px;
}
</style>

Register the Component

Now, register the new component in the app.js file. Open resources/js/app.js and add the following lines:

import HelloWorld from './components/HelloWorld.vue';

app.component('hello-world', HelloWorld);

Use the Component in a Blade Template

Finally, use the new Vue.js component in a Blade template. Open the resources/views/welcome.blade.php file and modify it as follows:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Vue.js App</title>
</head>
<body>
    <div id="app">
        <hello-world></hello-world>
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Step 10: Serve the Application

Now, serve the Laravel application using the built-in development server:

php artisan serve

Open your browser and navigate to http://localhost:8000. You should see the “Hello, Vue.js with Laravel!” message, indicating that Vue.js is successfully set up in your Laravel project.

admin