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

Leave a Comment
Share
Published by
admin
3 months ago

Recent Posts

Registration with image upload Java Jdbc(Download Source code)

Introduction In this section, we will guide you step by step in the development of an image upload registration system in Java using MySQL and JDBC. In the application, users register…

2 weeks ago

Touchable shop Pos system using Java

The Touchable Shop POS (Point of Sale) system is a sophisticated software solution developed using…

1 month ago

Build Your First Responsive Login Form Using HTML and CSS FlexBox

Creating a responsive login form is a crucial skill for any web developer. In this…

1 month ago

Build Crud API with Laravel 12

In this tutorial will teach  Laravel 12 CRUD API  by step. Laravel  10 CRUD Application …

1 month ago

laravel 12 image upload tutorial

In this lesson we talk about laravel 12 image uploading and display the image step…

2 months ago

Laravel 12 CRUD Application

In this tutorial will teach Laravel 12 CRUD Application step by step. Laravel  12 CRUD…

2 months ago