{"id":16445281,"url":"https://github.com/dgapitts/intro-to-vue-js","last_synced_at":"2026-02-17T17:03:13.429Z","repository":{"id":145829360,"uuid":"245506006","full_name":"dgapitts/intro-to-vue-js","owner":"dgapitts","description":"my exercise code and notes from intro-to-vue-js ","archived":false,"fork":false,"pushed_at":"2020-03-18T22:45:25.000Z","size":1743,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-06T22:03:47.349Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/dgapitts.png","metadata":{"files":{"readme":"README.md","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":"2020-03-06T19:59:21.000Z","updated_at":"2020-03-18T22:45:27.000Z","dependencies_parsed_at":"2023-04-13T00:03:40.062Z","dependency_job_id":null,"html_url":"https://github.com/dgapitts/intro-to-vue-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dgapitts/intro-to-vue-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgapitts%2Fintro-to-vue-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgapitts%2Fintro-to-vue-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgapitts%2Fintro-to-vue-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgapitts%2Fintro-to-vue-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dgapitts","download_url":"https://codeload.github.com/dgapitts/intro-to-vue-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dgapitts%2Fintro-to-vue-js/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29550838,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-17T14:33:00.708Z","status":"ssl_error","status_checked_at":"2026-02-17T14:32:58.657Z","response_time":100,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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-10-11T09:43:52.950Z","updated_at":"2026-02-17T17:03:13.391Z","avatar_url":"https://github.com/dgapitts.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# intro-to-vue-js\nMy code and notes based on exercise from intro-to-vue-js course from https://www.vuemastery.com/\n\n# Lesson 01 - intro and base setup\n\n\n## Chrome installation of Vue.js chrome extension\n\n### Installation\n\n### Step 0 - In chrome web store add extension Vue.js devtools\n\nGoto https://chrome.google.com/webstore/category/extensions?hl=en and add extension Vue.js\n\n![01.00-In-chrome-web-store-add-extension-Vue.js-devtools.png](01.00-In-chrome-web-store-add-extension-Vue.js-devtools.png)\n\n### Usage\n\n### Step 01 Right click and select Inspect\n![01.01-Right-click-and-select-Inspect.png](01.01-Right-click-and-select-Inspect.png)\n### Step 02 Then switch to Vue\n![01.02-Then-switch-to-Vue.png](01.02-Then-switch-to-Vue.png)\n### Step 03 Now we can browse our data model and update in via the console\n![01.03-Now-we-can-browse-our-data-model-and-update-in-via-the-console.png](01.03-Now-we-can-browse-our-data-model-and-update-in-via-the-console.png)\n\n#### BACKGROUND NOTES - useful awk and sed commands when working with markdown\n\n##### Replacing spaces with hyphons\n\nIt would have been sensible to have originally create my images with hyphons instead of spaces, but this easy enough to correct with a little help from awk and sed scripts\n```\n~/projects/intro-to-vue-js $ ls 01.*|sort\n01.01 Right click and select Inspect.png\n01.02 Then switch to Vue.png\n01.03 Now we can browse our data model and update in via the console.png\n```\n\nmaybe this is could be automated further but that seems too fiddly for a few files\n```\n~/projects/intro-to-vue-js $ ls *png|sed 's/ /-/g'\n01.01-Right-click-and-select-Inspect.png\n01.02-Then-switch-to-Vue.png\n01.03-Now-we-can-browse-our-data-model-and-update-in-via-the-console.png\n~/projects/intro-to-vue-js $ mv 01.01\\ Right\\ click\\ and\\ select\\ Inspect.png 01.01-Right-click-and-select-Inspect.png\n~/projects/intro-to-vue-js $ mv 01.02\\ Then\\ switch\\ to\\ Vue.png 01.02-Then-switch-to-Vue.png\n~/projects/intro-to-vue-js $ mv 01.03\\ Now\\ we\\ can\\ browse\\ our\\ data\\ model\\ and\\ update\\ in\\ via\\ the\\ console.png 01.03-Now-we-can-browse-our-data-model-and-update-in-via-the-console.png\n```\n\n##### generating image headers\n\n```\n~/projects/intro-to-vue-js $ ls *png|sed 's/-/ /g;s/.png//g;s/^01./### Step /g'\n### Step 01 Right click and select Inspect\n### Step 02 Then switch to Vue\n### Step 03 Now we can browse our data model and update in via the console\n```\n\n##### generating image markdown\n\n```\n~/projects/intro-to-vue-js $ ls 01.*png|awk '{print \"![\" $1 \"](\" $1\")\"}'\n![01.01-Right-click-and-select-Inspect.png](01.01-Right-click-and-select-Inspect.png)\n![01.02-Then-switch-to-Vue.png](01.02-Then-switch-to-Vue.png)\n![01.03-Now-we-can-browse-our-data-model-and-update-in-via-the-console.png](01.03-Now-we-can-browse-our-data-model-and-update-in-via-the-console.png)\n```\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgapitts%2Fintro-to-vue-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdgapitts%2Fintro-to-vue-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdgapitts%2Fintro-to-vue-js/lists"}