In this tutorial we will learn about how to create a contact form in vue and using laravel REST API as a back end and for mailing i am using amazon SES. If you are new to VUE and laravel then go through our previous topic basics of laravel and vue js.
Lets start our steps :
Lets start with basics of Laravel as a back end and front end as VUE : –
1.Install the composer in your system if it’s not exist.
2. Open the command prompt and type composer create-project laravel/laravel myblog
3. Go your folder by changing directory from the command prompt cd foldername
4. Install the UI package composer require laravel/ui
5. Type the scaffolding php artisan ui vue
6. Now install node_module npm install be sure that node js is install in your system.
7. Now install npm install vue-loader
8. Now run npm run watch , while working in the front end this will help you to see the modification running in your browser. But be sure once your work is done then run npm run production for deployment.
9. Now open and rename file ExampleComponent with Contact resources/js/components/Contact.vue and copy this code
Message Send !
10. Change the config details in resources/js/app.js
Vue.component('contact-component', require('./components/Contact.vue').default);
11. Create an email template blade `mailtemplate.blade.php`
Name : {{ $fullname }}
Email address : {{ $emailaddress }}
Message : {{ $msg }}
12. Create a controller name php artisan make:controller ContactController
13. Create a function for mail
json()->all();
$data = array(
'fullname' => $contactform['fullname'],
'emailaddress' => $contactform['emailaddress'],
'msg' => $contactform['message']
);
Mail::send('mailtemplate', $data, function ($message) use ($data) {
$message->from('saju.g@wontonetech.com', 'Contact Form');
$message->sender('saju.g@wontonetech.com', 'Contact Form');
$message->to('saju@wontonee.com', "Contact Form");
$message->subject('Contact form');
});
}
}
14. Create a route for this routes/api.php
use App\Http\Controllers\{
ContactController
};
Route::post('contact',[ContactController::class,'Sendmail']);
15. Now open contact.js component and link the form with the api by using the axios
Message Send !
16. Open resources/view/welcome.blade.php link your vue component here.
Wontonee Contact Form
17. Run your contact form in browser you will see this
What is Laravel Livewire?Laravel Livewire is a full-stack framework for Laravel that simplifies the development…
Laravel is a popular open-source framework developed by Taylor otwell for PHP. Laravel comes with…
SMS play a vital role in our day-to-day life. For instance, if we want to…
Bagisto is an open-source Laravel eCommerce application. Bagisto is one of the popular eCommerce applications…
Bagisto is an open-source Laravel eCommerce application. Bagisto is one of the popular eCommerce applications…
From the last few years website design is quite easy and convenient with various content…
This website uses cookies.