feat: Added Vue.js component CategoriesCreate.vue

Author: ahmadhuss

resources/js/app.js

@@ -19,10 +19,17 @@ window.Vue = Vue;
 Vue.prototype._ = _;
 // id app
 Vue.component('front-page', require('./components/FrontPage.vue').default);
+
+// id app
+let categoriesCreate = Vue.component('categories-create', require('./components/CategoriesCreate.vue').default);
+
 // Load third party vue component `laravel-vue-pagination`
 Vue.component('pagination', require('laravel-vue-pagination'));
 
 // load the front component
 new Vue({
-    el: '#app'
+    el: '#app',
+    components: {
+        categoriesCreate: categoriesCreate
+    }
 });

resources/js/components/CategoriesCreate.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="container py-5">
+        <div class="row">
+            <div class="col-lg-12">
+                    <div class="mb-3">
+                        <label for="name" class="form-label">Name:</label>
+                        <input type="text" v-model="name" name="name" class="form-control" id="name" placeholder="Category Name" autocomplete="off">
+                        <input type="button" class="btn btn-primary mt-3" value="Add Category" @click="createCategory()">
+                    </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'CategoriesCreate',
+    data: function (){
+        return {
+            name: ''
+        }
+    },
+    methods: {
+        createCategory: function (){
+            console.log('Creating Category...');
+            axios.post('/api/categories', {
+                name: this.name
+                }).then( function(response) {
+                    console.log('New Category ID', response.data.data.id);
+                }).catch(function(err) {
+                    console.log('Category Route error Promise has been rejected!', err);
+            });
+        }
+    }
+}
+</script>

resources/views/create.blade.php

@@ -0,0 +1,7 @@
+@extends('master')
+
+@section('vue')
+  <div id="app">
+      <categories-create></categories-create>
+  </div>
+@endsection

routes/web.php

@@ -16,3 +16,6 @@
 
 // Just load the Blade File
 Route::view('/', 'home');
+
+// Categories create.blade.php file for the form creation.
+Route::view('/categories/create', 'create')->name('categories.create');