{"id":19602546,"url":"https://github.com/carljosephsalac/vue-composition-api","last_synced_at":"2026-03-06T14:33:24.926Z","repository":{"id":252771510,"uuid":"841396522","full_name":"carljosephsalac/vue-composition-api","owner":"carljosephsalac","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-02T11:16:42.000Z","size":121,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-26T15:45:23.731Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/carljosephsalac.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":"2024-08-12T10:22:26.000Z","updated_at":"2024-11-02T11:16:46.000Z","dependencies_parsed_at":"2024-08-12T12:17:06.930Z","dependency_job_id":"3ec814b0-135d-45e2-89f8-9b826ae41140","html_url":"https://github.com/carljosephsalac/vue-composition-api","commit_stats":null,"previous_names":["carljosephsalac/vue-composition-api"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/carljosephsalac/vue-composition-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carljosephsalac%2Fvue-composition-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carljosephsalac%2Fvue-composition-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carljosephsalac%2Fvue-composition-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carljosephsalac%2Fvue-composition-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carljosephsalac","download_url":"https://codeload.github.com/carljosephsalac/vue-composition-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carljosephsalac%2Fvue-composition-api/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30180672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T12:39:21.703Z","status":"ssl_error","status_checked_at":"2026-03-06T12:36:09.819Z","response_time":250,"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-11-11T09:24:48.299Z","updated_at":"2026-03-06T14:33:24.883Z","avatar_url":"https://github.com/carljosephsalac.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Let's learn VUE JS | Composition API - Script Setup, Vue Router \u0026 Pinia in 2023 (Web Developer Path) - Learn with Jon\n\n## DAY 1\n\n### Project Structure:\n- `index.html`, root where the browser going to read\n- `id=\"app\"`, wrapper of the vue or considered as root\n- `src folder`, brain of the vue application\n- `App.vue`, root component\n\n### Reactivity:\n- `import { ref and reactive }` // for reactivity\n\n## DAY 2\n\n### V-FOR:\n- always put unique key when using v-for `:key=\"post.id\"`\n\n### Single File Component:\n- `import PostItem from '@/components/PostItem.vue'` \n- `defineProps()`, like @props() in blade\n- `\u003cPostItem :post=\"post\" /\u003e` , to pass the data from parent component to child\n- `\u003cscript setup\u003e` , for simplicity\n\n### Vue Router:\n- in `router/index.js` directory import the view component from views folder\n- `import PostCreate from '@/views/PostCreate.vue'`\n- set up the route\n  \n  ```javascript\n    {\n      path: '/posts/create',\n      name: 'posts.create',\n      component: PostCreate\n    },\n  ```\n- in App.vue use `\u003cRouterLink to=\"/posts/create\"\u003eCreate Post\u003c/RouterLink\u003e` to create a link\n- `\u003cRouterView /\u003e` , renders the component from views folder\n\n### V-MODEL:\n- `v-model` , two way binding\n- to make the variable reactive\n  \n  ```javascript\n    import { reactive } from 'vue'\n    const post = reactive({\n        title: '',\n        body: ''\n    })\n  ```\n- `computed` (returns something) in options api\n  \n  ```javascript\n    import { reactive, computed } from 'vue'\n    const isFormInvalid = computed(() =\u003e {\n        return post.title === '' || post.body === ''\n    })\n    \u003cbutton :disabled=\"isFormInvalid\" class=\"mt-1 btn btn-neutral\"\u003eAdd\u003c/button\u003e\n  ```\n\n## DAY 3\n\n### Emit events:\n- `emit` , custom event listener\n- from child to parent component communication\n- `defineEmits([])`, takes an array of custom emits or events\n\n### Pinia (State Management):\n- stores folder\n- separate the data and logic\n\n### Pinia Actions (Create):\n- in `stores/posts` create an action \n- in `PostCreate` view,\n  \n  ```javascript\n    import { usePostsStore } from '@/stores/posts'\n    import { useRouter } from 'vue-router'\n\n    const router = useRouter()\n    const postStore = usePostsStore()\n\n    const submit = () =\u003e {\n        // usePostsStore().addPosts(post)\n        postStore.addPosts(post)\n        router.push({ name: 'home' })\n    }\n  ```\n\n### Pinia Getters:\n- `getters:` same as computed\n\n### Using JSON-Server to save the state:\n- `npm intall json-server`\n- create `db.json` in root directory\n- move the post (array of objects) to db.json\n- to run json server run this command , `npx json-server db.json -w`\n- fetch the data\n\n  ```javascript\n    getPost() {\n      fetch('http://localhost:3000/posts')\n        .then((res) =\u003e res.json())\n        .then((data) =\u003e (this.posts = data))\n    },\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarljosephsalac%2Fvue-composition-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarljosephsalac%2Fvue-composition-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarljosephsalac%2Fvue-composition-api/lists"}