install store;

package-lock.json

@@ -31,7 +31,8 @@
         "eslint-plugin-vue": "^7.0.0",
         "node-sass": "^6.0.1",
         "sass": "^1.43.5",
-        "sass-loader": "^10.2.0"
+        "sass-loader": "^10.2.0",
+        "vue-cli-plugin-store": "~0.0.7"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -3229,6 +3230,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ast-types": {
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.11.5.tgz",
+      "integrity": "sha512-oJjo+5e7/vEc2FBK8gUalV0pba4L3VdBIs2EKhOLHLcOd2FgQIVQN9xb0eZ9IjEWyAL7vq6fGJxOvVvdCHNyMw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/astral-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
@@ -12081,6 +12091,15 @@
         "renderkid": "^2.0.4"
       }
     },
+    "node_modules/private": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
+      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -12406,6 +12425,30 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recast": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.15.5.tgz",
+      "integrity": "sha512-nkAYNqarh73cMWRKFiPQ8I9dOLFvFk6SnG8u/LUlOYfArDOD/EjsVRAs860TlBLrpxqAXHGET/AUAVjdEymL5w==",
+      "dev": true,
+      "dependencies": {
+        "ast-types": "0.11.5",
+        "esprima": "~4.0.0",
+        "private": "~0.1.5",
+        "source-map": "~0.6.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/recast/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -15393,6 +15436,15 @@
         "@vue/shared": "3.2.29"
       }
     },
+    "node_modules/vue-cli-plugin-store": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-store/-/vue-cli-plugin-store-0.0.7.tgz",
+      "integrity": "sha512-cIGMq9Z5SXzbrbwW7KPYBBOb+wOnGI9/ynb78CcZzkacYDxRvUsNF5m6Q76MclLBNGk/N4+fHJh4P1xfwdGidw==",
+      "dev": true,
+      "dependencies": {
+        "recast": "^0.15.2"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -18435,8 +18487,7 @@
       "version": "4.5.15",
       "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.15.tgz",
       "integrity": "sha512-fqap+4HN+w+InDxlA3hZTOGE0tzBTgXhKLoDydhywqgmhQ1D9JA6Feh94ze6tG8DsWX58/ujYUqA8jAz17FJtg==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.15",
@@ -18653,8 +18704,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "@vue/reactivity": {
       "version": "3.2.29",
@@ -18928,8 +18978,7 @@
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -18959,15 +19008,13 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
+      "dev": true
-      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -19183,6 +19230,12 @@
       "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
       "dev": true
     },
+    "ast-types": {
+      "version": "0.11.5",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.11.5.tgz",
+      "integrity": "sha512-oJjo+5e7/vEc2FBK8gUalV0pba4L3VdBIs2EKhOLHLcOd2FgQIVQN9xb0eZ9IjEWyAL7vq6fGJxOvVvdCHNyMw==",
+      "dev": true
+    },
     "astral-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
@@ -19499,8 +19552,7 @@
     "bootstrap": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
-      "requires": {}
     },
     "bootswatch": {
       "version": "5.1.3",
@@ -26224,6 +26276,12 @@
         "renderkid": "^2.0.4"
       }
     },
+    "private": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
+      "integrity": "sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==",
+      "dev": true
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -26495,6 +26553,26 @@
         "picomatch": "^2.2.1"
       }
     },
+    "recast": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.15.5.tgz",
+      "integrity": "sha512-nkAYNqarh73cMWRKFiPQ8I9dOLFvFk6SnG8u/LUlOYfArDOD/EjsVRAs860TlBLrpxqAXHGET/AUAVjdEymL5w==",
+      "dev": true,
+      "requires": {
+        "ast-types": "0.11.5",
+        "esprima": "~4.0.0",
+        "private": "~0.1.5",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -28944,6 +29022,15 @@
         "@vue/shared": "3.2.29"
       }
     },
+    "vue-cli-plugin-store": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-store/-/vue-cli-plugin-store-0.0.7.tgz",
+      "integrity": "sha512-cIGMq9Z5SXzbrbwW7KPYBBOb+wOnGI9/ynb78CcZzkacYDxRvUsNF5m6Q76MclLBNGk/N4+fHJh4P1xfwdGidw==",
+      "dev": true,
+      "requires": {
+        "recast": "^0.15.2"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",

package.json

@@ -32,7 +32,8 @@
     "eslint-plugin-vue": "^7.0.0",
     "node-sass": "^6.0.1",
     "sass": "^1.43.5",
-    "sass-loader": "^10.2.0"
+    "sass-loader": "^10.2.0",
+    "vue-cli-plugin-store": "~0.0.7"
   },
   "eslintConfig": {
     "root": true,

src/main.js

@@ -3,5 +3,6 @@ import App from './App.vue'
 import router from './router'
 import './css/app.scss'
 import 'bootstrap'
+import store from './store'
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(store).use(router).mount('#app')

src/router/index.js

@@ -11,10 +11,6 @@ const routes = [
     path: '/about',
     name: 'About',
   },
-  {
-    path: '/search',
-    name: 'Search',
-  },
 ]
 
 const router = createRouter({

src/views/Explore.vue

@@ -23,6 +23,7 @@ export default {
     data() {
         return {
             searchTerm: '',
+            resultCount: null,
             placeholder: '/img/minifig.png',
             results: []
         }
@@ -36,8 +37,7 @@ export default {
                 'https://rebrickable.com/api/v3/lego/minifigs/?key=197650df271511a5b9f4938301b4ef80&search=' + component.searchTerm
             ).then((response) => {
                 component.results = response.data.results;
-                // }).catch((error) => {
+                component.resultCount = response.data.count;
-                //
             })
         }
     }
@@ -51,6 +51,7 @@ export default {
 
 .minifig-image {
     max-height: 13em;
+    max-width: 100%;
     width: auto;
     margin: 0 auto;
 }

src/views/Search.vue

@@ -1,48 +0,0 @@
-<template>
-    <div class="home">
-        <input type="text" class="form-control" v-model="updatedSearchTerm"/>
-        <div class="card" v-for="(minifigIndex, minifig) in results.results" v-key="minifigIndex">
-            <div class="card-img">
-                <img src="" alt=""/>
-            </div>
-            <div class="card-content">{{ minifig.name }}</div>
-        </div>
-    </div>
-</template>
-
-<script>
-import axios from 'axios';
-
-export default {
-    name: 'Search',
-    props: {
-        searchTerm: {
-            default: '',
-            type: String
-        }
-    },
-    data() {
-        return {
-            updatedSearchTerm: '',
-            results: []
-        }
-    },
-    components: {},
-    mounted() {
-        this.loadSearchResults();
-    },
-    methods: {
-        loadSearchResults() {
-            let component = this;
-
-            axios.get(
-                'https://rebrickable.com/api/v3/lego/minifigs/?key=197650df271511a5b9f4938301b4ef80&search='+this.searchTerm
-            ).then((response) => {
-                component.results = response.data;
-            // }).catch((error) => {
-            //
-            })
-        }
-    }
-}
-</script>