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

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 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 be creating.. a contact form obviously.

Inside our component file ContactForm.vue we’re going to add the HTML template part. Just like you would in a blade file, just wrapped inside , like this:

*


Name

    <div class="form-group">
        <label for="email">E-mail</label>
        <input type="email" class="form-control" name="email" id="email" />
    </div>

    <div class="form-group">
        <label for="message">Message</label>
        <textarea class="form-control" name="message" id="message" rows="5"></textarea>
    </div>

    <button type="submit" class="btn btn-primary">Send message</button>
</form>

*

[Read Full Blog )Here](https://medium.com/@mscherrenberg/laravel-5-6-vue-js-simple-form-submission-using-components-92b6d5fd4434