{"id":15645171,"url":"https://github.com/danielroe/vue-sanity","last_synced_at":"2025-04-05T16:03:24.072Z","repository":{"id":37016442,"uuid":"250227581","full_name":"danielroe/vue-sanity","owner":"danielroe","description":"Sanity integration for Vue Composition API","archived":false,"fork":false,"pushed_at":"2024-10-29T03:25:47.000Z","size":7214,"stargazers_count":58,"open_issues_count":1,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-29T17:54:34.730Z","etag":null,"topics":["composition-api","hacktoberfest","javascript","nuxt","sanity","typescript","vue","vuejs"],"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/danielroe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["danielroe"]}},"created_at":"2020-03-26T10:28:53.000Z","updated_at":"2024-10-28T01:36:22.000Z","dependencies_parsed_at":"2024-02-15T12:28:12.266Z","dependency_job_id":"2a0abe8b-2584-44d7-8e1b-8b3b45ab60d7","html_url":"https://github.com/danielroe/vue-sanity","commit_stats":{"total_commits":667,"total_committers":8,"mean_commits":83.375,"dds":0.3523238380809596,"last_synced_commit":"1205afff3a74bcbcb2f03032319bd826d3d41030"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielroe%2Fvue-sanity","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielroe%2Fvue-sanity/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielroe%2Fvue-sanity/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danielroe%2Fvue-sanity/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danielroe","download_url":"https://codeload.github.com/danielroe/vue-sanity/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361600,"owners_count":20926641,"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":["composition-api","hacktoberfest","javascript","nuxt","sanity","typescript","vue","vuejs"],"created_at":"2024-10-03T12:04:56.054Z","updated_at":"2025-04-05T16:03:24.038Z","avatar_url":"https://github.com/danielroe.png","language":"TypeScript","funding_links":["https://github.com/sponsors/danielroe"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e🟢 vue-sanity\u003c/h1\u003e\n\u003cp align=\"center\"\u003eSanity integration for Vue\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://npmjs.com/package/vue-sanity\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/npm/v/vue-sanity/latest.svg?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://bundlephobia.com/result?p=vue-sanity\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/bundlephobia/minzip/vue-sanity?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://npmjs.com/package/vue-sanity\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/npm/dt/vue-sanity.svg?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://lgtm.com/projects/g/danielroe/vue-sanity\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/lgtm/alerts/github/danielroe/vue-sanity?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://lgtm.com/projects/g/danielroe/vue-sanity\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/lgtm/grade/javascript/github/danielroe/vue-sanity?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://david-dm.org/danielroe/vue-sanity\"\u003e\n    \u003cimg alt=\"\" src=\"https://img.shields.io/david/danielroe/vue-sanity.svg?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e Composition API methods to incorporate [Sanity](https://www.sanity.io/) into a Vue project.\n\n## Features\n\n- 🗄 **Caching:** Query results are cached.\n- 💪 **TypeScript**: Written in TypeScript.\n- 📡 **Real-time**: Supports previews using Sanity listening mode.\n- 🖇 **Composition API**: Vue3/Vue2 support using `vue-demi`.\n- 📝 **SSR support**: Compatible with server-side rendering with Nuxt and vanilla Vue.\n\n## Quick Start\n\nFirst install `vue-sanity`:\n\n```bash\nyarn add vue-sanity\n\n# or npm\n\nnpm install vue-sanity --save\n```\n\nNow configure Sanity in your root component:\n\n```js\nimport { useSanityClient } from 'vue-sanity'\n\nexport default {\n  name: 'App',\n  setup() {\n    useSanityClient({\n      projectId: 'myprojectid',\n      dataset: 'production',\n      useCdn: process.env.NODE_ENV === 'production',\n    })\n  },\n}\n```\n\nThen you can use `useSanityFetcher` in any child component:\n\n```vue\n\u003cscript\u003e\nimport { useSanityFetcher } from 'vue-sanity'\n\nexport default {\n  setup() {\n    const { data: title } = useSanityFetcher('*[_type == \"article\"][0].title')\n\n    // OR use a factory function\n    const { data: title } = useSanityFetcher(\n      () =\u003e `*[slug.current == ${slug.value}][0].title`\n    )\n\n    return { title }\n  },\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ch1\u003e\n      {{ title }}\n    \u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## API\n\n### useSanityClient\n\n- `config`\n\n  These are the options required by `@sanity/client`. For more details, see the [Sanity docs](https://www.sanity.io/docs/js-client).\n\n- `supportPreview`\n\n  In addition to the config you would normally pass to `@sanity/client`, you can pass a boolean as a second parameter for whether to create a preview client. (Used currently only when listening to real-time data updating.)\n\n- `defaultOptions`\n\n  You may also pass an object of options that will be passed to any queries you make using `useSanityFetcher`, although of course they will be overridden by any specific options you pass to `useSanityFetcher`.\n\n#### Example\n\n```ts\nimport { useSanityClient } from 'vue-sanity'\n\nexport default {\n  setup() {\n    useSanityClient(\n      {\n        projectId: 'myprojectid',\n        dataset: 'production',\n        useCdn: process.env.NODE_ENV === 'production',\n      },\n      true // will now create a preview client for use elsewhere\n    )\n  },\n}\n```\n\n### useSanityFetcher\n\n- `query`\n\n  A function that retuns a query string. If the return value changes, a new Sanity query will be run and the return value automatically updated.\n\n- `initialValue`\n  You can provide an initial value for the query result (which will be returned before query completes).\n\n- `mapper`\n\n  You can provide a function to transform the query result.\n\n- `options`\n\n  You can also provide an object of additional options.\n\n  - **listen**: true, false or an object of options to pass to `client.listen` (defaults to `false`)\n  - **strategy**: strategy for fetching. Defaults to `both`.\n    - `:server`: will not refetch if the cache has been populated on SSR\n    - `:client`: will disable SSR fetching entirely\n    - `:both`: will fetch on server and refetch when page is loaded\n  - **deduplicate**: Whether to de-duplicate identical fetches. If set to `true`, additional fetches will not run unless made after the previous request errors or succeeds. If set to a number, additional fetches will run, but only after this many milliseconds after the previous fetch began.\n\n### useSanityQuery\n\nIf you are using [`sanity-typed-queries`](https://github.com/danielroe/sanity-typed-queries) to define your schema, this is a helper function to reduce boilerplate and explicit typing.\n\n```ts\nimport { useSanityQuery } from 'vue-sanity'\nimport { builder } from './cms/schemas/author.js'\n\nexport default {\n  setup() {\n    // title will be typed as Ref\u003cstring | null\u003e, with null as a default value\n    const { data: title } = useSanityQuery(builder.pick('name').first())\n\n    // authors will be typed as Ref\u003cstring[]\u003e, with an empty array as a default value\n    const { data: authors } = useSanityQuery(builder.pick('name'))\n\n    return { title, authors }\n  },\n}\n```\n\n#### Example\n\n```ts\nimport { useSanityClient } from 'vue-sanity'\n\nexport default {\n  setup() {\n    const { data: title } = useSanityFetcher(\n      // query\n      () =\u003e `*[_type == \"article\"][0].title`,\n      // initial value\n      'Title - Default',\n      // mapper\n      result =\u003e `Title - ${result}`,\n      // options\n      {\n        listen: true,\n        clientOnly: true,\n      }\n    )\n\n    return { title }\n  },\n}\n```\n\n#### Usage with TypeScript\n\nYou can type the return value of `useSanityFetcher` in several ways.\n\n```ts\n// data will be typed as Ref\u003cstring | null\u003e\nconst { data } = useSanityFetcher\u003cstring\u003e(\n  () =\u003e `*[_type == \"article\"][0].title`\n)\n```\n\n```ts\n// data will be typed as Ref\u003cstring | number\u003e as a number has been provided as a default value\nconst { data } = useSanityFetcher\u003cstring, number\u003e(\n  () =\u003e `*[_type == \"article\"][0].title`,\n  3\n)\n```\n\n```ts\n// data will be typed as Ref\u003cboolean | { value: string }\u003e as it can infer the type\nconst { data } = useSanityFetcher(\n  () =\u003e `*[_type == \"article\"][0].title`,\n  true,\n  (result: string) =\u003e ({ value: result })\n)\n```\n\n## Inspirations\n\nProjects I've found helpful are:\n\n- [`villus`](https://github.com/logaretm/villus)\n- [`vue-apollo`](https://github.com/vuejs/vue-apollo)\n- [`swrv`](https://github.com/Kong/swrv)\n\n## Contributors\n\nThis has been developed to suit my needs but additional use cases and contributions are very welcome.\n\n## License\n\n[MIT License](./LICENSE) - Copyright \u0026copy; Daniel Roe\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielroe%2Fvue-sanity","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanielroe%2Fvue-sanity","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanielroe%2Fvue-sanity/lists"}