Mostrar lista de categorias de productos

public/js/app.js

@@ -1,5 +1,3 @@
-window.Event = new Vue();
-
 Vue.component('nav-bar', {
 	template: `
 		<nav class="navbar" role="navigation" aria-label="main navigation">

public/js/productos.js

@@ -0,0 +1,66 @@
+Vue.component('categorias-container', {
+  template: `
+    <div class="container">
+      <div class="columns is-multiline is-mobile">
+        <div v-for="catego in categorias" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
+          <div class="card" style="height:100%">
+            <div class="card-content">
+              <div class="media">
+                <div class="media-content" style="overflow:hidden">
+                  <p class="title is-6" v-text="catego"></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>`,
+  data() {
+    return {
+      categorias: null
+    }
+  },
+  mounted() {
+    axios.get("/api/categorias").then(response => {
+      this.categorias = response.data;
+    });
+  }
+});
+
+Vue.component('productos-container', {
+  template: `
+    <div class="productos-container">
+      <div v-for="producto in productos" class="card">
+        <div class="card-image">
+          <figure class="image is-4by3">
+            <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
+          </figure>
+        </div>
+        <div class="card-content">
+          <div class="media">
+            </div>
+            <div class="media-content">
+              <p class="title is-4">John Smith</p>
+              <p class="subtitle is-6">@johnsmith</p>
+            </div>
+          </div>
+
+          <div class="content">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Phasellus nec iaculis mauris. <a>@bulmaio</a>.
+            <a href="#">#css</a> <a href="#">#responsive</a>
+            <br>
+            <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
+          </div>
+        </div>
+      </div>
+    </div>`,
+  data() {
+    return {
+      productos: null
+    }
+  },
+  mounted() {
+    axios.get("/api/productos").then(response => this.productos = response.data);
+  }
+});

resources/views/layouts/app.blade.php

@@ -35,6 +35,7 @@
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script src="{{ asset('js/app.js') }}" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     @yield('scripts')
 </body>
 </html>

resources/views/productos.blade.php

@@ -1,23 +1,9 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container">
+<categorias-container></categorias-container>
-    <div class="row justify-content-center">
+@endsection
-        <div class="col-md-8">
+
-            <div class="card">
+@section('scripts')
-                <div class="card-header">{{ __('Dashboard') }}</div>
+<script src="{{ asset('js/productos.js') }}"></script>
-
-                <div class="card-body">
-                    @if (session('status'))
-                        <div class="alert alert-success" role="alert">
-                            {{ session('status') }}
-                        </div>
-                    @endif
-
-                    {{ __('You are logged in!') }}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
 @endsection

resources/views/subpedidos_create.blade.php

@@ -37,6 +37,5 @@
 @endsection
 
 @section('scripts')
-<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 <script src="{{ asset('js/subpedidos-create.js') }}"></script>
 @endsection