Hey guys, this is a nightmare for me and took me a while to get right, as I always do I write the tutorial so I can pop back if I ever need it again, and hopefully some of you will use it also and it will make your day a little easier.
So I'm creating a really simple blog where a post will have three components. One post will have a Title, Article, and Image. To me, it seemed overkill to use a headless CMS or laravel Nova so I just decided to build out the function myself.
So here we go:
So for this tutorial Im assuming you are using an API driven by Laravel and a front end using Vue.js.
So to start open up your project and a terminal and run the following command:
php artisan make:model Blog -mc
What this does is create a model with the -mc creating a Controller and Migration.
With that head over and open the migration file and add the following code:
$table->id();
$table->text('title');
$table->text('article');
$table->string('image_path');
$table->timestamps();
Then save and pop over to the terminal and run:
php artisan migrate
Ok database is all set to go and we have a model. So lets have a look at the front end. Lets create a new folder in our Vue components called Blog and inside there add a new Vue file called create.vue
Once we have that I added a new form, Im using Bootstrap Vue for this but amend to what front end library.
<b-form>
<b-form-group id="title" label="Title:" label-for="title">
<b-form-input
id="title"
v-model="form.title"
type="text"
placeholder="Article title"
required
></b-form-input>
</b-form-group>
<b-form-group id="article" label="Article:" label-for="article">
<vue-editor v-model="form.article" id="article" />
</b-form-group>
<b-form-group id="image" label="Image:" label-for="image">
<b-form-file
v-model="form.image"
:state="Boolean(form.image)"
placeholder="Choose a file or drop it here..."
drop-placeholder="Drop file here..."
></b-form-file>
<div class="mt-3">
Selected file: {{ form.image ? form.image.name : "" }}
</div>
</b-form-group>
<hr />
<b-button variant="success" class="btn-block" @click="submitForm()">Submit</b-button>
</b-form>
With my form in place I start looking at the imports and v-models I need for my form. Again Im using certain packages but please amend on what you need. For my WISIWIG I'm using https://www.vue2editor.com/ which is a simple solution and will give us all we need:
import { VueEditor } from "vue2-editor";
export default {
components: { VueEditor },
data() {
return {
form: {
title: "",
article: "",
image: null,
},
};
},
So what we have here is the import for the VueEditor and we have all our v-models in place to be able to send the data in the next part.
So we have a Model, Controller and Migration in place on the back-end and our form element has the form and all the important's we require to make that form work. In part 2 we are going to send data to the server and save the blog post and any files we require.
Top comments (1)
thanks for this tutorial, i tried it but I am getting error that I cant use v-model on input type file, when I change to v-on:change , I cant get the image in console