{"id":16487134,"url":"https://github.com/vsimko/gridsome-plugin-composition-api","last_synced_at":"2026-05-16T17:34:55.999Z","repository":{"id":57254199,"uuid":"313281717","full_name":"vsimko/gridsome-plugin-composition-api","owner":"vsimko","description":"Composition API for Gridsome with Vue2","archived":false,"fork":false,"pushed_at":"2021-03-04T01:50:45.000Z","size":10,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-09T05:18:48.605Z","etag":null,"topics":["composition-api","gridsome","gridsome-plugin","migration","vue","vue2"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/gridsome-plugin-composition-api","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vsimko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-16T11:34:00.000Z","updated_at":"2021-03-04T01:50:47.000Z","dependencies_parsed_at":"2022-08-31T09:02:02.121Z","dependency_job_id":null,"html_url":"https://github.com/vsimko/gridsome-plugin-composition-api","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vsimko/gridsome-plugin-composition-api","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsimko%2Fgridsome-plugin-composition-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsimko%2Fgridsome-plugin-composition-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsimko%2Fgridsome-plugin-composition-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsimko%2Fgridsome-plugin-composition-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vsimko","download_url":"https://codeload.github.com/vsimko/gridsome-plugin-composition-api/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsimko%2Fgridsome-plugin-composition-api/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279058407,"owners_count":26094844,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["composition-api","gridsome","gridsome-plugin","migration","vue","vue2"],"created_at":"2024-10-11T13:32:48.011Z","updated_at":"2025-10-15T06:35:38.257Z","avatar_url":"https://github.com/vsimko.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gridsome-plugin-composition-api\n\n\u003e Composition API for Gridsome with Vue2\n\n### Quick overview\n\nThis plugin enables Composition API inside your Gridsome project even though Gridsome currently relies on Vue2.\nOnce Gridsome migrates to Vue3 this plugin becomes obsolete, but you'll have an easier migration path.\n\n### Install\n\nUse yarn or npm to install it:\n\n* `yarn add -D gridsome-plugin-composition-api`\n* `npm install -D gridsome-plugin-composition-api`\n* add `gridsome-plugin-composition-api` in `devDependencies` section in your `package.json` file.\n\n### Usage\n\nAdd `gridsome-plugin-composition-api` in your `gridsome.config`\n\n```javascript\nmodule.exports = {\n  plugins: [\n    {\n      use: 'gridsome-plugin-composition-api',\n    }\n  ]\n}\n```\n\nNow you can use Composition API in your *.vue files and other *.js or *.ts files:\n```html\n\u003cscript lang=\"ts\"\u003e\n  import {defineComponent, computed} from \"@vue/composition-api\";\n\n  export default defineComponent({\n    props: {\n      title: { type:String, required:true }\n    }     \n    setup(props) {\n      const titleUpper = computed(() =\u003e props.title.toUpperCase());\n      return {\n          titleUpper,\n      }\n    }\n  });\n\u003c/script\u003e\n```\n\n### Possible stuff to come ...\n\nAccessing `$static` and `$page` Vue global variables needs to be done differently in Composition API.\nIn my other codebase, I already have functions `usePageQuery()` and `useStaticQuery()`.\nI might publish them as a part of this package if someone requests it.\n\nHere is my work-in-progress implementation in TypeScript:\n\n```typescript\nexport function useStaticQuery\u003cT\u003e() {\n  type ComponentWith$Static = ReturnType\u003ctypeof getCurrentInstance\u003e \u0026 { $static: T };\n  return computed(() =\u003e {\n    const thisComponent = getCurrentInstance() as ComponentWith$Static;\n    return thisComponent.$static;\n  })\n}\n\nexport function usePageQuery\u003cT\u003e() {\n  type ComponentWith$Page = ReturnType\u003ctypeof getCurrentInstance\u003e \u0026 { $page: T };\n  return computed(() =\u003e {\n    const thisComponent = getCurrentInstance() as ComponentWith$Page;\n    return thisComponent.$page;\n  })\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvsimko%2Fgridsome-plugin-composition-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvsimko%2Fgridsome-plugin-composition-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvsimko%2Fgridsome-plugin-composition-api/lists"}