From b9b1fe7e39b9de2d13c1e88d4c8ae5c2c74d833e Mon Sep 17 00:00:00 2001 From: Adrien Zaganelli Date: Sun, 21 May 2023 00:39:49 +0200 Subject: [PATCH 1/2] add guide to typecheck web components written with vue #2314 --- src/guide/extras/web-components.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md index 038de5b60e..087bf891a7 100644 --- a/src/guide/extras/web-components.md +++ b/src/guide/extras/web-components.md @@ -224,6 +224,31 @@ export function register() { If you have many components, you can also leverage build tool features such as Vite's [glob import](https://vitejs.dev/guide/features.html#glob-import) or webpack's [`require.context`](https://webpack.js.org/guides/dependency-management/#requirecontext) to load all components from a directory. +### Web Components and Typescript {#web-components-and-typescript} + +If you are developing an application or a library, you may want to [typecheck](/guide/scaling-up/tooling.html#typescript) your Vue components. + +The `defineCustomElement` function does not automatically infer the types of components. +Instead we can define a global component typings using the the [`GlobalComponents` interface](https://github.com/vuejs/language-tools/tree/1b90234ec6f10a3c0f080d0310711c2cd8de02dd/extensions/vscode-vue-language-features#usage) in Vue templates and/or in [JSX](https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements). + + +```typescript +import { defineCustomElement } from 'vue' + +// vue SFC +import CounterSFC from './src/components/counter.ce.vue' + +// turn component into web components +export const Counter = defineCustomElement(Counter) + +// global typings +declare module 'vue' { + export interface GlobalComponents { + 'Counter': typeof Counter, + } +} +``` + ## Web Components vs. Vue Components {#web-components-vs-vue-components} Some developers believe that framework-proprietary component models should be avoided, and that exclusively using Custom Elements makes an application "future-proof". Here we will try to explain why we believe that this is an overly simplistic take on the problem. From dae46139951213fbee89f5d2daa999d619b5e30a Mon Sep 17 00:00:00 2001 From: Evan You Date: Tue, 13 Jun 2023 17:55:53 +0800 Subject: [PATCH 2/2] Update web-components.md --- src/guide/extras/web-components.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md index 087bf891a7..98230b97be 100644 --- a/src/guide/extras/web-components.md +++ b/src/guide/extras/web-components.md @@ -226,11 +226,9 @@ If you have many components, you can also leverage build tool features such as V ### Web Components and Typescript {#web-components-and-typescript} -If you are developing an application or a library, you may want to [typecheck](/guide/scaling-up/tooling.html#typescript) your Vue components. - -The `defineCustomElement` function does not automatically infer the types of components. -Instead we can define a global component typings using the the [`GlobalComponents` interface](https://github.com/vuejs/language-tools/tree/1b90234ec6f10a3c0f080d0310711c2cd8de02dd/extensions/vscode-vue-language-features#usage) in Vue templates and/or in [JSX](https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements). +If you are developing an application or a library, you may want to [type check](/guide/scaling-up/tooling.html#typescript) your Vue components, including those that are defined as custom elements. +Custom elements are registered globally using native APIs, so by default they won't have type inference when used in Vue templates. To provide type support for Vue components registered as custom elements, we can register global component typings using the the [`GlobalComponents` interface](https://github.com/vuejs/language-tools/blob/master/packages/vscode-vue/README.md#usage) in Vue templates and/or in [JSX](https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements): ```typescript import { defineCustomElement } from 'vue' @@ -239,9 +237,9 @@ import { defineCustomElement } from 'vue' import CounterSFC from './src/components/counter.ce.vue' // turn component into web components -export const Counter = defineCustomElement(Counter) +export const Counter = defineCustomElement(CounterSFC) -// global typings +// register global typings declare module 'vue' { export interface GlobalComponents { 'Counter': typeof Counter,