Laravel/Vue.js simple form submission using Vue components.

Laravel/Vue.js simple form submission using Vue components.

Mark Scherrenberg
5 min readAug 2, 2018

Vue is a progressive framework for building user interfaces, if you used any recent version of Laravel you might have noticed it’s standard bundled in Laravel. I’m going to show you a simple, yet efficient way to submit a form using Vue.js.

For this article, I’m using Laravel 5.6. To install Laravel visit: https://laravel.com/docs/5.6#installation.

We’ll start by heading over to the folder /resources/assets/js/components notice that there’s a ExampleComponent.vue already included. When you head over to /resources/assets/js/app.js you should see the file being registered to Vue as a component. Also notice that that Vue is instantiated beneath it, it wraps around an element with the ID ‘app’. It’s good to know that we can of course only use Vue inside this element.

So.. Let’s say you want to use the example component. Then you’ll simply add this html element <example-component></example-component> in your html. Just make sure that it’s inside the wrapper with the ID ‘app’.

To avoid any mistakes, when editing your Components, Javascript or SCSS files. Don’t forget to run ‘npm run dev’ or better, keep it running using ‘npm run watch.

Inside /resources/assets/js/components we create a new component file, I’ll name it ‘ContactForm.vue’, since I’ll…

--

--