{"id":15485843,"url":"https://github.com/zephraph/vue-graphql-loader","last_synced_at":"2025-06-17T14:36:10.693Z","repository":{"id":57145592,"uuid":"101959167","full_name":"zephraph/vue-graphql-loader","owner":"zephraph","description":"Custom block support for GraphQL operations in Vue's single file components","archived":false,"fork":false,"pushed_at":"2019-10-06T07:09:35.000Z","size":1944,"stargazers_count":50,"open_issues_count":24,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-13T15:08:32.644Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/zephraph.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-08-31T04:28:14.000Z","updated_at":"2022-11-26T19:39:37.000Z","dependencies_parsed_at":"2022-09-05T22:31:12.116Z","dependency_job_id":null,"html_url":"https://github.com/zephraph/vue-graphql-loader","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/zephraph/vue-graphql-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zephraph%2Fvue-graphql-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zephraph%2Fvue-graphql-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zephraph%2Fvue-graphql-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zephraph%2Fvue-graphql-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zephraph","download_url":"https://codeload.github.com/zephraph/vue-graphql-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zephraph%2Fvue-graphql-loader/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260380507,"owners_count":23000290,"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","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-02T06:03:43.025Z","updated_at":"2025-06-17T14:36:05.675Z","avatar_url":"https://github.com/zephraph.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-graphql-loader\r\n\r\n[![Build Status](https://travis-ci.org/zephraph/vue-graphql-loader.svg?branch=master)](https://travis-ci.org/zephraph/vue-graphql-loader)\r\n[![Greenkeeper badge](https://badges.greenkeeper.io/zephraph/vue-graphql-loader.svg)](https://greenkeeper.io/)\r\n[![npm](https://img.shields.io/npm/dt/vue-graphql-loader.svg)](https://img.shields.io/npm/v/vue-graphql-loader.svg)\r\n\r\nAdds support for build time compilation of `\u003cgraphql\u003e` blocks within Vue single file components.\r\n\r\n## Installation\r\n\r\nConfigure this package as a custom loader for the `graphql` block in vue-loader\r\n\r\n```javascript\r\nmodule.exports = {\r\n  // ...probably more stuff here\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\.vue$/,\r\n        loader: 'vue-loader'\r\n      },\r\n      {\r\n        resourceQuery: /blockType=graphql/,\r\n        use: [\r\n          {\r\n            loader: require.resolve('vue-graphql-loader'),\r\n            options: {\r\n              // Allow or disallow anonymous queries, mutations, etc. Defaults to true.\r\n              noAnonymousOperations: true\r\n            }\r\n          }\r\n        ]\r\n      }\r\n    ]\r\n  }\r\n};\r\n```\r\n\r\n## Usage\r\n\r\n**Anonymous Operations**\r\n\r\nAnonymous queries, mutations, and subscriptions are stored on this.$query, this.$mutation, and this.$subscription respectively.\r\n\r\n```vue\r\n\u003cgraphql\u003e\r\n{\r\n  greetings\r\n}\r\nmutation {\r\n  doSomething(test: true) {\r\n    blah\r\n  }\r\n}\r\nsubscription {\r\n  someFeed() {\r\n    name\r\n  }\r\n}\r\n\u003c/graphql\u003e\r\n\r\n\u003cscript\u003e\r\nexport default {\r\n  created() {\r\n    console.log(\r\n      this.$options.query,\r\n      this.$options.mutation,\r\n      this.$options.subscription\r\n    );\r\n  }\r\n};\r\n\u003c/script\u003e\r\n```\r\n\r\nWhen an anonymous operation is present, it's the only operation of that type allowed for the component. That means if there's an anonymous query present, that's the only query that can be included in the component.\r\n\r\n**Named Operations**\r\n\r\nNamed operations are stored as an object the type's Vue namespace.\r\n\r\n```vue\r\n\u003cgraphql\u003e\r\nquery TestQuery {\r\n  test\r\n}\r\n\u003c/graphql\u003e\r\n\r\n\u003cscript\u003e\r\nexport default {\r\n  created() {\r\n    console.log(this.$options.query.TestQuery);\r\n  }\r\n};\r\n\u003c/script\u003e\r\n```\r\n\r\nIt's highly recommended that you only use named operations.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzephraph%2Fvue-graphql-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzephraph%2Fvue-graphql-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzephraph%2Fvue-graphql-loader/lists"}