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.