Cusdis · frostming · Apr 26, 2021 · Apr 26, 2021 · Apr 28, 2021
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
 # Cusdis SDK
 
 - [react-cusdis](packages/react-cusdis)
-
+- [vue-cusdis](packages/vue-cusdis)
diff --git a/packages/vue-cusdis/.gitignore b/packages/vue-cusdis/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/packages/vue-cusdis/README.md b/packages/vue-cusdis/README.md
@@ -0,0 +1,44 @@
+# Vue Cusdis SDK
+
+```
+$ npm i vue-cusdis
+```
+
+## Usage
+
+```ts
+import { defineComponent } from 'vue'
+import { VueCusdis } from 'vue-cusdis'
+
+export default defineComponent({
+  name: 'App',
+  components: { VueCusdis },
+  data() {
+    return {
+      attrs: {
+        host: 'https://cusdis.com',
+        appId: 'APP_ID',
+        pageId: 'PAGE_ID',
+        pageTitle: 'PAGE_TITLE',
+        pageUrl: 'PAGE_URL'
+      }
+    }
+  }
+  template: `<vue-cusdis :attrs="attrs">`
+})
+
+```
+
+### props
+
+#### attrs
+
+Cusdis SDK attributs: https://cusdis.com/doc#/advanced/sdk
+
+# License
+
+MIT
+
+# Contributor
+
+[@frostming](https://github.com/frostming)
diff --git a/packages/vue-cusdis/index.html b/packages/vue-cusdis/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/packages/vue-cusdis/package.json b/packages/vue-cusdis/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "vue-cusdis",
+  "version": "1.0.1",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/vue-cusdis.umd.js",
+  "module": "./dist/vue-cusdis.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vue-cusdis.es.js",
+      "require": "./dist/vue-cusdis.umd.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.0.5"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.41",
+    "@vitejs/plugin-vue": "^1.2.1",
+    "@vue/compiler-sfc": "^3.0.5",
+    "typescript": "^4.1.3",
+    "vite": "^2.1.5",
+    "vue-tsc": "^0.0.24"
+  }
+}
diff --git a/packages/vue-cusdis/src/VueCusdis.js b/packages/vue-cusdis/src/VueCusdis.js
@@ -0,0 +1,34 @@
+import * as vue from 'vue'
+import renderSix from './compat'
+
+function createComponent(h) {
+
+  return {
+    name: 'VueCusdis',
+    props: {
+      attrs: {
+        type: Object,
+      },
+      lang: {
+        type: String
+      }
+    },
+    computed: {
+      host() {
+        return this.attrs.host || 'https://cusdis.com'
+      }
+    },
+    render: renderSix(function(h) {
+      return h('div', {}, [h('div', {
+        id: 'cusdis_thread',
+        'data-host': this.attrs.host || 'https://cusdis.com',
+        'data-page-id': this.attrs.pageId,
+        'data-app-id': this.attrs.appId,
+        'data-page-title': this.attrs.pageTitle,
+        'data-page-url': this.attrs.pageUrl
+      }), h('script', { async: true, defer: true, src: `${this.host}/js/cusdis.es.js`})])
+    })(h)
+  }
+}
+
+export default createComponent(vue.h || undefined)
diff --git a/packages/vue-cusdis/src/compat.js b/packages/vue-cusdis/src/compat.js
@@ -0,0 +1,18 @@
+/**
+ * compatible render for vue 2 and 3
+ * @param {function} h the render function Vue 3 should provide
+ */
+export default function renderSix(renderer) {
+  return function(h) {
+    if (typeof h === 'function') {
+      return function() {
+        return renderer.call(this, h)
+      }
+    }
+    return function(h) {
+      return renderer.call(this, function(name, attrs, children) {
+        return h(name, { attrs }, children)
+      })
+    }
+  }
+}
diff --git a/packages/vue-cusdis/src/main.js b/packages/vue-cusdis/src/main.js
@@ -0,0 +1,15 @@
+import { createApp, h } from "vue"
+import VueCusdis from './VueCusdis'
+
+createApp({
+  name: 'App',
+  render() {
+    return h(VueCusdis, {
+      attrs: {
+        appId: "ad9ce296-a85f-4e15-9130-379ffb47f6bd",
+        host: "https://cusdis.com",
+        pageId: "test",
+      }
+    })
+  }
+}).mount("#app")
diff --git a/packages/vue-cusdis/vite.config.js b/packages/vue-cusdis/vite.config.js
@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, 'src/VueCusdis'),
+      name: 'VueCusdis'
+    },
+    rollupOptions: {
+      external: ['vue', 'cusdis'],
+    }
+  }
+})