https://github.com/json-ms/vue3
A Vue3 integration protocol for JsonMs, designed for use on your projects.
https://github.com/json-ms/vue3
Last synced: about 1 year ago
JSON representation
A Vue3 integration protocol for JsonMs, designed for use on your projects.
- Host: GitHub
- URL: https://github.com/json-ms/vue3
- Owner: JSON-ms
- License: mit
- Created: 2025-03-29T22:03:39.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-30T00:13:45.000Z (about 1 year ago)
- Last Synced: 2025-03-30T01:23:24.514Z (about 1 year ago)
- Language: TypeScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @jsonms/vue3
[](https://www.npmjs.com/package/@jsonms/vue3)
A Vue3 wrapper for [@jsonms/js](https://github.com/JSON-ms/js).
## Installation
You can install `@jsonms/vue3` via npm:
```sh
npm install @jsonms/vue3
```
or using yarn:
```sh
yarn add @jsonms/vue3
```
## Usage
Create 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).
```ts
import JsonMs from '@jsonms/vue3'
import { inject } from 'vue';
import { type JmsLocale, type JmsObject, defaultJmsObject } from '@/interfaces'; // Your exported typings here
import { type JSONmsProvider } from '@jsonms/vue3';
export default JsonMs(defaultJmsObject)
type JmsProviderSet = JSONmsProvider
export const useJsonMs = (): JmsProviderSet => {
const jms = inject('jms');
if (jms) {
return jms;
}
return {
data: ref(defaultJmsObject),
locale: ref('en-US'),
section: ref('home'),
}
}
```
### Load plugin
In `/src/plugins/index.ts`, import `jsonMs` from the plugin directory and use it within your app.
```ts
import jsonMs from './jsonms'
// (Optional) If you have `vue-router` and/or `vue-i18n` installed,
// you can pass them as parameter so JSON.ms will listen to
// any changes and behave accordingly.
const jmsOptions = {
router,
i18n,
}
export function registerPlugins (app: App) {
app
.use(jsonMs, jmsOptions)
}
```
### Usage in templates
Now to use your data in your templates and see live updates, you need to import and execute `useJsonMs`.
```vue
{{ data.key }}
import { useJsonMs } from '@/plugins/jsonms';
const { data, locale } = useJsonMs();
```