瀏覽代碼

[frontend] Improved vue3-webcomponent-wrapper README

- Added NPM version badge
- Added before section under Usage
- Corrected links in package.json
sreenaths 4 年之前
父節點
當前提交
f79575b561
共有 2 個文件被更改,包括 21 次插入7 次删除
  1. 14 2
      tools/vue3-webcomponent-wrapper/README.md
  2. 7 5
      tools/vue3-webcomponent-wrapper/package.json

+ 14 - 2
tools/vue3-webcomponent-wrapper/README.md

@@ -1,4 +1,5 @@
 # vue3-webcomponent-wrapper
+[![npm version](https://badge.fury.io/js/vue3-webcomponent-wrapper.svg)](https://www.npmjs.com/package/vue3-webcomponent-wrapper)
 
 Vue 3 wrapper to convert a Vue component into Web Component. It supports reactive attributes, events & slots.
 
@@ -8,12 +9,23 @@ One main blocker preventing the official wrapper from upgrading was the lack of
 
 ## Usage
 
+Before with Vue 2 and [@vuejs/vue-web-component-wrapper](https://github.com/vuejs/vue-web-component-wrapper).
+
+    import Vue from 'vue'
+    import wrapper from '@vue/web-component-wrapper'
+    import MyComponent from "./components/MyComponent.vue";
+
+    const CustomElement = wrapper(Vue, MyComponent)
+    window.customElements.define('my-component', CustomElement)
+
+Now with Vue 3 and vue3-webcomponent-wrapper.
+
     import { createApp, h } from "vue";
     import wrapper from "vue3-webcomponent-wrapper";
     import MyComponent from "./components/MyComponent.vue";
 
-    const webComponent = wrapper(MyComponent, createApp, h);
-    window.customElements.define("my-component", webComponent);
+    const CustomElement = wrapper(MyComponent, createApp, h);
+    window.customElements.define("my-component", CustomElement);
 
 
 Please find more information in this [demo app](https://github.com/sreenaths/vue3-webcomponent-wrapper-demo).

+ 7 - 5
tools/vue3-webcomponent-wrapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-webcomponent-wrapper",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Wrap and register a Vue 3 component as a custom element.",
   "main": "dist/index.js",
   "scripts": {
@@ -8,7 +8,8 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/cloudera/hue.git"
+    "url": "git+https://github.com/cloudera/hue.git",
+    "directory": "tools/vue3-webcomponent-wrapper"
   },
   "keywords": [
     "Vue3",
@@ -16,11 +17,12 @@
     "Component",
     "Hue"
   ],
-  "author": "Sreenath Somarajapuram <ssomarajapuram@cloudera.com>",
+  "author": "Sreenath Somarajapuram <somarajapuram@gmail.com>",
   "license": "Apache-2.0",
   "bugs": {
-    "url": "https://github.com/cloudera/hue/issues"
+    "url": "https://github.com/cloudera/hue/issues",
+    "email" : "somarajapuram@gmail.com"
   },
-  "homepage": "https://github.com/cloudera/hue/tree/master/vue3-webcomponent-wrapper#readme",
+  "homepage": "https://github.com/cloudera/hue/tree/master/tools/vue3-webcomponent-wrapper#readme",
   "devDependencies": {}
 }