@thirstie/ecomm-vue 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/.vscode/extensions.json +3 -0
  2. package/README.md +7 -0
  3. package/index.html +27 -0
  4. package/main.js +3 -0
  5. package/package.json +28 -0
  6. package/public/thirstie_dkblue_banner.svg +1 -0
  7. package/src/assets/style.css +94 -0
  8. package/src/assets/svg.svg +1 -0
  9. package/src/components/AgeVerification.ce.vue +44 -0
  10. package/src/components/Disclaimer.ce.vue +54 -0
  11. package/src/composables/useThirstie.js +23 -0
  12. package/src/index.js +17 -0
  13. package/style.css +94 -0
  14. package/vite.config.js +32 -0
package/.vscode/extensions.json ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "recommendations": ["Vue.volar"]
3
+ }
package/README.md ADDED
@@ -0,0 +1,7 @@
1
+ # Vue 3 + Vite
2
+
3
+ This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4
+
5
+ ## Recommended IDE Setup
6
+
7
+ - [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
package/index.html ADDED
@@ -0,0 +1,27 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/thirstie_dkblue.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Thirstie Commerce Components</title>
8
+ <script>
9
+ window.thirstieAppConfig = {
10
+ APIKEY: 'eW2hndAYrtJQL5R4e9MQqX',
11
+ MAPSKEY: 'AIzaSyCnaUMiemfrsQ8QvqdfbKIoeSoT64R5s4w',
12
+ primaryColor: '#18244f',
13
+ secondaryColor: '#8298e3'
14
+ };
15
+ </script>
16
+ <script async type="module" src="/main.js"></script>
17
+ </head>
18
+ <body>
19
+ <div id="hostapp">
20
+ <header>Commerce Demo</header>
21
+ <th-age-verification></th-age-verification>
22
+ <footer>
23
+ <th-disclaimer msg="Powered by Thirstie"></th-disclaimer>
24
+ </footer>
25
+ </div>
26
+ </body>
27
+ </html>
package/main.js ADDED
@@ -0,0 +1,3 @@
1
+ import { initApp } from './src';
2
+
3
+ initApp(window.thirstieAppConfig);
package/package.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "name": "@thirstie/ecomm-vue",
3
+ "version": "0.0.2",
4
+ "type": "module",
5
+ "source": "src/index.js",
6
+ "main": "./dist/thirstie-commerce-vue.umd.cjs",
7
+ "module": "./dist/thirstie-commerce-vue.js",
8
+ "exports": {
9
+ "require": "./dist/thirstie-commerce-vue.umd.cjs",
10
+ "import": "./dist/thirstie-commerce-vue.mjs"
11
+ },
12
+ "scripts": {
13
+ "dev": "vite",
14
+ "build": "vite build",
15
+ "preview": "vite preview"
16
+ },
17
+ "peerDependencies": {
18
+ "vue": "^3.4.21"
19
+ },
20
+ "devDependencies": {
21
+ "@vitejs/plugin-vue": "^5.0.4",
22
+ "path": "^0.12.7",
23
+ "vite": "^5.2.0"
24
+ },
25
+ "dependencies": {
26
+ "@thirstie/thirstieclient": "^0.0.7"
27
+ }
28
+ }
package/public/thirstie_dkblue_banner.svg ADDED
@@ -0,0 +1 @@
1
+ <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 674.2 158.7"><defs><style>.cls-1{fill:#18244f;}</style></defs><title>Artboard 1</title><path id="THIRSTIE" class="cls-1" d="M168.15,76.05H139V40.55h-6.8v77.8H139V82.75h29.2v35.5h6.9V40.55h-6.9ZM45.65,47.15h18.2v71.1h6.9V47.15H89v-6.7H45.75v6.7Zm176.1,71.1h6.9V40.55h-6.9Zm84.6-34.6a18.74,18.74,0,0,0,10-10.2,18.61,18.61,0,0,0,1.5-7.5v-6.3a19.31,19.31,0,0,0-1.5-7.5,18.74,18.74,0,0,0-10-10.2,18,18,0,0,0-7.3-1.5h-24.2v77.8h6.9V85.05h9.4l20.7,33.2h7.9l-20.7-33.2A17.92,17.92,0,0,0,306.35,83.65Zm-24.6-5.2V47.15h17a11.17,11.17,0,0,1,4.8,1,10.52,10.52,0,0,1,3.8,2.7,12,12,0,0,1,2.6,4,13,13,0,0,1,1,4.9v6.3a11.62,11.62,0,0,1-1,4.9,13.13,13.13,0,0,1-2.6,4,14.59,14.59,0,0,1-3.8,2.7,11.17,11.17,0,0,1-4.8,1h-17Zm163.8-31.3h18.2v71.1h6.9V47.15h18.2v-6.7h-43.2v6.7Zm86.5,71.6H539V40.55h-6.9Zm96.5-71.6v-6.7h-42.9v77.8h42.9v-6.7h-36V82.75h29.2v-6.7h-29.2V47.15Zm-228.8,36.5a24.26,24.26,0,0,0-5.8-4.1,66.2,66.2,0,0,0-6.6-3q-3.45-1.35-6.6-2.7a27,27,0,0,1-5.8-3.2,14.29,14.29,0,0,1-4.1-4.4,12.24,12.24,0,0,1-1.5-6.3v-1.5a11.94,11.94,0,0,1,1-4.9,11.6,11.6,0,0,1,2.6-3.9,13.58,13.58,0,0,1,3.9-2.7,12.87,12.87,0,0,1,4.8-1H386a11.17,11.17,0,0,1,4.8,1,11.86,11.86,0,0,1,3.9,2.7,11.6,11.6,0,0,1,2.6,3.9,13,13,0,0,1,1,4.9v3.1l6.9-1.1v-2a18.47,18.47,0,0,0-1.5-7.4,20.8,20.8,0,0,0-4-6.1,20.17,20.17,0,0,0-5.9-4.1,18,18,0,0,0-7.3-1.5h-4.9a18,18,0,0,0-7.3,1.5,18.74,18.74,0,0,0-10,10.2,18.47,18.47,0,0,0-1.5,7.4V60a21,21,0,0,0,1.5,8.4,17.41,17.41,0,0,0,4.1,5.8,21.1,21.1,0,0,0,5.8,3.9c2.1,1,4.3,2,6.6,2.9s4.5,1.7,6.6,2.6a27,27,0,0,1,5.8,3.2,14.62,14.62,0,0,1,4.1,4.5,13.55,13.55,0,0,1,1.5,6.7v2.3a11.62,11.62,0,0,1-1,4.9,13.77,13.77,0,0,1-2.8,4,15.64,15.64,0,0,1-4,2.7,12.87,12.87,0,0,1-4.8,1H381a11.94,11.94,0,0,1-4.9-1,16.19,16.19,0,0,1-4.1-2.7,12.56,12.56,0,0,1-2.8-4,11.31,11.31,0,0,1-1-4.9v-4.2l-6.9,1.1v3.1a17,17,0,0,0,1.6,7.4,19.58,19.58,0,0,0,4.2,6.1,21.1,21.1,0,0,0,6.1,4.1,18.47,18.47,0,0,0,7.4,1.5h5.5a18.83,18.83,0,0,0,7.4-1.5,19.83,19.83,0,0,0,6.1-4.1,19.32,19.32,0,0,0,5.8-13.5V98a21.89,21.89,0,0,0-1.5-8.5A20.84,20.84,0,0,0,399.75,83.65Z"/><path class="cls-1" d="M663.2,158.7H11a11,11,0,0,1-11-11V11A11,11,0,0,1,11,0H663.2a11,11,0,0,1,11,11V147.7A11,11,0,0,1,663.2,158.7ZM11,8a3,3,0,0,0-3,3V147.7a3,3,0,0,0,3,3H663.2a3,3,0,0,0,3-3V11a3,3,0,0,0-3-3Z"/></svg>
package/src/assets/style.css ADDED
@@ -0,0 +1,94 @@
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ a {
17
+ font-weight: 500;
18
+ color: #646cff;
19
+ text-decoration: inherit;
20
+ }
21
+ a:hover {
22
+ color: #535bf2;
23
+ }
24
+
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ place-items: center;
29
+ min-width: 320px;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ header {
34
+ position: absolute;
35
+ top: 0;
36
+ }
37
+
38
+ footer {
39
+ position: absolute;
40
+ bottom: 0;
41
+ border-top: 1px solid red;
42
+ width: 100%;
43
+ display: flex;
44
+ place-items: center;
45
+ margin: 0;
46
+ }
47
+
48
+ h1 {
49
+ font-size: 3.2em;
50
+ line-height: 1.1;
51
+ }
52
+
53
+ button {
54
+ border-radius: 8px;
55
+ border: 1px solid transparent;
56
+ padding: 0.6em 1.2em;
57
+ font-size: 1em;
58
+ font-weight: 500;
59
+ font-family: inherit;
60
+ background-color: #1a1a1a;
61
+ cursor: pointer;
62
+ transition: border-color 0.25s;
63
+ }
64
+ button:hover {
65
+ border-color: #646cff;
66
+ }
67
+ button:focus,
68
+ button:focus-visible {
69
+ outline: 4px auto -webkit-focus-ring-color;
70
+ }
71
+
72
+ .card {
73
+ padding: 2em;
74
+ }
75
+
76
+ #app {
77
+ max-width: 1280px;
78
+ margin: 0 auto;
79
+ padding: 2rem;
80
+ text-align: center;
81
+ }
82
+
83
+ @media (prefers-color-scheme: light) {
84
+ :root {
85
+ color: #213547;
86
+ background-color: #ffffff;
87
+ }
88
+ a:hover {
89
+ color: #747bff;
90
+ }
91
+ button {
92
+ background-color: #f9f9f9;
93
+ }
94
+ }
package/src/assets/svg.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; width: 0; height: 0"><symbol viewBox="0 0 674.2 158.7" id="thirstie-footer"><path fill="currentColor" d="M168.15 76.05H139v-35.5h-6.8v77.8h6.8v-35.6h29.2v35.5h6.9v-77.7h-6.9zm-122.5-28.9h18.2v71.1h6.9v-71.1H89v-6.7H45.75v6.7zm176.1 71.1h6.9v-77.7h-6.9zm84.6-34.6a18.74 18.74 0 0 0 10-10.2 18.61 18.61 0 0 0 1.5-7.5v-6.3a19.31 19.31 0 0 0-1.5-7.5 18.74 18.74 0 0 0-10-10.2 18 18 0 0 0-7.3-1.5h-24.2v77.8h6.9v-33.2h9.4l20.7 33.2h7.9l-20.7-33.2a17.92 17.92 0 0 0 7.3-1.4zm-24.6-5.2v-31.3h17a11.17 11.17 0 0 1 4.8 1 10.52 10.52 0 0 1 3.8 2.7 12 12 0 0 1 2.6 4 13 13 0 0 1 1 4.9v6.3a11.62 11.62 0 0 1-1 4.9 13.13 13.13 0 0 1-2.6 4 14.59 14.59 0 0 1-3.8 2.7 11.17 11.17 0 0 1-4.8 1h-17zm163.8-31.3h18.2v71.1h6.9v-71.1h18.2v-6.7h-43.2v6.7zm86.5 71.6H539v-78.2h-6.9zm96.5-71.6v-6.7h-42.9v77.8h42.9v-6.7h-36v-28.8h29.2v-6.7h-29.2v-28.9zm-228.8 36.5a24.26 24.26 0 0 0-5.8-4.1 66.2 66.2 0 0 0-6.6-3q-3.45-1.35-6.6-2.7a27 27 0 0 1-5.8-3.2 14.29 14.29 0 0 1-4.1-4.4 12.24 12.24 0 0 1-1.5-6.3v-1.5a11.94 11.94 0 0 1 1-4.9 11.6 11.6 0 0 1 2.6-3.9 13.58 13.58 0 0 1 3.9-2.7 12.87 12.87 0 0 1 4.8-1H386a11.17 11.17 0 0 1 4.8 1 11.86 11.86 0 0 1 3.9 2.7 11.6 11.6 0 0 1 2.6 3.9 13 13 0 0 1 1 4.9v3.1l6.9-1.1v-2a18.47 18.47 0 0 0-1.5-7.4 20.8 20.8 0 0 0-4-6.1 20.17 20.17 0 0 0-5.9-4.1 18 18 0 0 0-7.3-1.5h-4.9a18 18 0 0 0-7.3 1.5 18.74 18.74 0 0 0-10 10.2 18.47 18.47 0 0 0-1.5 7.4V60a21 21 0 0 0 1.5 8.4 17.41 17.41 0 0 0 4.1 5.8 21.1 21.1 0 0 0 5.8 3.9c2.1 1 4.3 2 6.6 2.9s4.5 1.7 6.6 2.6a27 27 0 0 1 5.8 3.2 14.62 14.62 0 0 1 4.1 4.5 13.55 13.55 0 0 1 1.5 6.7v2.3a11.62 11.62 0 0 1-1 4.9 13.77 13.77 0 0 1-2.8 4 15.64 15.64 0 0 1-4 2.7 12.87 12.87 0 0 1-4.8 1H381a11.94 11.94 0 0 1-4.9-1 16.19 16.19 0 0 1-4.1-2.7 12.56 12.56 0 0 1-2.8-4 11.31 11.31 0 0 1-1-4.9v-4.2l-6.9 1.1v3.1a17 17 0 0 0 1.6 7.4 19.58 19.58 0 0 0 4.2 6.1 21.1 21.1 0 0 0 6.1 4.1 18.47 18.47 0 0 0 7.4 1.5h5.5a18.83 18.83 0 0 0 7.4-1.5 19.83 19.83 0 0 0 6.1-4.1 19.32 19.32 0 0 0 5.8-13.5V98a21.89 21.89 0 0 0-1.5-8.5 20.84 20.84 0 0 0-4.15-5.85z"></path><path fill="currentColor" d="M663.2 158.7H11a11 11 0 0 1-11-11V11A11 11 0 0 1 11 0h652.2a11 11 0 0 1 11 11v136.7a11 11 0 0 1-11 11zM11 8a3 3 0 0 0-3 3v136.7a3 3 0 0 0 3 3h652.2a3 3 0 0 0 3-3V11a3 3 0 0 0-3-3z"></path></symbol><symbol viewBox="0 0 159 159" id="thirstielogo"><path d="M146.7 0H11.9A11.86 11.86 0 0 0 0 11.85v134.8a11.86 11.86 0 0 0 11.9 11.9h134.8a11.86 11.86 0 0 0 11.9-11.9V11.85C158.52 5.32 153.23.054 146.7 0zm3.9 146.7a4 4 0 0 1-4 4H11.9a4 4 0 0 1-4-4V11.85a4 4 0 0 1 4-4h134.8a4 4 0 0 1 4 4v134.8l-.1.05zM57.4 47.25h18.4v70.5h6.9v-70.5h18.4v-6.6H57.4v6.6z" fill="currentColor" fill-rule="nonzero"></path></symbol>
package/src/components/AgeVerification.ce.vue ADDED
@@ -0,0 +1,44 @@
1
+ <script setup>
2
+ import { ref } from 'vue'
3
+ import { useThirstie } from '../composables/useThirstie';
4
+ const { thirstieClient } = useThirstie();
5
+
6
+ const responseMessage = ref(null);
7
+
8
+ const handleClick = async (ageGateValue) => {
9
+ const r = await thirstieClient.dispatch('setAgeGate', { ageGateType: 'yesno', ageGateValue });
10
+ // TODO: implement proper logic for each case
11
+ responseMessage.value = ageGateValue ? 'Welcome!' : 'Sorry, we can not serve you';
12
+ };
13
+
14
+ defineProps({
15
+ msg: String,
16
+ })
17
+
18
+ </script>
19
+
20
+ <template>
21
+ <div v-if="!responseMessage" class="th-age-gate-wrapper">
22
+ <h3>{{ msg || "Are You of Legal Drinking Age?" }}</h3>
23
+ <button @click="handleClick(true)">Yes</button>
24
+ <button @click="handleClick(false)">No</button>
25
+ </div>
26
+ <div v-else class="th-age-gate-wrapper">
27
+ <h3>{{ responseMessage }}</h3>
28
+ </div>
29
+ </template>
30
+
31
+ <style scoped>
32
+ .th-age-gate-wrapper {
33
+ min-width: 300px;
34
+ max-width: 1280px;
35
+ margin: 0 auto;
36
+ padding: 2rem;
37
+ text-align: center;
38
+ border: 1px solid #666;
39
+ }
40
+ .th-age-gate-wrapper button {
41
+ margin: 2rem;
42
+ text-align: center;
43
+ }
44
+ </style>
package/src/components/Disclaimer.ce.vue ADDED
@@ -0,0 +1,54 @@
1
+ <script setup>
2
+
3
+ defineProps({
4
+ msg: String,
5
+ })
6
+
7
+ </script>
8
+
9
+ <template>
10
+ <div class="th-disclaimer-wrapper">
11
+ <h3>{{ msg || "Powered By Thirstie" }}</h3>
12
+ <div class="th-disclaimer-content">
13
+ <span>
14
+ All sales of alcohol are fulfilled by licensed retailers on the Thirstie Network. Shopping experience powered by </span>
15
+ <a
16
+ href="https://thirstie.com"
17
+ target="_blank"
18
+ aria-label="thirstie - opens in new tab"
19
+ :tabindex="0"
20
+ >
21
+ <svg
22
+ role="img"
23
+ aria-label="Thirstie Logo"
24
+ class="th-disclaimer-logo"
25
+ width="80px"
26
+ height="16px"
27
+ >
28
+ <title>Powered by Thirstie</title>
29
+ <use
30
+ fill="currentColor"
31
+ xlink:href="../assets/svg.svg#thirstie-footer"
32
+ ></use>
33
+ </svg>
34
+ </a>
35
+ </div>
36
+ </div>
37
+ </template>
38
+
39
+ <style scoped>
40
+ .th-disclaimer-wrapper {
41
+ width: 75%;
42
+ margin: 1rem auto;
43
+ text-align: center;
44
+ line-height: 22px;
45
+ color: #aaa;
46
+ }
47
+ .th-disclaimer-content {
48
+ color: #666;
49
+ }
50
+ .th-disclaimer-logo {
51
+ color: #ddd;
52
+ vertical-align: middle;
53
+ }
54
+ </style>
package/src/composables/useThirstie.js ADDED
@@ -0,0 +1,23 @@
1
+ import ThirstieClient from '@thirstie/thirstieclient';
2
+
3
+ const globalThirstie = {
4
+ thirstieClient: null,
5
+ brandStyle: {}
6
+ };
7
+
8
+ export async function useThirstieInit (cfg) {
9
+ globalThirstie.config = cfg;
10
+ const { APIKEY: apiKey, MAPSKEY: mapsKey } = cfg;
11
+ const { primaryColor, secondaryColor } = cfg;
12
+ // TODO: load state (sessionToken) from localstorage if available
13
+ const thirstieClient = new ThirstieClient({ apiKey, mapsKey });
14
+ await thirstieClient.initSession();
15
+ globalThirstie.thirstieClient = thirstieClient;
16
+ globalThirstie.brandStyle = { primaryColor, secondaryColor };
17
+ return { thirstieClient };
18
+ }
19
+
20
+ export function useThirstie () {
21
+ const { thirstieClient } = globalThirstie;
22
+ return { thirstieClient };
23
+ }
package/src/index.js ADDED
@@ -0,0 +1,17 @@
1
+ import Disclaimer from './components/Disclaimer.ce.vue';
2
+ import AgeVerification from './components/AgeVerification.ce.vue';
3
+
4
+ import './assets/style.css';
5
+ import { defineCustomElement } from 'vue';
6
+ import { useThirstieInit } from './composables/useThirstie';
7
+
8
+ async function initApp (appConfig) {
9
+ await useThirstieInit(appConfig);
10
+
11
+ customElements.define('th-disclaimer', defineCustomElement(Disclaimer));
12
+ customElements.define('th-age-verification', defineCustomElement(AgeVerification));
13
+ }
14
+
15
+ export {
16
+ initApp
17
+ };
package/style.css ADDED
@@ -0,0 +1,94 @@
1
+ :root {
2
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3
+ line-height: 1.5;
4
+ font-weight: 400;
5
+
6
+ color-scheme: light dark;
7
+ color: rgba(255, 255, 255, 0.87);
8
+ background-color: #242424;
9
+
10
+ font-synthesis: none;
11
+ text-rendering: optimizeLegibility;
12
+ -webkit-font-smoothing: antialiased;
13
+ -moz-osx-font-smoothing: grayscale;
14
+ }
15
+
16
+ a {
17
+ font-weight: 500;
18
+ color: #646cff;
19
+ text-decoration: inherit;
20
+ }
21
+ a:hover {
22
+ color: #535bf2;
23
+ }
24
+
25
+ body {
26
+ margin: 0;
27
+ display: flex;
28
+ place-items: center;
29
+ min-width: 320px;
30
+ min-height: 100vh;
31
+ }
32
+
33
+ header {
34
+ position: absolute;
35
+ top: 0;
36
+ }
37
+
38
+ footer {
39
+ position: absolute;
40
+ bottom: 0;
41
+ border-top: 1px solid red;
42
+ width: 100%;
43
+ display: flex;
44
+ place-items: center;
45
+ margin: 0;
46
+ }
47
+
48
+ h1 {
49
+ font-size: 3.2em;
50
+ line-height: 1.1;
51
+ }
52
+
53
+ button {
54
+ border-radius: 8px;
55
+ border: 1px solid transparent;
56
+ padding: 0.6em 1.2em;
57
+ font-size: 1em;
58
+ font-weight: 500;
59
+ font-family: inherit;
60
+ background-color: #1a1a1a;
61
+ cursor: pointer;
62
+ transition: border-color 0.25s;
63
+ }
64
+ button:hover {
65
+ border-color: #646cff;
66
+ }
67
+ button:focus,
68
+ button:focus-visible {
69
+ outline: 4px auto -webkit-focus-ring-color;
70
+ }
71
+
72
+ .card {
73
+ padding: 2em;
74
+ }
75
+
76
+ #app {
77
+ max-width: 1280px;
78
+ margin: 0 auto;
79
+ padding: 2rem;
80
+ text-align: center;
81
+ }
82
+
83
+ @media (prefers-color-scheme: light) {
84
+ :root {
85
+ color: #213547;
86
+ background-color: #ffffff;
87
+ }
88
+ a:hover {
89
+ color: #747bff;
90
+ }
91
+ button {
92
+ background-color: #f9f9f9;
93
+ }
94
+ }
package/vite.config.js ADDED
@@ -0,0 +1,32 @@
1
+ import { defineConfig } from 'vite';
2
+ import vue from '@vitejs/plugin-vue';
3
+ import { resolve } from 'path';
4
+
5
+ // https://vitejs.dev/guide/build.html#library-mode
6
+ export default defineConfig({
7
+ plugins: [
8
+ vue({
9
+ template: {
10
+ compilerOptions: {
11
+ isCustomElement: (tag) => tag.startsWith('th-')
12
+ }
13
+ }
14
+ })
15
+ ],
16
+ build: {
17
+ lib: {
18
+ entry: resolve(__dirname, 'src/index.js'),
19
+ name: '@thirstie/ecomm-vue',
20
+ fileName: 'thirstie-commerce-vue',
21
+ formats: [ 'es', 'umd', 'cjs' ]
22
+ },
23
+ rollupOptions: {
24
+ external: [ 'vue' ],
25
+ output: {
26
+ globals: {
27
+ vue: 'Vue'
28
+ }
29
+ }
30
+ }
31
+ }
32
+ });