fix: register the composition api in a template file (#433)

BREAKING CHANGE: `@vue/composition-api` is no longer transpiled by default - in addition, ensure you haven't named any layout '0'

Previously `@vue/composition-api` was transpiled which led to problems depending on other libraries (namely, they had to be added to `build.transpile` to work - see #429 for summary). This fixes that issue (and solves #415 properly)

This uses a hack to solve that, by using a _layout_ to register Vue Composition API. (By using a key of '0' it ensures that it appears first in `Object.keys` ahead of any other layout, although users should ensure they haven't named any layout '0'.)

**Key notes**:
* `@vue/composition-api` is yet again a runtime dependency - so do add it separately to your `dependencies` or add it back into `build.transpile` if that's appropriate for your situation.

reverts #391

src/entrypoint.ts

@@ -1,7 +1,2 @@
-import Vue from 'vue'
-import CompositionApi from '@vue/composition-api'
-
-Vue.use(CompositionApi)
-
 export * from './composables'
 export * from './vue'

src/module/index.ts

@@ -16,6 +16,7 @@ import {
   isFullStatic,
   isUrl,
   resolveCoreJsVersion,
+  resolveRelativePath,
 } from './utils'
 import { compositionApiPlugin } from './vite'
 import { registerBabelPlugin } from './babel'
@@ -44,20 +45,31 @@ const compositionApiModule: Module<never> = function compositionApiModule() {
 
   nuxtOptions.alias['@nuxtjs/composition-api'] = entryFile
 
-  // Transpile Composition API for treeshaking (and de-duping)
+  // Define @vue/composition-api resolution to prevent issues with registrations
+
+  nuxtOptions.alias['@vue/composition-api'] = this.nuxt.resolver.resolveModule(
+    '@vue/composition-api'
+  )
+
+  // Transpile the Nuxt Composition API to force alias resolution
+  // TODO: remove this when we stop shadowing module
 
   nuxtOptions.build.transpile = nuxtOptions.build.transpile || []
   nuxtOptions.build.transpile.push('@nuxtjs/composition-api')
 
-  if (!nuxtOptions.dev) {
-    nuxtOptions.build.transpile.push('@vue/composition-api')
-  }
+  // Register the Vue Composition API before any other layouts
+
+  this.addLayout(resolveRelativePath('./templates/layout'), '0')
 
   // If we're using nuxt-vite, register vite plugin & inject configuration
 
   this.nuxt.hook('vite:extend', (ctx: any) => {
     ctx.config.plugins.push(compositionApiPlugin())
-    ctx.config.optimizeDeps.exclude.push('@vue/composition-api')
+    ctx.config.resolve.alias[
+      '@vue/composition-api'
+    ] = this.nuxt.resolver.resolveModule(
+      '@vue/composition-api/dist/vue-composition-api.esm.js'
+    )
     // Fake alias to prevent shadowing actual node_module
     ctx.config.resolve.alias['~nuxtjs-composition-api'] = entryFile
   })

src/templates/layout.ts

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import CompositionApi from '@vue/composition-api'
+
+Vue.use(CompositionApi)
+
+export default {
+  render() {
+    return null
+  }
+}