fix(bridge): ensure vue ts alias points to original vue (nuxt#1924)

skashif18 · Nov 15, 2021 · 4b367a1 · 4b367a1
1 parent 36f3691
commit 4b367a1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/docs/content/1.getting-started/3.bridge.md b/docs/content/1.getting-started/3.bridge.md
@@ -127,10 +127,17 @@ If you are using TypeScript, you can edit your `tsconfig.json` to benefit from a
 + "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
     ...
-  }
+  },
++ "vueCompilerOptions": {
++   "experimentalCompatMode": 2,
++ }
 }
 ```
 
+::alert
+You may also need to add `@vue/runtime-dom` as a devDependency if you are struggling to get template type inference working with [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar).
+::
+
 ## Migrate Composition API
 
 If you were previously using `@vue/composition-api` or `@nuxtjs/composition-api`, please read the [composition api migration guide](/getting-started/bridge-composition-api).

diff --git a/packages/bridge/src/app.ts b/packages/bridge/src/app.ts
@@ -50,6 +50,17 @@ export function setupAppBridge (_options: any) {
     nuxt.options.alias[alias] = nuxt.options.alias['vue2-bridge']
   }
 
+  // Ensure TS still recognises vue imports
+  nuxt.hook('prepare:types', ({ tsConfig }) => {
+    tsConfig.compilerOptions.paths.vue2 = ['vue']
+    delete tsConfig.compilerOptions.paths.vue
+
+    // @ts-ignore
+    tsConfig.vueCompilerOptions = {
+      experimentalCompatMode: 2
+    }
+  })
+
   // Deprecate various Nuxt options
   if (nuxt.options.globalName !== 'nuxt') {
     throw new Error('Custom global name is not supported by @nuxt/bridge.')