feat: enable this to be used as a nuxt module (#13)

Co-authored-by: Kevin Regenrek <hello@regenrek.at>

Author: danielroe

README.md

@@ -35,8 +35,6 @@
 
 ## Quick Start
 
-> This project requires usage of [`@vue/composition-api`](https://github.com/vuejs/composition-api). Make sure you've set that up correctly first.
-
 First install `nuxt-composition-api`:
 
 ```bash
@@ -47,6 +45,18 @@ yarn add nuxt-composition-api
 npm install nuxt-composition-api --save
 ```
 
+Enable the module in your `nuxt.config.js`
+
+```
+{
+  buildModules: [
+    'nuxt-composition-api'
+  ]
+}
+```
+
+The module automatically installs [`@vue/composition-api`](https://github.com/vuejs/composition-api) as a plugin, so you shouldn't need to do so separately.
+
 You will now be able to access the following hooks:
 
 ### useFetch
@@ -56,8 +66,7 @@ Versions of Nuxt newer than v2.12 support a [custom hook called `fetch`](https:/
 You can access this with this package as follows:
 
 ```ts
-import { defineComponent, ref } from '@vue/composition-api'
-import { useFetch } from 'nuxt-composition-api'
+import { defineComponent, ref, useFetch } from 'nuxt-composition-api'
 import axios from 'axios'
 
 export default defineComponent({
@@ -76,8 +85,7 @@ export default defineComponent({
 You can access the Nuxt context more easily using `withContext`, which runs synchronously within the setup function.
 
 ```ts
-import { defineComponent, ref } from '@vue/composition-api'
-import { withContext } from 'nuxt-composition-api'
+import { defineComponent, ref, withContext } from 'nuxt-composition-api'
 
 export default defineComponent({
   setup() {
@@ -88,10 +96,30 @@ export default defineComponent({
 })
 ```
 
+### Additional `@vue/composition-api` functions
+
+For convenience, this package also exports the [`@vue/composition-api`](https://github.com/vuejs/composition-api) methods and hooks, so you can import directly from `nuxt-composition-api`.
+
 ## Contributors
 
 Contributions are very welcome.
 
+Clone this repo
+
+```
+git clone git@github.com:danielroe/nuxt-composition-api.git
+```
+
+Install dependencies and build project
+
+```
+yarn install
+
+yarn build
+```
+
+**Tip:** You can use `yarn link` to test the module locally with your nuxt project.
+
 ## License
 
 [MIT License](./LICENSE) - Copyright © Daniel Roe

package.json

@@ -30,6 +30,7 @@
   "sideEffects": false,
   "scripts": {
     "build": "yarn clean && yarn compile",
+    "watch": "yarn compile -w",
     "clean": "rm -rf lib/*",
     "compile": "rollup -c",
     "lint": "run-s lint:all:*",
@@ -42,8 +43,7 @@
     "release": "release-it",
     "test": "run-s test:*",
     "test:types": "tsd",
-    "test:e2e": "testcafe firefox:headless test/e2e --app 'node test/start-fixture.js'",
-    "test:unit": "jest"
+    "test:e2e": "testcafe firefox:headless test/e2e --app 'node test/start-fixture.js'"
   },
   "tsd": {
     "directory": "test/tsd",

rollup.config.js

@@ -1,25 +1,41 @@
 import typescript from 'rollup-plugin-typescript2'
 import pkg from './package.json'
 
-export default {
-  input: 'src/index.ts',
-  output: [
-    {
-      file: pkg.main,
-      format: 'cjs',
-    },
-    {
-      file: pkg.module,
-      format: 'es',
-    },
-  ],
-  external: [
-    ...Object.keys(pkg.dependencies || {}),
-    ...Object.keys(pkg.peerDependencies || {}),
-  ],
-  plugins: [
-    typescript({
-      typescript: require('typescript'),
-    }),
-  ],
-}
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: pkg.main,
+        format: 'cjs',
+      },
+      {
+        file: pkg.module,
+        format: 'es',
+      },
+    ],
+    external: [
+      ...Object.keys(pkg.dependencies || {}),
+      ...Object.keys(pkg.peerDependencies || {}),
+      // 'prop-types',
+    ],
+    plugins: [
+      typescript({
+        typescript: require('typescript'),
+      }),
+    ],
+  },
+  {
+    input: 'src/plugin.js',
+    output: [
+      {
+        file: 'lib/plugin.js',
+        format: 'es',
+      },
+    ],
+    external: [
+      ...Object.keys(pkg.dependencies || {}),
+      ...Object.keys(pkg.peerDependencies || {}),
+    ],
+  },
+]

src/fetch.ts

@@ -34,7 +34,13 @@ async function callFetches(this: AugmentedComponentInstance) {
   const fetchesToCall = fetches.get(this)
   if (!fetchesToCall) return
   ;(this.$nuxt as any).nbFetching++
-  this.$fetchState = this.$fetchState || {}
+  this.$fetchState =
+    this.$fetchState ||
+    Vue.observable({
+      error: null,
+      pending: false,
+      timestamp: 0,
+    })
   this.$fetchState.pending = true
   this.$fetchState.error = null
   this._hydrated = false
@@ -62,7 +68,13 @@ async function callFetches(this: AugmentedComponentInstance) {
 
 async function serverPrefetch(vm: AugmentedComponentInstance) {
   // Call and await on $fetch
-  vm.$fetchState = vm.$fetchState || {}
+  vm.$fetchState =
+    vm.$fetchState ||
+    Vue.observable({
+      error: null,
+      pending: false,
+      timestamp: 0,
+    })
   try {
     await callFetches.call(vm)
   } catch (err) {

src/index.ts

@@ -1,7 +1,22 @@
-import Vue from 'vue'
-import CompositionApi from '@vue/composition-api'
+import { resolve, join } from 'path'
+import { Module } from '@nuxt/types'
 
-Vue.use(CompositionApi)
+const compositionApiModule: Module<any> = function () {
+  const libRoot = resolve(__dirname, '..')
+  const { dst } = this.addTemplate({
+    src: resolve(libRoot, 'lib', 'plugin.js'),
+    fileName: join('composition-api', 'plugin.js'),
+    options: {},
+  })
+  this.options.plugins = this.options.plugins || []
+  this.options.plugins.push(resolve(this.options.buildDir || '', dst))
+}
+
+export default compositionApiModule
+// eslint-disable-next-line
+export const meta = require('../package.json')
 
 export { useFetch } from './fetch'
 export { withContext } from './context'
+
+export * from '@vue/composition-api'

test/fixture/plugins/composition-api.js src/plugin.jstest/fixture/plugins/composition-api.js renamed to src/plugin.js

@@ -5,5 +5,5 @@ module.exports = {
   rootDir: resolve(__dirname, '../..'),
   buildDir: resolve(__dirname, '.nuxt'),
   srcDir: __dirname,
-  plugins: [require.resolve('./plugins/composition-api')],
+  buildModules: [require.resolve('../..')],
 }

test/fixture/nuxt.config.js

@@ -6,8 +6,7 @@
 </template>
 
 <script>
-import { defineComponent, ref } from '@vue/composition-api'
-import { useFetch } from '../../..'
+import { defineComponent, ref, useFetch } from '../../..'
 
 export function fetcher(result) {
   return new Promise(resolve => {

test/fixture/pages/index.vue

@@ -12,7 +12,7 @@
     "declaration": true,
     "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
-    "types": ["@nuxt/types"]
+    "types": ["node", "@nuxt/types"]
   },
   "exclude": ["node_modules", "lib", "test"]
 }