{"id":26935209,"url":"https://github.com/json-ms/vue3","last_synced_at":"2025-04-02T11:17:46.629Z","repository":{"id":285167956,"uuid":"957240581","full_name":"JSON-ms/vue3","owner":"JSON-ms","description":"A Vue3 integration protocol for JsonMs, designed for use on your projects.","archived":false,"fork":false,"pushed_at":"2025-03-30T00:13:45.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T01:23:24.514Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/JSON-ms.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-29T22:03:39.000Z","updated_at":"2025-03-30T00:13:48.000Z","dependencies_parsed_at":"2025-03-30T01:23:27.456Z","dependency_job_id":"62cd8a77-2aa6-41cf-a5fc-c653ec195c15","html_url":"https://github.com/JSON-ms/vue3","commit_stats":null,"previous_names":["json-ms/vue3"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSON-ms%2Fvue3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSON-ms%2Fvue3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSON-ms%2Fvue3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSON-ms%2Fvue3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JSON-ms","download_url":"https://codeload.github.com/JSON-ms/vue3/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246802615,"owners_count":20836373,"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":"2025-04-02T11:17:45.797Z","updated_at":"2025-04-02T11:17:46.456Z","avatar_url":"https://github.com/JSON-ms.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @jsonms/vue3\r\n\r\n[![npm version](https://badge.fury.io/js/@jsonms%2Fvue3.svg)](https://www.npmjs.com/package/@jsonms/vue3)\r\n\r\nA Vue3 wrapper for [@jsonms/js](https://github.com/JSON-ms/js).\r\n\r\n## Installation\r\n\r\nYou can install `@jsonms/vue3` via npm:\r\n\r\n```sh\r\nnpm install @jsonms/vue3\r\n```\r\n\r\nor using yarn:\r\n\r\n```sh\r\nyarn add @jsonms/vue3\r\n```\r\n\r\n## Usage\r\n\r\nCreate a file `jsonms.ts` in `/src/plugins`. Make sure to export your typings from your JSON.ms project first (See Typings under your username in JSON.ms toolbar).\r\n\r\n```ts\r\nimport JsonMs from '@jsonms/vue3'\r\nimport { inject } from 'vue';\r\nimport { type JmsLocale, type JmsObject, defaultJmsObject } from '@/interfaces'; // Your exported typings here\r\nimport { type JSONmsProvider } from '@jsonms/vue3';\r\n\r\nexport default JsonMs\u003cJmsObject, JmsLocale\u003e(defaultJmsObject)\r\n\r\ntype JmsProviderSet = JSONmsProvider\u003cJmsObject, JmsLocale, string\u003e\r\n\r\nexport const useJsonMs = (): JmsProviderSet =\u003e {\r\n  const jms = inject\u003cJmsProviderSet\u003e('jms');\r\n  if (jms) {\r\n    return jms;\r\n  }\r\n  return {\r\n    data: ref(defaultJmsObject),\r\n    locale: ref('en-US'),\r\n    section: ref('home'),\r\n  }\r\n}\r\n```\r\n\r\n### Load plugin\r\n\r\nIn `/src/plugins/index.ts`, import `jsonMs` from the plugin directory and use it within your app.\r\n\r\n```ts\r\nimport jsonMs from './jsonms'\r\n\r\n// (Optional) If you have `vue-router` and/or `vue-i18n` installed, \r\n// you can pass them as parameter so JSON.ms will listen to \r\n// any changes and behave accordingly.\r\nconst jmsOptions = {\r\n  router,\r\n  i18n,\r\n}\r\n\r\nexport function registerPlugins (app: App) {\r\n  app\r\n    .use(jsonMs, jmsOptions)\r\n}\r\n```\r\n\r\n### Usage in templates\r\n\r\nNow to use your data in your templates and see live updates, you need to import and execute `useJsonMs`. \r\n\r\n```vue\r\n\u003ctemplate\u003e\r\n  \u003c!-- data can contain whatever you defined in your JSON structure --\u003e\r\n  \u003ch1\u003e{{ data.key }}\u003c/h1\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript setup lang=\"ts\"\u003e\r\n  import { useJsonMs } from '@/plugins/jsonms';\r\n  const { data, locale } = useJsonMs();\r\n\u003c/script\u003e\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjson-ms%2Fvue3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjson-ms%2Fvue3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjson-ms%2Fvue3/lists"}