How to add vue js in laravel

How to add vue js in laravel

Integrating Vue.js with Laravel is a straightforward process and can be done in a few steps. Laravel, by default, includes Vue.js, and you can leverage it for building dynamic user interfaces. Here’s a step-by-step guide:

1. Install Laravel

Ensure you have Laravel installed. If not, you can use Composer to create a new Laravel project:

composer create-project --prefer-dist laravel/laravel your-project-name

2. Install Node.js and npm

If you haven’t installed Node.js and npm (Node Package Manager), you need to do that as Laravel Mix (a wrapper around webpack) uses them:

3. Set Up Laravel Mix

Laravel Mix simplifies the process of working with assets. Open your terminal and run:

npm install

4. Create a Vue Component

Create a Vue component, for example, ExampleComponent.vue, in the resources/js/components directory.

// resources/js/components/ExampleComponent.vue

<template>
    <div>
        <h1>{{ message }}</h1>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello from Vue!'
        };
    }
};
</script>

<style scoped>
/* Your component-specific styles go here */
</style>

5. Include Vue Component in Blade Template

Open your Blade template (e.g., resources/views/welcome.blade.php) and include the Vue component:

<!-- resources/views/welcome.blade.php -->

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

6. Compile Assets

Run the following command to compile your assets:

npm run dev

Or, for production:

npm run prod

7. Start Laravel Development Server

Start the Laravel development server:

php artisan serve

Visit http://127.0.0.1:8000 in your browser, and you should see your Vue component in action.

Additional Tips:

  • If you need to continuously compile assets as you make changes, you can use: npm run watch
  • For more advanced configurations, check the webpack.mix.js file in the root of your Laravel project.

This basic setup should get you started with integrating Vue.js into your Laravel application. Adjustments can be made based on your specific project requirements.

Check My Social Profile Links

Instagram

Youtube

Website

Linkedin

Android Application

About The Author

Integrating Vue.js with Laravel is a straightforward process and can be done in a few steps. Laravel, by default, includes Vue.js, and you can leverage it for building dynamic user interfaces. Here’s a step-by-step guide: 1. Install Laravel Ensure you have Laravel installed. If not, you can use Composer to…

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
fb-share-icon
Share