This article originally appeared on the Cosmic JS Blog . In this tutorial, we are going to be creating a simple inventory management application with Laravel and Vue.js as our frontend. This tutorial assumes you have a basic knowledge of object oriented php and javascript, and though we will be going through the basics of Laravel and Vue.js, it is recommended to have a basic understanding of their concepts. Now that we have that cleared, fire up your php server and let’s build something. TL;DR View Demo Check out the code on GitHub Getting Started: Since this is a laravel application you will need to create a new laravel project, ensure your server meets laravel’s requirements as stated here Laravel Server Requirements, and also make sure you have Composer installed on your server. Once you have composer installed open up your command line and cd into your server root then simply run composer create-project --prefer-dist laravel/ laravel inventory This will setup a new laravel project in the directory inventory once it has been succesfully run. After setting up the new project you will then run npm install or npm install — no-bin-links if you are devveloping on windows. This will download and setup all our javascript dependencies. To be able to view our empty laravel project simply run php artisan serve from our project’s directory, this will fire up a php server from our project’s root which you can then type in your browser url and you should be greeted with the default laravel screen. http://127.0.0.1:8000 Setting up the Cosmic JS php library We will be using some functions from the Cosmic JS php library, download the repo into a separate folder, we will have to edit it a bit to work neatly with laravel. In the folder, create a folder and copy all the contents of the library into it, such that for example the path for becoms . Then rename class to and change this top part of the code: inventory/app/ /Vendor/cosmicjs cosmicjs-php cosmicjs.php app/Vendor/cosmicjs/cosmicjs.php app/Vendor/cosmicjs/curl app/Vendor/cosmicjs/cosmiccurl { ... } class Curl to \ \ ; { .... } namespace App Vendor cosmicjs class CosmicCurl What we did was add a namespace to the cosmiccurl file so we can import into laravel and change the class name to match the file name. After doing that replace this section of cosmicjs.php include( ); $curl = Curl; { { global $curl; global $config; $ ->curl = $curl; $ ->config = $config; $ ->config->bucket_slug = $config->bucket_slug; $ ->config->object_slug = $config->object_slug; $ ->config->read_key = $config->read_key; $ ->config->write_key = $config->write_key; $ ->config->url = . $ ->config->bucket_slug; $ ->config->objects_url = $ ->config->url . . $ ->config->read_key; $ ->config->object_url = $ ->config->url . . $ ->config->object_slug . . $ ->config->read_key; $ ->config->media_url = $ ->config->url . . $ ->config->read_key; $ ->config->add_object_url = $ ->config->url . . $ ->config->write_key; $ ->config->edit_object_url = $ ->config->url . . $ ->config->write_key; $ ->config->delete_object_url = $ ->config->url . . $ ->config->write_key; } "curl.php" new class CosmicJS ( ) function __construct this this this this this this this "https://api.cosmicjs.com/v1/" this this this "/objects?read_key=" this this this "/object/" this "?read_key=" this this this "/media?read_key=" this this this "/add-object?write_key=" this this this "/edit-object?write_key=" this this this "/delete-object?write_key=" this with \ \ ; \ \ \ ; { $config; $curl; { ->curl = CosmicCurl(); ->config = \stdClass(); ->config->bucket_slug = $bucket_slug; ->config->object_slug = $object_slug; ->config->type_slug = $type_slug; ->config->read_key = $read_key; ->config->write_key = $write_key; ->config->url = . ->config->bucket_slug; ->config->objects_url = ->config->url . . ->config->read_key; ->config->object_type_url = ->config->url . . ->config->type_slug . . ->config->read_key; ->config->object_url = ->config->url . . ->config->object_slug . . ->config->read_key; ->config->media_url = ->config->url . . ->config->read_key; ->config->add_object_url = ->config->url . . ->config->write_key; ->config->edit_object_url = ->config->url . . ->config->write_key; ->config->delete_object_url = ->config->url . . ->config->write_key; } namespace App Vendor cosmicjs use App Vendor cosmicjs CosmicCurl class CosmicJS private private function __construct ($bucket_slug, $type_slug,$object_slug = , $read_key = , $write_key = ) "" "" "" $this new $this new //$this->config = $config; $this $this $this $this $this $this "https://api.cosmicjs.com/v1/" $this $this $this "/objects?read_key=" $this $this $this "/object-type/" $this "?read_key=" $this $this $this "/object/" $this "?read_key=" $this $this $this "/media?read_key=" $this $this $this "/add-object?write_key=" $this $this $this "/edit-object?write_key=" $this $this $this "/delete-object?write_key=" $this what this bit of change does is that it imports the cosmiccurl using its namespace, and it enables us to create multiple instances of a cosmicjs object quickly within laravel, simply by initializing with constructor parameters instead of having to setup some config variables which can get messy when being used with larger applications. Finally add the following function to the file. cosmicjs.php { ->config->object_by_meta_object = ->config->url . . ->config->type_slug . . $key . .$slug; $data = json_decode( ->curl->get( ->config->object_by_meta_object)); $data; } public function getByObjectSlug ($key,$slug) $this $this "/object-type/" $this "/search?metafield_key=" "&metafield_object_slug=" $this $this return Building our app Now that we have our cosmicjs library setup in the app/Vendor folder, its time to actually build something. Since all requests will be handled by the file open it up and copy and paste this code into it. app/Http/Controller/IndexController.php \ \ ; \ \ ; \ \ \ ; \ ; { $locations_cosmic; $items_cosmic; $bucket_slug = ; $read_key = ; $write_key = ; { ->bucket_slug = config( ); ->read_key = config( ); ->write_key = config( ); ->locations_cosmic = CosmicJS( ->bucket_slug, ); ->items_cosmic = CosmicJS( ->bucket_slug, , ->read_key, ->write_key); } { $locations = ->locations_cosmic->getObjectsType(); (property_exists($locations, )) { $data[ ] = $locations->objects; } { $data[ ] = []; } $data[ ] = ->bucket_slug; ($location) { $data[ ] = $location; } { $data[ ] = ; } view( , $data); } { $items = ->items_cosmic->getByObjectSlug( , $slug); (property_exists($items, )) { $items->objects; } { ; } } { $title = $request->input( ); $address = $request->input( ); $picture = $request->input( ); $data[ ] = $title; $data[ ] = ; $data[ ] = ->bucket_slug; $metafields = (); $address_data[ ] = ; $address_data[ ] = ; $address_data[ ] = $address; ($picture != ) { $picture_data[ ] = ; $picture_data[ ] = ; $picture_data[ ] = $picture; array_push($metafields, $picture_data); } array_push($metafields, $address_data); $data[ ] = $metafields; $client = Client(); $result = $client->post( . ->bucket_slug . , [ => $data, => [ => , ] ]); $request->session()->flash( , . $title . ); $result->getBody(); } { $name = $request->input( ); $count = $request->input( ); $location_id = $request->input( ); $picture = $request->input( ); $data[ ] = $name; $data[ ] = ; $data[ ] = ->bucket_slug; $count_metafield[ ] = ; $count_metafield[ ] = $count; $count_metafield[ ] = ; $location_meta[ ] = ; $location_meta[ ] = ; $location_meta[ ] = ; $location_meta[ ] = $location_id; $metafields = (); ($picture != ) { $picture_data[ ] = ; $picture_data[ ] = ; $picture_data[ ] = $picture; array_push($metafields, $picture_data); } array_push($metafields, $count_metafield); array_push($metafields, $location_meta); $data[ ] = $metafields; $client = Client(); $result = $client->post( . ->bucket_slug . , [ => $data, => [ => , ] ]); $request->session()->flash( , . $name . ); $result->getBody(); } { $name = $request->input( ); $count = $request->input( ); $slug = $request->input( ); $location_id = $request->input( ); $data[ ] = $name; $data[ ] = $slug; $count_meta[ ] = ; $count_meta[ ] = $count; $count_meta[ ] = ; $location_meta[ ] = ; $location_meta[ ] = ; $location_meta[ ] = ; $location_meta[ ] = $location_id; $metafields = (); ($request->input( )) { $picture_data[ ] = ; $picture_data[ ] = ; $picture_data[ ] = $request->input( ); array_push($metafields, $picture_data); } array_push($metafields, $count_meta); array_push($metafields, $location_meta); $data[ ] = $metafields; $client = Client(); $result = $client->put( . ->bucket_slug . , [ => $data, => [ => , ] ]); $request->session()->flash( , ); $result->getBody(); } { $client = Client(); $result = $client->delete( . ->bucket_slug . . $slug, [ => [ => , ] ]); $request->session()->flash( , ); $result; } } <?php namespace App Http Controllers use Illuminate Http Request use App Vendor cosmicjs CosmicJS use GuzzleHttp Client class IndexController extends Controller private private private '' private '' private '' public function __construct () //initialize cosmicjs php instance for fetching all locations $this 'cosmic.slug' $this 'cosmic.read' $this 'cosmic.write' $this new $this 'locations' $this new $this 'items' $this $this public function index ($location = null) //get objects with cosmic-js php $this //set locations and bucket_slug variable to be passed to view if 'objects' 'locations' else 'locations' 'bucket_slug' $this //if location slug was passed in url, pass it to view as well if 'location_slug' else 'location_slug' '' //load view return 'index' //fetch items for location based on slug public function itemsByLocation ($slug) //fetch items using the cosmicjs library's custom function $this 'location' //if the returned value has "object" property, pass it if 'objects' //returning arrays in laravel automatically converts it to json string return else return 0 public function newLocation (Request $request) //get passed input 'title' 'address' 'image' //set data array 'title' 'type_slug' "locations" 'bucket_slug' $this array 'key' "address" 'type' 'textarea' 'value' if '' 'key' "picture" 'type' 'file' 'value' 'metafields' //create a new guzzle client new //create guzzle request with data array passed as json value 'https://api.cosmicjs.com/v1/' $this '/add-object' 'json' 'headers' 'Content-type' 'application/json' //flash message 'status' 'The location"' '" was successfully locations' //return result body return //create a new item public function newItem (Request $request) //get data 'name' 'count' 'location' 'image' //create data array to be passed 'title' 'type_slug' "items" 'bucket_slug' $this 'key' "count" 'value' 'type' "text" 'key' "location" 'object_type' "locations" 'type' "object" 'value' array //set picture if passed into request if '' 'key' "picture" 'type' 'file' 'value' 'metafields' new 'https://api.cosmicjs.com/v1/' $this '/add-object' 'json' 'headers' 'Content-type' 'application/json' //flash message 'status' 'The Item "' '" was successfully created' //return result body return public function editItem (Request $request) 'name' 'count' 'slug' 'location_id' 'title' 'slug' 'key' "count" 'value' 'type' "text" 'key' "location" 'object_type' "locations" 'type' "object" 'value' array //set picture if passed into request if 'image' 'key' "picture" 'type' 'file' 'value' 'image' 'metafields' new 'https://api.cosmicjs.com/v1/' $this '/edit-object' 'json' 'headers' 'Content-type' 'application/json' //flash message 'status' 'The Item was successfully edited!' //return result body return public function deleteItem (Request $request, $slug) //create new client and delete item new 'https://api.cosmicjs.com/v1/' $this '/' 'headers' 'Content-type' 'application/json' //flash message 'status' 'The Item was successfully deleted!' return The code above is preety self explanatory with the comments included Things to note: We create a new Cosmic JS instance for retrieving locations We are setting up all functions our vuejs frontend will interact with $client = new CLient() creates a new guzzle instance which we use to make calls to the cosmic api Next we will create our routes in the file. Open up the file and copy and paste this code into it. routes/web.php Route::get( , ); Route::get( , ); Route::post( , ); Route::post( , ); Route::post( , ); <?php '/{location?}' 'IndexController@index' 'items/{slug}' 'IndexController@itemsByLocation' 'locations/new' 'IndexController@newLocation' 'items/new' 'IndexController@newItem' 'items/edit' 'IndexController@editItem' what are we doing We are registering all our IndexCOntroller’s function to routes so they can be accessible by the frontend. Building the frontend Remember this code in our IndexController return view(‘index’, $data);? well its time to create the view that will be loaded. Open up the folder and open up the then copy and paste this into it. /resources/views master.blade.php Inventory Manger @yield('content') @yield('scripts') < = > html lang "{{ config('app.locale') }}" < > head < = > meta charset "utf-8" < = = > meta http-equiv "X-UA-Compatible" content "IE=edge" < = = > meta name "viewport" content "width=device-width, initial-scale=1" <!-- Set Csrf token on all pages --> < = = > meta name "csrf-token" content "{{ csrf_token() }}" <!-- Load Bootstrap--> < = = = = > link rel "stylesheet" href "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin "anonymous" < = = = > link href "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.2/sweetalert2.css" rel "stylesheet" type "text/css" < > title </ > title <!-- Fonts --> < = = /> link rel "stylesheet" href "{{ asset('css/font-awesome/css/font-awesome.min.css')}}" < = = = > link href "https://fonts.googleapis.com/css?family=Raleway:100,600" rel "stylesheet" type "text/css" < = > script src "https://use.fontawesome.com/682442a8be.js" </ > script <!-- Set Csrf token to be used by javascript and axios--> < > script .Laravel = window 'csrfToken' json_encode([ <?php echo => csrf_token(), ]); ?> </ > script <!-- Styles --> < > style { : ; : ; } > { : absolute; : ; : ; : ; : auto; : ; } { : ; } { : ; : white ; } { : ; } { : ; : white ; : ; : ; : ; } .location-tab height 104px padding-left 150px .location-tab img position left 0 top 0 height 100% width max-width 130px .text-primary color #29ABE2 !important .panel-heading background-color #29ABE2 !important color !important .panel border-color #29ABE2 !important .btn-primary background-color #29ABE2 !important color !important border-color #29ABE2 !important border-radius 3px margin 10px 0 </ > style </ > head < > body < = > div class "container" < = > div id "wrapper" </ > div </ > div <!-- Load Jquery and bootstrap js--> < = = = > script src "https://code.jquery.com/jquery-3.2.1.min.js" integrity "sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin "anonymous" </ > script < = = = > script src "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin "anonymous" </ > script < = > script src "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.2/sweetalert2.min.js" </ > script < = > script src "{{ asset('/js/app.js')}}" </ > script </ > body </ > html THe will serve as an extendable layout which we can then use as parent layouts for all our other views. Now create an file in the same folder and paste this into it. master.blade.php index.blade.php @extends( ) @section( ) <div {{Session::get( )}} {{ json_encode($locations) }} {{ $bucket_slug }} {{ $location_slug }} 'master' 'content' =" "> < =" - -12"> < =" : "> < > </ > </ > < =" : ; - : 20 "> < =" - ">< =" - "></ > </ > </ > </ > </ > < =" "> < =" - -12"> < =" : ; - : 15 ;">< =" :// . " =" " =" - : ;">< =" - " =" :// . / / . " ="28" ="28" =" - : 10 ;">< =" : (102, 102, 102); : ; : 3 ;"> </ ></ ></ > </ > </ > < =" " =" - : 16 "> <!-- --> < =" class row div class col md div style float left h1 Inventory Management h1 div div style float right padding top px a class btn btn default i class fa fa github i View on Github a div div div div class row div class col md div style float right margin bottom px a href https cosmicjs com target _blank style text decoration none img class pull left src https cosmicjs com images logo svg width height style margin right px span style color rgb position relative top px Proudly powered by Cosmic JS span a div div div div class row style font size px Display vue component and set props from given data inventory message 'status' " :initial-locations=" " slug=" " location-slug=" "></inventory> </div> @endsection @section('scripts') <script> </script> @endsection Things to note We created a master layout which has available sections for content, script and style that our other view can extend. We added the vue component (which will be created in the next section), with props as the data given to the view by the controller Creating Our Controller This section assumes you have fundamental knowledge of Vuejs, if not i recommend you brush up on it, as explaining how some vue functions works is out of the scope of this tutorial. Now to begin, open a command prompt and cd to the app’s folder then run npm run watch to fire up laravel mix, this will compile our assets whenever a change has been made to any of our files, alternatively you could type npm run dev whenever you need to compile the assets yourself. Open the file and change this /resources/assets/js/app.js Vue.component( , ( )); 'example' require './components/Example.vue' to Vue.component( , ( )); 'inventory' require './components/Inventory.vue' Here we are replacing the default example component with a component called inventory which we will be the folder create and file to house our component. In the newly created file copy and paste this code into it creating.In /resources/assets/js/components Inventory.vue Go back Add New Location Name Address Image Submit Add New < > template < > div <!---- ADD LOCATION FORM --> < = > div v-if "add_location" < = = > button class "btn btn-primary" v-on:click "add_location=false" < = = > span class "glyphicon glyphicon-chevron-left" aria-hidden "true" </ > span </ > button < = > div class "panel panel-default" < = > div class "panel-heading" </ > div < = > div class "panel-body" < = = > form id "location_form" name "location" < = > div class "form-group" < = > label for "name" </ > label < = = = = > input type "text" class "form-control" name "title" required "" < = > label for "address" </ > label < = = = = > input type "text" class "form-control" name "address" required "" < = > label for "image" </ > label < = = = /> input type "file" class "form-control media" name "media" </ > div < = = = = > button type "submit" class "btn btn-primary" :class "{disabled: isDisabled}" v-on:click.prevent "addLocation" </ > button </ > form </ > div </ > div </ > div < > div v-else <!---- LOCATIONS LIST --> < = > div v-if "unselected" < = = > button class "btn btn-primary pull-right" v-on:click "add_location = true" < = = > span class "glyphicon glyphicon-plus" aria-hidden "true" </ > span </ > button < = > ul class "list-group" < = = = = = > button type "button" class "list-group-item location-tab text-primary" :class "{disabled: list_disable}" v-for "location in locations" v-on:click "fetchItems(location)" < = = > img v-if "location.metadata.hasOwnProperty('picture')" :src "location.metadata.picture.url" {{ location.title }} - {{ location.metadata.address}} Go back Add New Item Name Count Image Submit Go back Edit </ > button </ > ul </ > div < > div v-else <!---- ADD ITEM FORM --> < = > div v-if "add_item" < = = > button class "btn btn-primary" v-on:click "add_item=false" < = = > span class "glyphicon glyphicon-chevron-left" aria-hidden "true" </ > span </ > button < = > div class "panel panel-default" < = > div class "panel-heading" </ > div < = > div class "panel-body" < = > form id "item_form" < = > div class "form-group" < = > label for "name" </ > label < = = = > input type "text" class "form-control" name "name" </ > div < = > div class "form-group" < = > label for "count" </ > label < = = = > input type "number" class "form-control" name "count" </ > div < > div < = > label for "image" </ > label < = = = /> input type "file" class "form-control media" name "media" </ > div < = = = = > button type "submit" class "btn btn-primary" :class "{disabled: isDisabled}" v-on:click.prevent "addItem" </ > button </ > form </ > div </ > div </ > div <!---- EDIT ITEM FORM --> < = > div v-else-if "edit_item" < = = > button class "btn btn-primary" v-on:click "edit_item=false" < = = > span class "glyphicon glyphicon-chevron-left" aria-hidden "true" </ > span </ > button < = > div class "panel panel-default" < = > div class "panel-heading" {{ selected_item.title }} Name Count Submit Go back Add New Item </ > div < = > div class "panel-body" < = > form id "edit_item" < = > div class "form-group" < = > label for "name" </ > label < = = = = > input type "text" class "form-control" name "name" :value "selected_item.title" </ > div < = > div class "form-group" < = > label for "count" </ > label < = = = = > input type "number" class "form-control" name "count" :value "selected_item.metadata.count" </ > div < = = = = > button type "submit" class "btn btn-primary" :class "{disabled: isDisabled}" v-on:click.prevent "editItem" </ > button </ > form </ > div </ > div </ > div < > div v-else <!---- ITEMS LIST --> < = = > button class "btn btn-primary" v-on:click "unselected=true" < = = > span class "glyphicon glyphicon-chevron-left" aria-hidden "true" </ > span </ > button < = = > button class "btn btn-primary pull-right" v-on:click "add_item = true" < = = > span class "glyphicon glyphicon-plus" aria-hidden "true" </ > span </ > button < = > div class "panel panel-default" < = > div class "panel-heading" {{ selected_location.title }} </ > div < = > div class "panel-body" < = > ul class "list-group" < = = = = > button type "button" class "list-group-item text-primary location-tab" :class "{disabled: isDisabled}" v-for "item in items" < = = > img v-if "item.metadata.hasOwnProperty('picture')" :src "item.metadata.picture.url" {{ item.title }} - {{ item.metadata.count }} < = > div class "pull-right" < = = = > span class "glyphicon glyphicon-pencil" aria-hidden "true" v-on:click.prevent "openEdit(item)" </ > span < = = = = > span class "glyphicon glyphicon-trash" aria-hidden "true" v-on:click.prevent "deleteItem(item)" style "padding: 0 5px;" </ > span </ > div </ > button </ > ul </ > div </ > div </ > div </ > div </ > div </ > div </ > template < > script { mounted() { self = ; ( .message) { swal( .message); } ( .locationSlug) { .unselected = ; item = .locations.filter( { obj.slug === self.locationSlug; }); .selected_location = item[ ]; .fetchItems( .selected_location); } }, : [ , , , ], : { { : , : .initialLocations, : , : , : , : [], : , : [], : [], : }; }, : { fetchItems(location) { self = ; .list_disable = ; axios.get( + location.slug).then( { (response.data.constructor === ) { self.items = (response.data); self.selected_location = location; self.unselected = ; } { self.selected_location = location; self.items = []; self.unselected = ; } self.list_disable = ; }); }, addLocation() { .isDisabled = ; image = ; form = $( )[ ]; data = FormData(form); ($( ).val() !== ) { axios.defaults.headers.common[ ]; axios.post( + .slug + , data).then( { .axios.defaults.headers.common[ ] = .Laravel.csrfToken; image = response.data.media.name; data.set( , image); axios.post( , data).then( { location.reload( ); }); }); } { .axios.defaults.headers.common[ ] = .Laravel.csrfToken; axios.post( , data).then( { location.reload( ); }); } }, openEdit(item) { .selected_item = item; .edit_item = ; }, addItem() { self = ; .isDisabled = ; form = $( )[ ]; data = FormData(form); data.append( , .selected_location._id); ($( ).val() !== ) { axios.defaults.headers.common[ ]; axios.post( + .slug + , data).then( { .axios.defaults.headers.common[ ] = .Laravel.csrfToken; image = response.data.media.name; data.set( , image); axios.post( , data).then( { .location.href = + self.selected_location.slug; }); }); } { .axios.defaults.headers.common[ ] = .Laravel.csrfToken; axios.post( , data).then( { .location.href = + self.selected_location.slug; }); } }, editItem() { self = ; form = $( )[ ]; data = FormData(form); .isDisabled = ; data.append( , .selected_item.slug); ( .selected_item.metadata.hasOwnProperty( )){ data.append( , .selected_item.metafields[ ].value); } data.append( , .selected_location._id); axios.post( , data).then( { .location.href = + self.selected_location.slug; }); }, deleteItem(item) { self = ; swal({ : , : , : , : , : , : }).then( { axios.get( + item.slug + ).then( { .location.href = + self.selected_location.slug; }); }) } } } export default var this //If location slug was passed show items for that location if this this if this this false //find location with slug var this ( ) function obj return this 0 this this props 'initial-locations' 'slug' 'location-slug' 'message' data ( ) function return edit_item false locations this isDisabled false list_disable false unselected true items add_location false selected_location selected_item add_item false methods //disable the list and fetch items from laravel var this this true 'items/' => response if Array false else false false //disable button this true var '' var "#location_form" 0 var new //Check if image is selected then upload image first if "#location_form .media" '' //delete X-csrf-token default header as it is not accepted by cosmic api delete "X-CSRF-TOKEN" 'https://api.cosmicjs.com/v1/' this '/media' ( ) function response //set x-csrf-token again window 'X-CSRF-TOKEN' window //get image name, append to formdata and send form data to laravel to add location 'image' 'locations/new' => response true else window 'X-CSRF-TOKEN' window //send form data to laravel without image 'locations/new' => response true //set selected item and open edit item section this this true var this this true var '#item_form' 0 var new 'location' this //Check if image is selected the upload image first if "#item_form .media" '' //delete X-csrf-token default header as it is not allowed by cosmic api and post delete "X-CSRF-TOKEN" 'https://api.cosmicjs.com/v1/' this '/media' ( ) function response //set x-csrf-token again window 'X-CSRF-TOKEN' window //get image name, append to formdata and send form data to laravel to add location var 'image' 'items/new' => response //refresh page BUT pass location_slug, which then makes the app load into the passed location window "./" else //add header back after post window 'X-CSRF-TOKEN' window //send form data to laravel without image 'items/new' => response window "./" //edit item, by sending data to IndexController's editItem() function var this var "#edit_item" 0 var new this true 'slug' this if this 'picture' 'image' this 0 'location_id' this 'items/edit' => response //refresh page BUT pass location_slug, which then makes the app load into the passed location window "./" var this title 'Are you sure?' text 'You will not be able to recover this item!' type 'warning' showCancelButton true confirmButtonText 'Yes, delete it!' cancelButtonText 'Nope, still need it' ( ) function 'item/' '/delete' => response window "./" </ > script The big question, what is going on here (A Lot)? A lot is going on in our vue components as that is where majority of the frontend is, to keep the tutorial simple, the main goal of sections and variables will be stated out, also the comments in the code explain what that section of the code is meant to accomplish We begin by setting up a few boolean (edit_item, add_item, add_location, unselected), these help in switching thw views of our app wheenever a variable has been changed, e.g when edit_item is true, the view is switched to the edit item form isDisable and list_disable are used to disable some ui elements sucha s buttons by binding their values to “disabled” class of bootstrap buttons Code in the mounted function, simply checks if a location slug was passed and if so switch the view to the location’s items The methods created perform calls when actions have been taken, their main logic is stated in comments We used axios to make all our calls to laravel backend For image uploads, we first check if a file is selected, the upload the selected file first, before creating a new item with its picture metadata set as the returned picture name. Note Make sure the assets were successfully compiled after the changes were made, and if you want to manually compile it simply run npm run production to compile into productin mode. We create a self variable and set it to this at the start of most functions because, if we use this in some nested function calls, we begin to loose context for the this variable. More info can be found on this stack overflow post Setting the bucket slug Now we want to set our bucket slug. We want to be able to set it by running an artisan comman so run . Now navigate to and copy and paste this into it: php artisan make:command SetSlug app/console/Commands/SetSlug \ \ ; \ \ ; { $signature = ; $description = ; $files; $read; $write; { ::__construct(); ->files = $files; } { ->read = ->argument( ); ->write = ->argument( ); $config_path = base_path() . ; $content = . ->argument( ) . . . ->argument( ). . . ->argument( ). ; ->files->put($config_path, $content); ; } } <?php namespace App Console Commands use Illuminate Console Command class SetSlug extends Command /** * The name and signature of the console command. * * string */ @var protected 'bucket {slug} {read?} {write?}' /** * The console command description. * * string */ @var protected 'Set the bucket slug' /** * Create a new command instance. * * void */ @return protected protected protected public function __construct (\Illuminate\Filesystem\Filesystem $files) parent $this /** * Execute the console command. * * mixed */ @return public function handle () $this $this 'slug' $this $this 'slug' "/config/cosmic.php" "<?php\n\treturn [\n\t\t'slug' => '" $this 'slug' "',\n\t\t" "'read' => '" $this 'read' "',\n\t\t" "'write' => '" $this 'write' "',\n\t];" $this echo "Bucket variables set" What we are doing is opening/creating a configuration file at config/cosmic.php and saving our variables from the command, now the bucket slug can be set with php artisan bucket bucket_slug read_key write_key. Now register it in your app/console/kernel.php on the commands section with $commands = [ Commands\SetSlug::class ]; protected Conclusion We were able to create and update items using vue, the cosmic Js php library, a bit of guzzle, and a lot of axios. You can feel free to tinker with the code and make your own modifications, a way to delete items, move to new locations, you name it, remember we only scratched the surface of the amazing use of Cosmic JS with Laravel. So go on and create something amazing.
