Diferencias

Muestra las diferencias entre dos versiones de la página.

--- wiki2:vue:webcomponents [2018/10/14 14:26]
alfred
+++ wiki2:vue:webcomponents [2020/05/09 09:25] (actual)
@@ Línea 24: / Línea 24: @@
 </code>
   * https://cli.vuejs.org/guide/build-targets.html#web-component
+:!: Take into account the compatibility of ''window.customElements'':
+  * https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements#Browser_compatibility
+===== Varios en un único bundle =====
+<code>
+vue-cli-service build --target wc --name foo 'src/components/*.vue'
+</code>
+Los componentes se inferirán a partir del nombre. ''foo-user-component'' por ejemplo para UserComponent.
+Se pueden pedir los componentes asincronamente si el bundle crece mucho con...
+<code>
+vue-cli-service build --target wc-async --name foo 'src/components/*.vue'
+</code>
+===== Otros parámetros a usar =====
+<code>
+# Para producción
+--mode production
+# Para watchear
+--watch
+# Para escoger destino
+--dest ../
+</code>
+===== Internamente hace... =====
+Algo parecido a esto:
+<code>
+import Vue from 'vue';
+import wrap from '@vue/web-component-wrapper';
+import VueWebComponent from './components/VueWebComponent';
+const CustomElement = wrap(Vue, VueWebComponent);
+window.customElements.define('my-custom-element', CustomElement);
+</code>

Programming