feat(nuxt3): allow disabling vue type shims (nuxt#2773)

groteck · Jan 19, 2022 · f219f63 · f219f63
1 parent 74ce059
commit f219f63
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 8 deletions.
diff --git a/docs/content/1.getting-started/1.introduction.md b/docs/content/1.getting-started/1.introduction.md
@@ -18,9 +18,25 @@ Before getting started, please make sure you have installed the recommended setu
 * **Node.js**<sup>*</sup> (latest LTS version) 👉 [[Download](https://nodejs.org/en/download/)]
 * **Visual Studio Code** 👉 [[Download](https://code.visualstudio.com/)]
 * **Volar Extension** 👉 [[Download](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)]
+  * Either enable [**Take Over Mode**](https://github.com/johnsoncodehk/volar/discussions/471) (recommended)
+  * ... or add **TypeScript Vue Plugin (Volar)** 👉 [[Download](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin)]
 
 <sup>*</sup> If you already have Node.js installed, check with `node --version` that you are using `v14` or `v16`.
 
+::alert{type=info}
+
+If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)** you can disable generating the shim for `*.vue` files:
+
+```js
+export default defineNuxtConfig({
+  typescript: {
+    shim: false
+  }
+})
+```
+
+::
+
 ## Nuxt 3 or Bridge?
 
 Next, decide whether to start from scratch or upgrade an existing Nuxt 2 project.

diff --git a/packages/nuxt3/src/app/types/index.d.ts b/packages/nuxt3/src/app/types/index.d.ts
@@ -1,5 +1,4 @@
 import './augments'
-import './shims'
 
 // eslint-disable-next-line
 export * from '../index'
diff --git a/packages/nuxt3/src/app/types/shims.d.ts b/packages/nuxt3/src/app/types/shims.d.ts
diff --git a/packages/nuxt3/src/core/nuxt.ts b/packages/nuxt3/src/core/nuxt.ts
@@ -44,6 +44,10 @@ async function initNuxt (nuxt: Nuxt) {
   nuxt.hook('prepare:types', (opts) => {
     opts.references.push({ types: 'nuxt3' })
     opts.references.push({ path: resolve(nuxt.options.buildDir, 'plugins.d.ts') })
+    // Add vue shim
+    if (nuxt.options.typescript.shim) {
+      opts.references.push({ path: resolve(nuxt.options.buildDir, 'vue-shim.d.ts') })
+    }
   })
 
   // Init user modules

diff --git a/packages/nuxt3/src/core/templates.ts b/packages/nuxt3/src/core/templates.ts
@@ -8,6 +8,19 @@ type TemplateContext = {
   app: NuxtApp;
 }
 
+export const vueShim = {
+  filename: 'vue-shim.d.ts',
+  write: true,
+  getContents: () =>
+    [
+      'declare module \'*.vue\' {',
+      '  import { DefineComponent } from \'@vue/runtime-core\'',
+      '  const component: DefineComponent<{}, {}, any>',
+      '  export default component',
+      '}'
+    ].join('\n')
+}
+
 // TODO: Use an alias
 export const appComponentTemplate = {
   filename: 'app-component.mjs',

diff --git a/packages/schema/src/config/typescript.ts b/packages/schema/src/config/typescript.ts
@@ -10,5 +10,12 @@ export default {
    * You can extend generated `.nuxt/tsconfig.json` using this option
    * @typedef {Awaited<ReturnType<typeof import('pkg-types')['readPackageJSON']>>}
    */
-  tsConfig: {}
+  tsConfig: {},
+
+  /**
+   * Generate a `*.vue` shim.
+   *
+   * We recommend instead either enabling [**Take Over Mode**](https://github.com/johnsoncodehk/volar/discussions/471) or adding **TypeScript Vue Plugin (Volar)** 👉 [[Download](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin)].
+   */
+  shim: true
 }