Updated app.js

app/Http/Controllers/CourseController.php

@@ -38,7 +38,7 @@ class CourseController extends Controller
         $course->name = $request->input('name');
         $course->save();
 
-        return response('Course created', 201);
+        return response($course, 201);
     }
 
     /**

bitbucket-pipelines.yml

@@ -0,0 +1,17 @@
+# This is a sample build configuration for PHP.
+# Check our guides at https://confluence.atlassian.com/x/e8YWN for more examples.
+# Only use spaces to indent your .yml configuration.
+# -----
+# You can specify a custom docker image from Docker Hub as your build environment.
+image: php:7.1.1
+
+pipelines:
+  default:
+    - step:
+        caches:
+          - composer
+        script:
+          - apt-get update && apt-get install -y unzip
+          - curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer
+          - composer install
+          - vendor/bin/phpunit

public/js/app.js

@@ -988,7 +988,7 @@ window.Vue = __webpack_require__(35);
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-Vue.component('example-component', __webpack_require__(38));
+Vue.component('course-form', __webpack_require__(38));
 
 var app = new Vue({
   el: '#app'
@@ -42552,7 +42552,7 @@ var Component = normalizeComponent(
   __vue_scopeId__,
   __vue_module_identifier__
 )
-Component.options.__file = "resources\\assets\\js\\components\\ExampleComponent.vue"
+Component.options.__file = "resources\\assets\\js\\components\\CourseForm.vue"
 if (Component.esModule && Object.keys(Component.esModule).some(function (key) {  return key !== "default" && key.substr(0, 2) !== "__"})) {  console.error("named exports are not supported in *.vue files.")}
 
 /* hot reload */
@@ -42562,9 +42562,9 @@ if (false) {(function () {
   if (!hotAPI.compatible) return
   module.hot.accept()
   if (!module.hot.data) {
-    hotAPI.createRecord("data-v-31af49ae", Component.options)
+    hotAPI.createRecord("data-v-542d9974", Component.options)
   } else {
-    hotAPI.reload("data-v-31af49ae", Component.options)
+    hotAPI.reload("data-v-542d9974", Component.options)
 ' + '  }
   module.hot.dispose(function (data) {
     disposed = true
@@ -42698,17 +42698,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 //
 //
 //
-//
-//
-//
-//
-//
-//
-//
 
 /* harmony default export */ __webpack_exports__["default"] = ({
     mounted: function mounted() {
-        console.log('Component mounted.');
+        console.log('Course form mounted.');
     }
 });
 
@@ -42727,22 +42720,19 @@ var staticRenderFns = [
     var _vm = this
     var _h = _vm.$createElement
     var _c = _vm._self._c || _h
-    return _c("div", { staticClass: "container" }, [
-      _c("div", { staticClass: "row" }, [
-        _c("div", { staticClass: "col-md-8 col-md-offset-2" }, [
-          _c("div", { staticClass: "panel panel-default" }, [
-            _c("div", { staticClass: "panel-heading" }, [
-              _vm._v("Example Component")
-            ]),
-            _vm._v(" "),
-            _c("div", { staticClass: "panel-body" }, [
-              _vm._v(
-                "\n                    I'm an example component!\n                "
-              )
-            ])
-          ])
-        ])
-      ])
+    return _c("form", [
+      _c("div", { staticClass: "form-group" }, [
+        _c("input", {
+          staticClass: "form-control",
+          attrs: { type: "text", id: "name", placeholder: "Course name" }
+        })
+      ]),
+      _vm._v(" "),
+      _c(
+        "button",
+        { staticClass: "btn btn-default", attrs: { type: "submit" } },
+        [_vm._v("Submit")]
+      )
     ])
   }
 ]
@@ -42751,7 +42741,7 @@ module.exports = { render: render, staticRenderFns: staticRenderFns }
 if (false) {
   module.hot.accept()
   if (module.hot.data) {
-    require("vue-hot-reload-api")      .rerender("data-v-31af49ae", module.exports)
+    require("vue-hot-reload-api")      .rerender("data-v-542d9974", module.exports)
   }
 }
 

resources/assets/js/app.js

@@ -15,8 +15,8 @@ window.Vue = require('vue');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-Vue.component('example-component', require('./components/ExampleComponent.vue'));
+Vue.component('course-form', require('./components/CourseForm.vue'));
 
 const app = new Vue({
     el: '#app'
-});
+});

resources/assets/js/components/CourseForm.vue

@@ -0,0 +1,16 @@
+<template>
+    <form>
+        <div class="form-group">
+            <input type="text" class="form-control" id="name" placeholder="Course name"/>
+        </div>
+        <button type="submit" class="btn btn-default">Submit</button>
+    </form>
+</template>
+
+<script>
+    export default {
+        mounted() {
+            console.log('Course form mounted.')
+        }
+    }
+</script>

resources/assets/js/components/ExampleComponent.vue

@@ -1,23 +0,0 @@
-<template>
-    <div class="container">
-        <div class="row">
-            <div class="col-md-8 col-md-offset-2">
-                <div class="panel panel-default">
-                    <div class="panel-heading">Example Component</div>
-
-                    <div class="panel-body">
-                        I'm an example component!
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        mounted() {
-            console.log('Component mounted.')
-        }
-    }
-</script>

resources/views/dashboard.blade.php

@@ -8,4 +8,6 @@
 <p>{{ $course->name }}</p>
 @endforeach
 
+<course-form></course-form>
+
 @endsection