├── README.md
├── package.json
├── sandbox
    ├── nuxt.config.js
    ├── pages
    │   └── index.vue
    └── state.js
└── src
    ├── index.js
    └── plugin.js


/README.md:
--------------------------------------------------------------------------------
 1 | # @nuxtjs/observable
 2 | 
 3 | ## Setup
 4 | 
 5 | ```
 6 | npm i @nuxtjs/observable --save
 7 | ```
 8 | 
 9 | ## Usage
10 | 
11 | In `nuxt.config.js`:
12 | 
13 | ```js
14 | export default {
15 |   modules: [
16 |     '@nuxtjs/observable'
17 |   ]
18 | }
19 | ```
20 | 
21 | Add state to `<srcDir>/state.js`:
22 | 
23 | ```js
24 | export default () => ({
25 |   foobar: 123
26 | })
27 | ```
28 | 
29 | Access and modify directly (no commits, no dispatches) `$state` available in `ctx` or `this`.
30 | 
31 | ## Credits
32 | 
33 | Nuxt.js Team
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@nuxtjs/observable",
 3 |   "version": "0.0.1-alpha",
 4 |   "description": "Vue.observable() state module for Nuxt.js",
 5 |   "license": "MIT",
 6 |   "contributors": [
 7 |     {
 8 |       "name": "Jonas Galvez (@galvez)"
 9 |     }
10 |   ],
11 |   "main": "src/index.js",
12 |   "repository": "nuxt-community/observable-module",
13 |   "publishConfig": {
14 |     "access": "public"
15 |   },
16 |   "files": [
17 |     "src"
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/sandbox/nuxt.config.js:
--------------------------------------------------------------------------------
1 | import nuxtObservable from '../src'
2 | 
3 | export default {
4 |   modules: [nuxtObservable]
5 | }
6 | 
7 | 


--------------------------------------------------------------------------------
/sandbox/pages/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <p>{{ $state.helloWorld }}</p>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/sandbox/state.js:
--------------------------------------------------------------------------------
1 | export default () => ({
2 |   helloWorld: 'Hello from @nuxtjs/observable!'
3 | })
4 | 
5 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import { resolve } from 'path'
2 | 
3 | export default function() {
4 |     this.addPlugin({
5 |         src: resolve(__dirname, 'plugin.js'),
6 |         fileName: 'plugins/nuxt-observable.js'
7 |     })
8 | }
9 | 


--------------------------------------------------------------------------------
/src/plugin.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | 
 3 | export default async (ctx, inject) => {
 4 |     const state = await import('~/state')
 5 |         .then(m => m.default)
 6 |         .catch(() => {
 7 |             return () => ({})
 8 |         })
 9 |     if (process.server) {
10 |         ctx.$state = Vue.observable(await state())
11 |         ctx.ssrContext.nuxt.observable = ctx.$state
12 |     } else {
13 |         ctx.$state = Vue.observable(window.__NUXT__.observable)
14 |     }    
15 |     inject('state', ctx.$state)
16 | }
17 | 


--------------------------------------------------------------------------------