# @mozaikjs/vue

> VueJS Adapter for work with mozaikjs

Latest version **0.2.1** (published 2021-03-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mozaikjs/vue
pnpm add @mozaikjs/vue
yarn add @mozaikjs/vue
bun add @mozaikjs/vue
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2021-03-30 |
| First published | 2021-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fireworksx |
| Keywords | state, predictable, functional, immutable, hot, live, replay, flux, elm |

## Links

- npm: https://www.npmjs.com/package/@mozaikjs/vue
- Homepage: https://github.com/FireworksX/mozaik/tree/main/packages/vue
- npm.io page: https://npm.io/package/@mozaikjs/vue

## Dependencies (1)

- [@mozaikjs/core](https://npm.io/package/@mozaikjs/core.md) ^0.4.0

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 0.2.1 (latest) — 2021-03-30
- 0.2.0 — 2021-03-30
- 0.1.1 — 2021-03-22
- 0.1.0 — 2021-03-21
- 0.0.9 — 2021-03-21
- 0.0.8 — 2021-03-21
- 0.0.7 — 2021-03-20
- 0.0.6 — 2021-03-15
- 0.0.5 — 2021-03-15
- 0.0.4 — 2021-03-08
- 0.0.3 — 2021-03-08
- 0.0.2 — 2021-03-08
- 0.0.1 — 2021-03-08

## README

<div align="center">
</div>

# @mozaikjs/vue

Vue plugin for work with mozaikjs

## Install

```sh
npm i @mozaikjs/vue
```

or

```sh
yarn add @mozaikjs/vue
```

## Usage

### Template

```html
<div id="app">
  <h1>{{ $mozaik.fullMsg }}</h1>
  <ul>
    <li v-for="todo in $mozaik.list">{{ todo }}</li>
  </ul>
  <input
    :value="$mozaik.msg"
    @input="({ target: { value } }) => $mozaik.inputText(value)"
  />
  <button @click="$mozaik.addTodo">add todo</button>
</div>
```

### Scripts

```js
import { types } from '@mozaikjs/core'
import mozaikjsVue from '@mozaikjs/vue'

const { types } = core
const rootStore = types
  .model({
    msg: types.string,
    list: types.array(types.string)
  })
  .actions({
    inputText({ dispatch }, text) {
      dispatch({
        msg: text
      })
    },
    addTodo({ dispatch, env }) {
      console.log(env); // { apiV: 2, vueContext }
      dispatch({
        list: [...this.list, this.fullMsg]
      })
    }
  })
  .computed({
    fullMsg() {
      return `Computed prop: ${this.msg}`
    }
  })

/*
* Don`t pass created store
* Its make for add vueContext on env
*/

Vue.use(mozaikjsVue, {
  storeModel: rootStore,
  initialState: {
    msg: '',
    list: []
  },
  env: {
    apiV: 2
  }
})

const vm = new Vue({
  el: '#app'
})
```

### Plugin options

| Type         |
| ------------ |
| storeModel   |
| initialState |
| env          |

---
_Source: https://npm.io/package/@mozaikjs/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._