{"id":20169937,"url":"https://github.com/cnocon/vue-images-app","last_synced_at":"2026-05-08T20:32:25.054Z","repository":{"id":124609373,"uuid":"341571494","full_name":"cnocon/vue-images-app","owner":"cnocon","description":null,"archived":false,"fork":false,"pushed_at":"2021-02-23T13:55:43.000Z","size":149,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-03T04:15:18.289Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cnocon.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-23T13:55:26.000Z","updated_at":"2021-02-23T13:55:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"2b2af6fb-57a2-4e43-a6f8-5f0eb6a9dc09","html_url":"https://github.com/cnocon/vue-images-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cnocon/vue-images-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Fvue-images-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Fvue-images-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Fvue-images-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Fvue-images-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cnocon","download_url":"https://codeload.github.com/cnocon/vue-images-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Fvue-images-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32795899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T01:14:27.729Z","updated_at":"2026-05-08T20:32:25.038Z","avatar_url":"https://github.com/cnocon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n    \u003chtml\u003e\n    \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\"\u003e\n        \u003ctitle\u003eimages\u003c/title\u003e\n        \u003cstyle\u003e\n/* From extension bierner.markdown-checkbox */\n.contains-task-list {\n    padding-left: 0;\n}\n\n.contains-task-list li {\n    margin-left: 24px;\n}\n\n.contains-task-list .task-list-item {\n    list-style: none;\n    padding-left: 0;\n    margin-left: 0;\n}\n\n.contains-task-list .contains-task-list {\n    padding-left: 20px;\n} \n/* From extension bierner.markdown-preview-github-styles */\nbody {\n    background: white;\n}\n\n.vscode-body {\n    box-sizing: border-box;\n    min-width: 200px;\n    max-width: 980px;\n    margin: 0 auto;\n    padding: 40px;\n    border: 1px solid transparent;\n}\n\n.vscode-body blockquote {\n    background-color: initial;\n}\n\n.vscode-body pre {\n    color: initial;\n    background: #f7f7f7 !important;\n}\n\n.vscode-body code {\n    color: inherit;\n}\n\n.vscode-body pre code {\n    color: initial;\n}\n\n.vscode-body code \u003e div {\n    background: none\n}\n\n.vscode-body table th,\n.vscode-body table td {\n    border: 1px solid #ddd !important;\n}\n\n.vscode-body.showEditorSelection .code-active-line:before {\n\tborder-left: 3px solid rgba(0, 0, 0, 0.15);\n}\n\n.vscode-body.showEditorSelection .code-line:hover:before {\n\tborder-left: 3px solid rgba(0, 0, 0, 0.40);\n}\n\n.vscode-body.showEditorSelection .code-line .code-line:hover:before {\n\tborder-left: none;\n}\n\n.vscode-body p,\n.vscode-body blockquote,\n.vscode-body ul,\n.vscode-body ol,\n.vscode-body dl,\n.vscode-body table,\n.vscode-body pre {\n  margin-top: 16px;\n  margin-bottom: 16px;\n}\n\nbody.vscode-body::-webkit-scrollbar {\n    background-color: white;\n}\nbody.vscode-body::-webkit-scrollbar-thumb {\n    background-color: rgba(100, 100, 100, 0.4);\n}\nbody.vscode-body::-webkit-scrollbar-thumb:hover {\n    background-color: rgba(100, 100, 100, 0.7);\n}\n\n/* Generated from 'node_modules/github-markdown-css/github-markdown.css' */\n@font-face {\n  font-family: octicons-link;\n  src: url(data:font/woff;charset=utf-8;base64,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) format('woff');\n}\n\n.vscode-body {\n  -ms-text-size-adjust: 100%;\n  -webkit-text-size-adjust: 100%;\n  line-height: 1.5;\n  color: #24292e;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-size: 16px;\n  line-height: 1.5;\n  word-wrap: break-word;\n}\n\n.vscode-body .pl-c {\n  color: #6a737d;\n}\n\n.vscode-body .pl-c1,\n.vscode-body .pl-s .pl-v {\n  color: #005cc5;\n}\n\n.vscode-body .pl-e,\n.vscode-body .pl-en {\n  color: #6f42c1;\n}\n\n.vscode-body .pl-smi,\n.vscode-body .pl-s .pl-s1 {\n  color: #24292e;\n}\n\n.vscode-body .pl-ent {\n  color: #22863a;\n}\n\n.vscode-body .pl-k {\n  color: #d73a49;\n}\n\n.vscode-body .pl-s,\n.vscode-body .pl-pds,\n.vscode-body .pl-s .pl-pse .pl-s1,\n.vscode-body .pl-sr,\n.vscode-body .pl-sr .pl-cce,\n.vscode-body .pl-sr .pl-sre,\n.vscode-body .pl-sr .pl-sra {\n  color: #032f62;\n}\n\n.vscode-body .pl-v,\n.vscode-body .pl-smw {\n  color: #e36209;\n}\n\n.vscode-body .pl-bu {\n  color: #b31d28;\n}\n\n.vscode-body .pl-ii {\n  color: #fafbfc;\n  background-color: #b31d28;\n}\n\n.vscode-body .pl-c2 {\n  color: #fafbfc;\n  background-color: #d73a49;\n}\n\n.vscode-body .pl-c2::before {\n  content: \"^M\";\n}\n\n.vscode-body .pl-sr .pl-cce {\n  font-weight: bold;\n  color: #22863a;\n}\n\n.vscode-body .pl-ml {\n  color: #735c0f;\n}\n\n.vscode-body .pl-mh,\n.vscode-body .pl-mh .pl-en,\n.vscode-body .pl-ms {\n  font-weight: bold;\n  color: #005cc5;\n}\n\n.vscode-body .pl-mi {\n  font-style: italic;\n  color: #24292e;\n}\n\n.vscode-body .pl-mb {\n  font-weight: bold;\n  color: #24292e;\n}\n\n.vscode-body .pl-md {\n  color: #b31d28;\n  background-color: #ffeef0;\n}\n\n.vscode-body .pl-mi1 {\n  color: #22863a;\n  background-color: #f0fff4;\n}\n\n.vscode-body .pl-mc {\n  color: #e36209;\n  background-color: #ffebda;\n}\n\n.vscode-body .pl-mi2 {\n  color: #f6f8fa;\n  background-color: #005cc5;\n}\n\n.vscode-body .pl-mdr {\n  font-weight: bold;\n  color: #6f42c1;\n}\n\n.vscode-body .pl-ba {\n  color: #586069;\n}\n\n.vscode-body .pl-sg {\n  color: #959da5;\n}\n\n.vscode-body .pl-corl {\n  text-decoration: underline;\n  color: #032f62;\n}\n\n.vscode-body .octicon {\n  display: inline-block;\n  vertical-align: text-top;\n  fill: currentColor;\n}\n\n.vscode-body a {\n  background-color: transparent;\n}\n\n.vscode-body a:active,\n.vscode-body a:hover {\n  outline-width: 0;\n}\n\n.vscode-body strong {\n  font-weight: inherit;\n}\n\n.vscode-body strong {\n  font-weight: bolder;\n}\n\n.vscode-body h1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n.vscode-body img {\n  border-style: none;\n}\n\n.vscode-body code,\n.vscode-body kbd,\n.vscode-body pre {\n  font-family: monospace, monospace;\n  font-size: 1em;\n}\n\n.vscode-body hr {\n  box-sizing: content-box;\n  height: 0;\n  overflow: visible;\n}\n\n.vscode-body input {\n  font: inherit;\n  margin: 0;\n}\n\n.vscode-body input {\n  overflow: visible;\n}\n\n.vscode-body [type=\"checkbox\"] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\n.vscode-body * {\n  box-sizing: border-box;\n}\n\n.vscode-body input {\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n}\n\n.vscode-body a {\n  color: #0366d6;\n  text-decoration: none;\n}\n\n.vscode-body a:hover {\n  text-decoration: underline;\n}\n\n.vscode-body strong {\n  font-weight: 600;\n}\n\n.vscode-body hr {\n  height: 0;\n  margin: 15px 0;\n  overflow: hidden;\n  background: transparent;\n  border: 0;\n  border-bottom: 1px solid #dfe2e5;\n}\n\n.vscode-body hr::before {\n  display: table;\n  content: \"\";\n}\n\n.vscode-body hr::after {\n  display: table;\n  clear: both;\n  content: \"\";\n}\n\n.vscode-body table {\n  border-spacing: 0;\n  border-collapse: collapse;\n}\n\n.vscode-body td,\n.vscode-body th {\n  padding: 0;\n}\n\n.vscode-body h1,\n.vscode-body h2,\n.vscode-body h3,\n.vscode-body h4,\n.vscode-body h5,\n.vscode-body h6 {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.vscode-body h1 {\n  font-size: 32px;\n  font-weight: 600;\n}\n\n.vscode-body h2 {\n  font-size: 24px;\n  font-weight: 600;\n}\n\n.vscode-body h3 {\n  font-size: 20px;\n  font-weight: 600;\n}\n\n.vscode-body h4 {\n  font-size: 16px;\n  font-weight: 600;\n}\n\n.vscode-body h5 {\n  font-size: 14px;\n  font-weight: 600;\n}\n\n.vscode-body h6 {\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.vscode-body p {\n  margin-top: 0;\n  margin-bottom: 10px;\n}\n\n.vscode-body blockquote {\n  margin: 0;\n}\n\n.vscode-body ul,\n.vscode-body ol {\n  padding-left: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.vscode-body ol ol,\n.vscode-body ul ol {\n  list-style-type: lower-roman;\n}\n\n.vscode-body ul ul ol,\n.vscode-body ul ol ol,\n.vscode-body ol ul ol,\n.vscode-body ol ol ol {\n  list-style-type: lower-alpha;\n}\n\n.vscode-body dd {\n  margin-left: 0;\n}\n\n.vscode-body code {\n  font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace;\n  font-size: 12px;\n}\n\n.vscode-body pre {\n  margin-top: 0;\n  margin-bottom: 0;\n  font-family: \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace;\n  font-size: 12px;\n}\n\n.vscode-body .octicon {\n  vertical-align: text-bottom;\n}\n\n.vscode-body .pl-0 {\n  padding-left: 0 !important;\n}\n\n.vscode-body .pl-1 {\n  padding-left: 4px !important;\n}\n\n.vscode-body .pl-2 {\n  padding-left: 8px !important;\n}\n\n.vscode-body .pl-3 {\n  padding-left: 16px !important;\n}\n\n.vscode-body .pl-4 {\n  padding-left: 24px !important;\n}\n\n.vscode-body .pl-5 {\n  padding-left: 32px !important;\n}\n\n.vscode-body .pl-6 {\n  padding-left: 40px !important;\n}\n\n.vscode-body::before {\n  display: table;\n  content: \"\";\n}\n\n.vscode-body::after {\n  display: table;\n  clear: both;\n  content: \"\";\n}\n\n.vscode-body\u003e*:first-child {\n  margin-top: 0 !important;\n}\n\n.vscode-body\u003e*:last-child {\n  margin-bottom: 0 !important;\n}\n\n.vscode-body a:not([href]) {\n  color: inherit;\n  text-decoration: none;\n}\n\n.vscode-body .anchor {\n  float: left;\n  padding-right: 4px;\n  margin-left: -20px;\n  line-height: 1;\n}\n\n.vscode-body .anchor:focus {\n  outline: none;\n}\n\n.vscode-body p,\n.vscode-body blockquote,\n.vscode-body ul,\n.vscode-body ol,\n.vscode-body dl,\n.vscode-body table,\n.vscode-body pre {\n  margin-top: 0;\n  margin-bottom: 16px;\n}\n\n.vscode-body hr {\n  height: 0.25em;\n  padding: 0;\n  margin: 24px 0;\n  background-color: #e1e4e8;\n  border: 0;\n}\n\n.vscode-body blockquote {\n  padding: 0 1em;\n  color: #6a737d;\n  border-left: 0.25em solid #dfe2e5;\n}\n\n.vscode-body blockquote\u003e:first-child {\n  margin-top: 0;\n}\n\n.vscode-body blockquote\u003e:last-child {\n  margin-bottom: 0;\n}\n\n.vscode-body kbd {\n  display: inline-block;\n  padding: 3px 5px;\n  font-size: 11px;\n  line-height: 10px;\n  color: #444d56;\n  vertical-align: middle;\n  background-color: #fafbfc;\n  border: solid 1px #c6cbd1;\n  border-bottom-color: #959da5;\n  border-radius: 3px;\n  box-shadow: inset 0 -1px 0 #959da5;\n}\n\n.vscode-body h1,\n.vscode-body h2,\n.vscode-body h3,\n.vscode-body h4,\n.vscode-body h5,\n.vscode-body h6 {\n  margin-top: 24px;\n  margin-bottom: 16px;\n  font-weight: 600;\n  line-height: 1.25;\n}\n\n.vscode-body h1 .octicon-link,\n.vscode-body h2 .octicon-link,\n.vscode-body h3 .octicon-link,\n.vscode-body h4 .octicon-link,\n.vscode-body h5 .octicon-link,\n.vscode-body h6 .octicon-link {\n  color: #1b1f23;\n  vertical-align: middle;\n  visibility: hidden;\n}\n\n.vscode-body h1:hover .anchor,\n.vscode-body h2:hover .anchor,\n.vscode-body h3:hover .anchor,\n.vscode-body h4:hover .anchor,\n.vscode-body h5:hover .anchor,\n.vscode-body h6:hover .anchor {\n  text-decoration: none;\n}\n\n.vscode-body h1:hover .anchor .octicon-link,\n.vscode-body h2:hover .anchor .octicon-link,\n.vscode-body h3:hover .anchor .octicon-link,\n.vscode-body h4:hover .anchor .octicon-link,\n.vscode-body h5:hover .anchor .octicon-link,\n.vscode-body h6:hover .anchor .octicon-link {\n  visibility: visible;\n}\n\n.vscode-body h1 {\n  padding-bottom: 0.3em;\n  font-size: 2em;\n  border-bottom: 1px solid #eaecef;\n}\n\n.vscode-body h2 {\n  padding-bottom: 0.3em;\n  font-size: 1.5em;\n  border-bottom: 1px solid #eaecef;\n}\n\n.vscode-body h3 {\n  font-size: 1.25em;\n}\n\n.vscode-body h4 {\n  font-size: 1em;\n}\n\n.vscode-body h5 {\n  font-size: 0.875em;\n}\n\n.vscode-body h6 {\n  font-size: 0.85em;\n  color: #6a737d;\n}\n\n.vscode-body ul,\n.vscode-body ol {\n  padding-left: 2em;\n}\n\n.vscode-body ul ul,\n.vscode-body ul ol,\n.vscode-body ol ol,\n.vscode-body ol ul {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n.vscode-body li {\n  word-wrap: break-all;\n}\n\n.vscode-body li\u003ep {\n  margin-top: 16px;\n}\n\n.vscode-body li+li {\n  margin-top: 0.25em;\n}\n\n.vscode-body dl {\n  padding: 0;\n}\n\n.vscode-body dl dt {\n  padding: 0;\n  margin-top: 16px;\n  font-size: 1em;\n  font-style: italic;\n  font-weight: 600;\n}\n\n.vscode-body dl dd {\n  padding: 0 16px;\n  margin-bottom: 16px;\n}\n\n.vscode-body table {\n  display: block;\n  width: 100%;\n  overflow: auto;\n}\n\n.vscode-body table th {\n  font-weight: 600;\n}\n\n.vscode-body table th,\n.vscode-body table td {\n  padding: 6px 13px;\n  border: 1px solid #dfe2e5;\n}\n\n.vscode-body table tr {\n  background-color: #fff;\n  border-top: 1px solid #c6cbd1;\n}\n\n.vscode-body table tr:nth-child(2n) {\n  background-color: #f6f8fa;\n}\n\n.vscode-body img {\n  max-width: 100%;\n  box-sizing: content-box;\n  background-color: #fff;\n}\n\n.vscode-body img[align=right] {\n  padding-left: 20px;\n}\n\n.vscode-body img[align=left] {\n  padding-right: 20px;\n}\n\n.vscode-body code {\n  padding: 0.2em 0.4em;\n  margin: 0;\n  font-size: 85%;\n  background-color: rgba(27,31,35,0.05);\n  border-radius: 3px;\n}\n\n.vscode-body pre {\n  word-wrap: normal;\n}\n\n.vscode-body pre\u003ecode {\n  padding: 0;\n  margin: 0;\n  font-size: 100%;\n  word-break: normal;\n  white-space: pre;\n  background: transparent;\n  border: 0;\n}\n\n.vscode-body .highlight {\n  margin-bottom: 16px;\n}\n\n.vscode-body .highlight pre {\n  margin-bottom: 0;\n  word-break: normal;\n}\n\n.vscode-body .highlight pre,\n.vscode-body pre {\n  padding: 16px;\n  overflow: auto;\n  font-size: 85%;\n  line-height: 1.45;\n  background-color: #f6f8fa;\n  border-radius: 3px;\n}\n\n.vscode-body pre code {\n  display: inline;\n  max-width: auto;\n  padding: 0;\n  margin: 0;\n  overflow: visible;\n  line-height: inherit;\n  word-wrap: normal;\n  background-color: transparent;\n  border: 0;\n}\n\n.vscode-body .full-commit .btn-outline:not(:disabled):hover {\n  color: #005cc5;\n  border-color: #005cc5;\n}\n\n.vscode-body kbd {\n  display: inline-block;\n  padding: 3px 5px;\n  font: 11px \"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace;\n  line-height: 10px;\n  color: #444d56;\n  vertical-align: middle;\n  background-color: #fafbfc;\n  border: solid 1px #d1d5da;\n  border-bottom-color: #c6cbd1;\n  border-radius: 3px;\n  box-shadow: inset 0 -1px 0 #c6cbd1;\n}\n\n.vscode-body :checked+.radio-label {\n  position: relative;\n  z-index: 1;\n  border-color: #0366d6;\n}\n\n.vscode-body .task-list-item {\n  list-style-type: none;\n}\n\n.vscode-body .task-list-item+.task-list-item {\n  margin-top: 3px;\n}\n\n.vscode-body .task-list-item input {\n  margin: 0 0.2em 0.25em -1.6em;\n  vertical-align: middle;\n}\n\n.vscode-body hr {\n  border-bottom-color: #eee;\n}\n\n/*\n\ngithub.com style (c) Vasily Polovnyov \u003cvast@whiteants.net\u003e\n\n*/\n\n.hljs {\n  display: block;\n  overflow-x: auto;\n  padding: 0.5em;\n  color: #333;\n  background: #f8f8f8;\n}\n\n.hljs-comment,\n.hljs-quote {\n  color: #998;\n  font-style: italic;\n}\n\n.hljs-keyword,\n.hljs-selector-tag,\n.hljs-subst {\n  color: #333;\n  font-weight: bold;\n}\n\n.hljs-number,\n.hljs-literal,\n.hljs-variable,\n.hljs-template-variable,\n.hljs-tag .hljs-attr {\n  color: #008080;\n}\n\n.hljs-string,\n.hljs-doctag {\n  color: #d14;\n}\n\n.hljs-title,\n.hljs-section,\n.hljs-selector-id {\n  color: #900;\n  font-weight: bold;\n}\n\n.hljs-subst {\n  font-weight: normal;\n}\n\n.hljs-type,\n.hljs-class .hljs-title {\n  color: #458;\n  font-weight: bold;\n}\n\n.hljs-tag,\n.hljs-name,\n.hljs-attribute {\n  color: #000080;\n  font-weight: normal;\n}\n\n.hljs-regexp,\n.hljs-link {\n  color: #009926;\n}\n\n.hljs-symbol,\n.hljs-bullet {\n  color: #990073;\n}\n\n.hljs-built_in,\n.hljs-builtin-name {\n  color: #0086b3;\n}\n\n.hljs-meta {\n  color: #999;\n  font-weight: bold;\n}\n\n.hljs-deletion {\n  background: #fdd;\n}\n\n.hljs-addition {\n  background: #dfd;\n}\n\n.hljs-emphasis {\n  font-style: italic;\n}\n\n.hljs-strong {\n  font-weight: bold;\n}\n\n\u003c/style\u003e\n        \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.css\" integrity=\"sha384-yFRtMMDnQtDRO8rLpMIKrtPCD5jdktao2TV19YiZYWMDkUR5GQZR/NOVTdquEx1j\" crossorigin=\"anonymous\"\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css\" rel=\"stylesheet\" type=\"text/css\"\u003e\n        \n        \u003cstyle\u003e\n.task-list-item { list-style-type: none; } .task-list-item-checkbox { margin-left: -20px; vertical-align: middle; }\n\u003c/style\u003e\n        \n        \u003cscript src=\"https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js\"\u003e\u003c/script\u003e\n        \n    \u003c/head\u003e\n    \u003cbody class=\"vscode-body vscode-light\"\u003e\n        \u003ch1 id=\"images\"\u003eimages\u003c/h1\u003e\n\u003ch2 id=\"project-setup\"\u003eProject setup\u003c/h2\u003e\n\u003cpre\u003e\u003ccode\u003e\u003ccode\u003e\u003cdiv\u003enpm install\n\u003c/div\u003e\u003c/code\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003ch3 id=\"compiles-and-hot-reloads-for-development\"\u003eCompiles and hot-reloads for development\u003c/h3\u003e\n\u003cpre\u003e\u003ccode\u003e\u003ccode\u003e\u003cdiv\u003enpm run serve\n\u003c/div\u003e\u003c/code\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003ch3 id=\"compiles-and-minifies-for-production\"\u003eCompiles and minifies for production\u003c/h3\u003e\n\u003cpre\u003e\u003ccode\u003e\u003ccode\u003e\u003cdiv\u003enpm run build\n\u003c/div\u003e\u003c/code\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003ch3 id=\"lints-and-fixes-files\"\u003eLints and fixes files\u003c/h3\u003e\n\u003cpre\u003e\u003ccode\u003e\u003ccode\u003e\u003cdiv\u003enpm run lint\n\u003c/div\u003e\u003c/code\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003ch3 id=\"customize-configuration\"\u003eCustomize configuration\u003c/h3\u003e\n\u003cp\u003eSee \u003ca href=\"https://cli.vuejs.org/config/\"\u003eConfiguration Reference\u003c/a\u003e.\u003c/p\u003e\n\u003ch1 id=\"course-notes\"\u003eCourse Notes\u003c/h1\u003e\n\u003cp\u003e\u003cstrong\u003eVue Modules\u003c/strong\u003e\u003cbr\u003e\nDue to using a single state tree, all states of our application are contained inside one big object. However, as our application grows in scale, the store can get really bloated.\u003c/p\u003e\n\u003cp\u003eTo help with that, Vuex allows us to divide our store into modules. Each module can contain its own state, mutations, actions, getters, and even nested modules - it's fractal all the way down:\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-js\"\u003e\u003cdiv\u003e\u003cspan class=\"hljs-keyword\"\u003econst\u003c/span\u003e moduleA = {\n  \u003cspan class=\"hljs-attr\"\u003estate\u003c/span\u003e: \u003cspan class=\"hljs-function\"\u003e() =\u0026gt;\u003c/span\u003e ({ ... }),\n  \u003cspan class=\"hljs-attr\"\u003emutations\u003c/span\u003e: { ... },\n  \u003cspan class=\"hljs-attr\"\u003eactions\u003c/span\u003e: { ... },\n  \u003cspan class=\"hljs-attr\"\u003egetters\u003c/span\u003e: { ... }\n}\n\n\u003cspan class=\"hljs-keyword\"\u003econst\u003c/span\u003e moduleB = {\n  \u003cspan class=\"hljs-attr\"\u003estate\u003c/span\u003e: \u003cspan class=\"hljs-function\"\u003e() =\u0026gt;\u003c/span\u003e ({ ... }),\n  \u003cspan class=\"hljs-attr\"\u003emutations\u003c/span\u003e: { ... },\n  \u003cspan class=\"hljs-attr\"\u003eactions\u003c/span\u003e: { ... }\n}\n\n\u003cspan class=\"hljs-keyword\"\u003econst\u003c/span\u003e store = \u003cspan class=\"hljs-keyword\"\u003enew\u003c/span\u003e Vuex.Store({\n  \u003cspan class=\"hljs-attr\"\u003emodules\u003c/span\u003e: {\n    \u003cspan class=\"hljs-attr\"\u003ea\u003c/span\u003e: moduleA,\n    \u003cspan class=\"hljs-attr\"\u003eb\u003c/span\u003e: moduleB\n  }\n})\n\nstore.state.a \u003cspan class=\"hljs-comment\"\u003e// -\u0026gt; `moduleA`\u0026#x27;s state\u003c/span\u003e\nstore.state.b \u003cspan class=\"hljs-comment\"\u003e// -\u0026gt; `moduleB`\u0026#x27;s state\u003c/span\u003e\n\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"auth-module\"\u003eAuth Module\u003c/h2\u003e\n\u003cp\u003eKnowing wehether user is signed in; signing user in, and logging them out\u003c/p\u003e\n\u003ch2 id=\"image-module\"\u003eImage Module\u003c/h2\u003e\n\u003cp\u003eAll code and data relate dto handling images; e.g. fetching all uploaded images and uploading images themselves as well\u003c/p\u003e\n\u003ch2 id=\"89-vuex-modules\"\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229916#overview\"\u003e89. Vuex Modules\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003eLet's consider a \u003cstrong\u003eCar Inventory module\u003c/strong\u003e:\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eModules contain 4 different portions, each with a distinct purpose for managing data inside of our application:\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eSTATE\n\u003cul\u003e\n\u003cli\u003eHolds all raw data related to this particular module.\u003c/li\u003e\n\u003cli\u003eEx: All cars in the inventory\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eGETTERS\n\u003cul\u003e\n\u003cli\u003eTo narrow down records via filtering/computations (return a subset)\u003c/li\u003e\n\u003cli\u003eOr run a computation like getNumberOfCars or something; they odn't have to just be used for filtering; can be used for any type of operation we want to do on our records inside state\u003c/li\u003e\n\u003cli\u003eEx: All \u003ccode\u003ebudget\u003c/code\u003e cars in the inventory\u003c/li\u003e\n\u003cli\u003eEx: Count of all cars in the inventory\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eACTIONS\n\u003cul\u003e\n\u003cli\u003eFunction that assembles together multiple mutations in a series\u003c/li\u003e\n\u003cli\u003eIt doesn't necessarily have to call multiple mutations though; it can just do one thing/action results in one single mutation\u003c/li\u003e\n\u003cli\u003eE.g. \u003ccode\u003esellCar\u003c/code\u003e includes \u003ccode\u003esetCarAsSold\u003c/code\u003e, \u003ccode\u003ewashCar\u003c/code\u003e and \u003ccode\u003ebillCustomer\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eMUTATIONS\n\u003cul\u003e\n\u003cli\u003eVery explicit individual, SINGLE-STEP functions that act on our state object in which you and I would want to change th data stored in our state.\u003c/li\u003e\n\u003cli\u003eEx: \u003ccode\u003ewash the chevy volt\u003c/code\u003e, \u003ccode\u003erecieve new Honda Accord into inventory\u003c/code\u003e, or \u003ccode\u003esell Dodge Durango\u003c/code\u003e\u003c/li\u003e\n\u003cli\u003eEx: \u003ccode\u003esetCarAsSold\u003c/code\u003e, \u003ccode\u003eaddCarToInventory\u003c/code\u003e, \u003ccode\u003ewashCar\u003c/code\u003e, \u003ccode\u003ebillCustomer\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"90-connecting-vuex-to-vue\"\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229918#notes\"\u003e90. Connecting Vuex to Vue\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003eThe \u003ccode\u003e/src/store\u003c/code\u003e directory will contain all of our Vuex related code.\u003c/p\u003e\n\u003cp\u003eThe \u003ccode\u003e/src/store/index.js\u003c/code\u003e file is where the initial Vuex setup happens.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003e/src/store/index.js\u003c/em\u003e\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-js\"\u003e\u003cdiv\u003e\u003cspan class=\"hljs-comment\"\u003e// Initial setup of Vuex will take place\u003c/span\u003e\n\u003cspan class=\"hljs-keyword\"\u003eimport\u003c/span\u003e Vuex \u003cspan class=\"hljs-keyword\"\u003efrom\u003c/span\u003e \u003cspan class=\"hljs-string\"\u003e\u0026#x27;vuex\u0026#x27;\u003c/span\u003e;\n\u003cspan class=\"hljs-keyword\"\u003eimport\u003c/span\u003e Vue \u003cspan class=\"hljs-keyword\"\u003efrom\u003c/span\u003e \u003cspan class=\"hljs-string\"\u003e\u0026#x27;vue\u0026#x27;\u003c/span\u003e;\n\n\u003cspan class=\"hljs-comment\"\u003e// This line wires the two libraries together so they know about each other; then in /src/store/index.js are the instructions on HOW these two work together\u003c/span\u003e\nVue.use(Vuex);\n\n\u003cspan class=\"hljs-comment\"\u003e// Store is a term for overall collection of all of our modules assembled together that can be interfaced with Vue code we write\u003c/span\u003e\n\u003cspan class=\"hljs-keyword\"\u003eexport\u003c/span\u003e \u003cspan class=\"hljs-keyword\"\u003edefault\u003c/span\u003e \u003cspan class=\"hljs-keyword\"\u003enew\u003c/span\u003e Vuex.Store({\n  \u003cspan class=\"hljs-attr\"\u003emodules\u003c/span\u003e: {\n\n  }\n});\n\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e\u003cem\u003e/src/main.js\u003c/em\u003e\u003c/p\u003e\n\u003cpre\u003e\u003ccode class=\"language-js\"\u003e\u003cdiv\u003e\u003cspan class=\"hljs-keyword\"\u003eimport\u003c/span\u003e Vue \u003cspan class=\"hljs-keyword\"\u003efrom\u003c/span\u003e \u003cspan class=\"hljs-string\"\u003e\u0026#x27;vue\u0026#x27;\u003c/span\u003e;\n\u003cspan class=\"hljs-keyword\"\u003eimport\u003c/span\u003e App \u003cspan class=\"hljs-keyword\"\u003efrom\u003c/span\u003e \u003cspan class=\"hljs-string\"\u003e\u0026#x27;./App\u0026#x27;\u003c/span\u003e;\n\u003cspan class=\"hljs-keyword\"\u003eimport\u003c/span\u003e store \u003cspan class=\"hljs-keyword\"\u003efrom\u003c/span\u003e \u003cspan class=\"hljs-string\"\u003e\u0026#x27;./store\u0026#x27;\u003c/span\u003e;\n\n\u003cspan class=\"hljs-keyword\"\u003enew\u003c/span\u003e Vue({\n  store,\n  \u003cspan class=\"hljs-attr\"\u003erender\u003c/span\u003e: \u003cspan class=\"hljs-function\"\u003e\u003cspan class=\"hljs-params\"\u003eh\u003c/span\u003e =\u0026gt;\u003c/span\u003e h(App)\n}).$mount(\u003cspan class=\"hljs-string\"\u003e\u0026#x27;#app\u0026#x27;\u003c/span\u003e);\n\u003c/div\u003e\u003c/code\u003e\u003c/pre\u003e\n\u003ch2 id=\"91-initial-auth-module-design-and-92-auth-module-mutations\"\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229922#notes\"\u003e91. Initial Auth Module Design\u003c/a\u003e and \u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229924#notes\"\u003e92. Auth Module Mutations\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eAuth Module Architecture:\u003c/strong\u003e\u003c/p\u003e\n\u003ch3 id=\"state\"\u003eState\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003etoken\u003c/code\u003e we get from authentication process (initial value is \u003ccode\u003enull\u003c/code\u003e)\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"getters\"\u003eGetters\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003eisLoggedIn\u003c/code\u003e - look at value of token in the state object\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"mutations\"\u003eMutations\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003esetToken\u003c/code\u003e intended to update value of token property inside state object\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"actions-call-a-mutation-at-particular-time-or-multiple-mutations-in-a-particular-order\"\u003eActions (call a mutation at particular time or multiple mutations in a particular order)\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003efinalizeLogin\u003c/code\u003e -\u0026gt; somehow gets token provided to us by imgur and calls the \u003ccode\u003esetToken\u003c/code\u003e mutation to update the value of token\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003elogout\u003c/code\u003e -\u0026gt; calls \u003ccode\u003esetToken\u003c/code\u003e and makes it null\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ccode\u003elogin\u003c/code\u003e -\u0026gt; kick off initial OAuth flow to Imgur API. It's a littel different because it doesn't call a mutation\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229928#notes\"\u003e93. Auth module state and getters\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229932#notes\"\u003e94. Updating State Values\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229934#notes\"\u003e95. Logging Out with Actions\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229938#notes\"\u003e96. Separate API Helpers\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229942#notes\"\u003e97. Forming the OAuth2 URL\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229946#notes\"\u003e98. Initiating the Login Flow\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229950#notes\"\u003e99. Wiring the Auth Module\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"100-initial-oauth-request\"\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229952#notes\"\u003e100. Initial OAuth Request\u003c/a\u003e\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003ewire up a getter to a component to retrieve data\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003ewire up an action to a component to set data\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229960#notes\"\u003e102. Wiring Up Vue Router\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"103-browser-vs-hash-routers\"\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229962#notes\"\u003e103. Browser vs. Hash Routers\u003c/a\u003e\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eA hash router in Vue means Vue looks for everything to the right of a '#' to determine what to do/what route is being used/what set of components to show on the screen\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eThe hash router is the default setting\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eFor our purposes we actually need the browser router option instead, which looks to the left of the '#' and after the domain.\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229966#notes\"\u003e104. Component Insertion Point\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"105-component-lifecycle-methods\"\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229968#notes\"\u003e105. Component Lifecycle Methods\u003c/a\u003e\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eLifeCycle Methods\u003c/strong\u003e are functions that we can define on a component that are called automatically during certain points inside of a component's lifecycle.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"lifecycle-diagram\"\u003eLifecycle diagram:\u003c/h3\u003e\n\u003cp\u003e\u003cimg src=\"https://vuejs.org/images/lifecycle.png\" alt=\"Lifecycle Diagram\"\u003e\u003c/p\u003e\n\u003cp\u003eN.B. A component has actually shown up on the screen when it is \u0026quot;mounted\u0026quot;\u003c/p\u003e\n\u003ch2 id=\"calling-actions\"\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10229970#notes\"\u003eCalling Actions\u003c/a\u003e\u003c/h2\u003e\n\u003ch2 id=\"108-data-in-components-with-mapgetters\"\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10230010#notes\"\u003e108. Data in Components with MapGetters\u003c/a\u003e\u003c/h2\u003e\n\u003ch2 id=\"118-image-module-design\"\u003e\u003ca href=\"https://www.udemy.com/course/vue-js-course/learn/lecture/10230040#content\"\u003e118. Image Module Design\u003c/a\u003e\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003eState\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003eimages\u003c/code\u003e -\u0026gt; array of images fetched from Imgur API; initial value of \u003ccode\u003e[]\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eGetters\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003eallImages\u003c/code\u003e -\u0026gt; function that returns list of images inside of state\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eMutations\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003esetImages\u003c/code\u003e -\u0026gt; after fetchImages action makes netwrok req to Imgur API, it sould probably call this mutation in an attempt to update images stored by our state\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e\u003cstrong\u003eActions\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ccode\u003efetchImages\u003c/code\u003e -\u0026gt; fetch all images for this user from the API\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003euploadImage\u003c/code\u003e -\u0026gt; allow user to upload image and send it to Imgur API\u003c/li\u003e\n\u003c/ul\u003e\n\n    \u003c/body\u003e\n    \u003c/html\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcnocon%2Fvue-images-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcnocon%2Fvue-images-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcnocon%2Fvue-images-app/lists"}