docs: move to `@nuxt/content-theme-docs and update docs

closes #66
closes #100

Author: danielroe

docs/.vuepress/components/Example.vue

@@ -1,12 +1,14 @@
 ---
+title: Introduction
+description: 'Vanilla, strongly-typed store accessor.'
+category: Accessor
+position: 10
 ---
 
-# Accessor
-
 The accessor serves two purposes:
 
 - It wraps the store so that it can be typed without conflicting with the default types for `$store` in a Nuxt project.
-- It allows us to avoid creating impossible type definitions for namespaced magic strings, like `commit('mysubmodule/mutation')`).
+- It allows us to avoid creating impossible type definitions for namespaced magic strings, like `commit('mysubmodule/mutation')`.
 
 ## Structure
 
@@ -45,9 +47,7 @@ Make sure you define types correctly following [these instructions](/setup.html#
 
 ### Components, `fetch` and `asyncData`
 
-`components/sampleComponent.vue`
-
-```ts
+```ts[~/components/sampleComponent.vue]
 import Vue from 'vue'
 
 export default Vue.extend({
@@ -76,9 +76,7 @@ export default Vue.extend({
 
 ### Middleware
 
-`middleware/test.ts`
-
-```ts
+```ts[~/middleware/test.ts]
 import { Context } from '@nuxt/types'
 
 export default ({ redirect, app: { $accessor } }: Context) => {

docs/.vuepress/config.js

@@ -1,15 +1,40 @@
 ---
+title: Actions
+description: 'Vanilla, strongly-typed store accessor.'
+category: Store
+position: 23
 ---
 
-# Actions
-
 Actions are async functions that have access to the Vuex instance and are passed a context object and optional payload.
 
 This package provides a helper function to reduce boilerplate: `actionTree`. This function adds typings and returns the actions passed to it, without transforming them.
 
-::: warning
-If you use the helper function, only the `commit` method is typed - and only for mutations within the module. Anything else should be accessed in a type-safe way through `this.app.$accessor`.
-:::
+<alert>If you use the helper function, only the `commit` method is typed - and only for mutations within the module.</alert>
+
+<alert type="info">
+
+1. Even if you do not use the `actionTree` helper function, make sure not to use the `ActionTree` type provided by Vuex. This will interfere with type inference. You won't lose out by omitting it, as Typescript will complain if you pass an incompatible action into [the `getAccessorType` function](/setup.html#add-type-definitions).
+
+2. This package does not support [object-style dispatches](https://vuex.vuejs.org/guide/actions.html).
+
+</alert>
+
+## Referencing other modules
+
+If you need to reference other modules, or dispatch actions within the module, it should be done in a type-safe way through `this.app.$accessor`. You will need to add a return type to your action to avoid TypeScript complaining about self-referential type definitions. For example:
+
+```ts
+export const actions = actionTree(
+  { state, getters, mutations },
+  {
+    async resetEmail(): Promise<void> {
+      this.app.$accessor.anotherModule.doSomething()
+    },
+  }
+)
+```
+
+## Example
 
 ```ts
 // Vanilla
@@ -64,11 +89,3 @@ export const actions = actionTree(
   }
 )
 ```
-
-::: tip
-
-1. Even if you do not use the `actionTree` helper function, make sure not to use the `ActionTree` type provided by Vuex. This will interfere with type inference. You won't lose out by omitting it, as Typescript will complain if you pass an incompatible action into [the `getAccessorType` function](/setup.html#add-type-definitions).
-
-2. This package does not support [object-style dispatches](https://vuex.vuejs.org/guide/actions.html).
-
-:::

docs/accessor/accessor.md renamed to docs/content/en/accessor-introduction.md

@@ -0,0 +1,9 @@
+---
+title: Normal usage
+description: 'Vanilla, strongly-typed store accessor.'
+category: Examples
+fullscreen: True
+position: 31
+---
+
+<code-sandbox src="https://codesandbox.io/s/github/danielroe/nuxt-typed-vuex/tree/master/examples/nuxt?from-embed"></code-sandbox>

docs/store/actions.md renamed to docs/content/en/actions.md

@@ -1,15 +1,15 @@
 ---
+title: Customisation
+description: 'Vanilla, strongly-typed store accessor.'
+category: Accessor
+position: 12
 ---
 
-# Customisation
-
 You might choose to customise the accessor function using the helper function `useAccessor`. You pass this an object with `state`, `actions`, `mutations`, etc. Child modules are within a `modules` property.
 
 ## Injecting a custom accessor
 
-`~/plugins/custom-store-accessor.ts`
-
-```ts
+```ts[~/plugins/custom-store-accessor.ts]
 import { useAccessor } from 'typed-vuex'
 import { InjectKey } from 'vue/types/options'
 import { Context } from '@nuxt/types'
@@ -32,9 +32,7 @@ export default async ({ store }: Context, inject: Inject) => {
 }
 ```
 
-::: warning
-If you are using a custom accessor in a Nuxt project, bear in mind that `useAccessor` used on its own will treat modules as non-namespaced unless they include `namespaced: true`.
-:::
+<alert>If you are using a custom accessor in a Nuxt project, bear in mind that `useAccessor` used on its own will treat modules as non-namespaced unless they include `namespaced: true`.</alert>
 
 ## Typing your custom accessor
 

docs/content/en/build.md

@@ -1,15 +1,15 @@
 ---
+title: Dynamic modules
+description: 'Vanilla, strongly-typed store accessor.'
+category: Accessor
+position: 11
 ---
 
-# Dynamic modules
-
 You can also use `typed-vuex` with dynamic modules.
 
 ## Sample module
 
-`~/modules/dynamic-module.ts`:
-
-```ts
+```ts[~/modules/dynamic-module.ts]
 export const namespaced = true
 
 export const state = () => ({
@@ -27,9 +27,7 @@ export const mutations = mutationTree(state, {
 
 You might want to use the store
 
-`~/components/my-component.vue`:
-
-```ts
+```ts[~/components/my-component.vue]
 import Vue from 'vue
 
 import { useAccessor, getAccessorType } from 'typed-vuex'

docs/accessor/customisation.md renamed to docs/content/en/customisation.md

@@ -1,15 +1,19 @@
 ---
+title: Getters
+description: 'Vanilla, strongly-typed store accessor.'
+category: Store
+position: 21
 ---
 
-# Getters
-
 A getter is a function that receives `state`, `getters`, `rootState` and `rootGetters`.
 
 This package provides a helper function to reduce boilerplate: `getterTree`. This function adds typings and returns the getters passed to it, without transforming them.
 
-::: warning
+<alert>
+
 `typed-vuex` does not currently type-check anything but the state received.
-:::
+
+</alert>
 
 ```ts
 // Vanilla
@@ -33,8 +37,8 @@ export const getters = getterTree(state, {
 })
 ```
 
-::: tip
+<alert type="info">
 
 Even if you do not use the `getterTree` helper function, make sure not to use the `GetterTree` type provided by Vuex. This will interfere with type inference. You won't lose out by omitting it, as Typescript will complain if you pass an improperly formed getter into [the `getAccessorType` function](/setup.html#add-type-definitions).
 
-:::
+</alert>