{"id":13417471,"url":"https://github.com/wheatjs/vite-plugin-vue-gql","last_synced_at":"2025-10-22T21:39:27.131Z","repository":{"id":46276800,"uuid":"342028554","full_name":"wheatjs/vite-plugin-vue-gql","owner":"wheatjs","description":"⚡ GraphQL Tags for your Vue SFC ⚡","archived":false,"fork":false,"pushed_at":"2021-11-02T21:22:39.000Z","size":475,"stargazers_count":213,"open_issues_count":3,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-01-15T03:47:58.753Z","etag":null,"topics":["graphql","urql","vite","vitejs","vue"],"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/wheatjs.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":"2021-02-24T20:35:22.000Z","updated_at":"2024-11-26T03:36:10.000Z","dependencies_parsed_at":"2022-09-26T21:20:55.323Z","dependency_job_id":null,"html_url":"https://github.com/wheatjs/vite-plugin-vue-gql","commit_stats":null,"previous_names":["jacobclevenger/vite-plugin-vue-gql"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheatjs%2Fvite-plugin-vue-gql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheatjs%2Fvite-plugin-vue-gql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheatjs%2Fvite-plugin-vue-gql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wheatjs%2Fvite-plugin-vue-gql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wheatjs","download_url":"https://codeload.github.com/wheatjs/vite-plugin-vue-gql/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234849394,"owners_count":18896307,"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":["graphql","urql","vite","vitejs","vue"],"created_at":"2024-07-30T22:00:37.730Z","updated_at":"2025-10-01T09:30:44.391Z","avatar_url":"https://github.com/wheatjs.png","language":"TypeScript","funding_links":[],"categories":["Plugins","TypeScript"],"sub_categories":["Vue"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src='./assets/VQL-Logo.svg' alt=\"VQL\" width=\"500\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Clean up your Vue SFC Scripts by moving your graphql queries to their own block\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/vite-plugin-vue-gql\" target=\"__blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vite-plugin-vue-gql?color=a356fe\u0026label=Version\" alt=\"NPM version\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Why?\nWhen writing Vue clients for GraphQL APIs, I've noticed scripts in Vue SFC files have become over-filled with GraphQL queries and had a need to organize the code better without taking away from what makes SFCs great: Having all the code for a single component organized and in one place.\n\nMoving queries to their own files would then create multiple files for a single component, cluttering the project more and reducing productivity in having to write components spanning multiple files.\n\nEnter Vue GQL! I wrote this Vite plugin to allow placing GraphQL queries related to a component directly within the component file without cluttering scripts, by placing them within their own specialized \\\u003cgql\\\u003e tags.\n\n\u003e ⚠️ This Plugin is still in Development and currently only works with the `\u003cscript setup\u003e` format \n\n## Install\n```bash\n# Install Plugin\nnpm i -D vite-plugin-vue-gql\n\n# Install Peer Dependicies\nnpm i @urql/vue graphql\n```\n\n```ts\n// vite.config.ts\n\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\nimport Vql from 'vite-plugin-vue-gql'\n\nexport default defineConfig({\n  plugins: [\n    Vue(), \n    Vql(),\n  ],\n})\n```\n\nIf you are using typescript, make sure you include the following in your `tsconfig.json`\n```json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"vite-plugin-vue-gql/client\"\n    ]\n  }\n}\n```\n\n## Usage\nInstead of import your functions from `@urql/vue` you should now import them from the `vql` package.\n\n```ts\nimport { useQuery, useMutation, useSubscription } from 'vql'\n```\n\n`\u003cgql\u003e` tags can have the following attributes, `query`(not required), `mutation`, `subscription`, and `name`. The first three attributes indicates what type of query it is while the `name` attribute allows you to have multiple queries in the same Vue SFC. \n```html\n\u003c!-- Query--\u003e\n\u003cgql\u003e\u003c/gql\u003e\n\n\u003c!-- Mutation --\u003e\n\u003cgql mutation\u003e\u003c/gql\u003e\n\n\u003c!-- Subscription --\u003e\n\u003cgql subscription\u003e\u003c/gql\u003e\n\n\u003c!-- Named GQL Block --\u003e\n\u003cgql name=\"users\"\u003e\u003c/gql\u003e\n```\n\n## Examples\n\n**Basic Usage**\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { useQuery } from 'vql'\n\nconst { data } = useQuery()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003ch1\u003e{{ data.hello }}\u003c/h1\u003e\n\u003c/template\u003e\n\n\u003cgql\u003e\n{\n  hello\n}\n\u003c/gql\u003e\n```\n\n\n**Query with Variables**\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport { useQuery } from 'vql'\n\nconst name = ref('Evan')\nconst { data } = useQuery({ variables: { name } })\n\u003c/script\u003e\n\n\u003ctemplate\u003e...\u003c/template\u003e\n\n\u003cgql\u003e\nquery($name: String!) {\n  user(name: $name) {\n    username\n  }\n}\n\u003c/gql\u003e\n```\n\n**Named Query**\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport { useQuery } from 'vql'\n\nconst name = ref('Evan')\nconst { data } = useQuery('users', { variables: { name } })\n\u003c/script\u003e\n\n\u003ctemplate\u003e...\u003c/template\u003e\n\n\u003cgql name=\"users\"\u003e\nquery($name: String!) {\n  user(name: $name) {\n    username\n  }\n}\n\u003c/gql\u003e\n```\n\n**Mutations**\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport { useMutation } from 'vql'\n\nconst { executeMutation } = useMutation()\n\u003c/script\u003e\n\n\u003ctemplate\u003e...\u003c/template\u003e\n\n\u003cgql mutation\u003e\nmutation($name: String!) {\n  createUser(name: $name) {\n    username\n  }\n}\n\u003c/gql\u003e\n```\n\n**Subscriptions**\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport { useSubscription } from 'vql'\n\nconst isPaused = ref(false)\nconst handleSubscription = (messages = [], response) =\u003e {\n  return [response.newMessages, ...messages]\n}\n\nconst { data } = useSubscription({ from: 'Eren' }, { pause: isPaused }, handleSubscription)\n\u003c/script\u003e\n\n\u003ctemplate\u003e...\u003c/template\u003e\n\n\u003cgql mutation\u003e\nsubscription MessageSub($from: String!) {\n  newMessages(from: $from) {\n    id\n    from\n    text\n  }\n}\n\u003c/gql\u003e\n```\n\n## Fragments\nYou can use fragments in your graphql queries, mutations, and subscriptions by specifying your `.gql` files that contain your fragments in the config. \n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\nimport Vql from 'vite-plugin-vue-gql'\n\nexport default defineConfig({\n  plugins: [\n    Vue(), \n    Vql({\n      fragments: './src/fragments/**/*.gql',\n    }),\n  ],\n})\n```\n\nHere is a general idea of what your fragments should look like\n```gql\n# src/fragments/albums.gql\n\nfragment albumFields on Album {\n  id\n  name\n  image\n}\n```\n\nFinally you can use these fragments in your Vue SFC\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue'\nimport { useQuery } from 'vql'\n\nconst name = ref('RADWIMPS')\nconst { data } = useQuery({ variables: { name } })\n\u003c/script\u003e\n\n\u003ctemplate\u003e...\u003c/template\u003e\n\n\u003cgql\u003e\nquery($name: String!) {\n  queryArtists(byName: $name) {\n    name\n    image\n    albums {\n      ...albumFields\n    }\n  }\n}\n\u003c/gql\u003e\n```\n\n## Type Definitions\nYou can automatically generate typescript type definition files from you graphql schema by providing a link to your server\nor a path to your graphql schema.\n\n```ts\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\nimport Vql from 'vite-plugin-vue-gql'\n\nexport default defineConfig({\n  plugins: [\n    Vue(),\n    Vql({\n      schema: 'https://my-api.dev/graphql',\n      dts: 'src/schema.d.ts',\n    }),\n  ],\n})\n```\n\nWhenever the application is run, vite-plugin-vue-gql will download the schema from your server or open the provided gql schema and generate a typescript\ntype definition file for your schema via [GraphQL Code Generator](https://www.graphql-code-generator.com/)\n\n\n## Roadmap\n- [x] Add support for fragments\n- [ ] Investigate automatically generating queries from SFC templates\n\n## License\n\n[MIT License](https://github.com/jacobclevenger/vite-plugin-vue-gql/blob/main/LICENSE) © 2021-PRESENT [Jacob Clevenger](https://github.com/jacobclevenger)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwheatjs%2Fvite-plugin-vue-gql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwheatjs%2Fvite-plugin-vue-gql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwheatjs%2Fvite-plugin-vue-gql/lists"}