Live demo and Nuxt support

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+dist-demo
 dist-ssr
 *.local
 

README.md

@@ -6,16 +6,21 @@
 [![npm](https://img.shields.io/npm/dm/vue-stripe-js)](https://www.npmjs.com/package/vue-stripe-js)
 [![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://vshymanskyy.github.io/StandWithUkraine)
 
-Vue 3 components for Stripe. Build advanced payment integrations quickly. Easy to start, friendly DX, minimal abstractions, and full control. It's a glue between Stripe.js and Vue component lifecycle.
+Vue 3 components for Stripe. Build advanced payment integrations quickly. Easy to start, friendly DX, minimal abstractions, and full control. It's a glue between Stripe.js and Vue component lifecycle. Works with Nuxt 3.
 
-### [**Become a sponsor** 💜](https://github.com/sponsors/softbeehive)
+🟢 **[Live demo](https://vue-stripe-js.netlify.app/)**
+
+## Health 💜
 Consider supporting efforts to make this project healthy and sustainable. Thank you!
 
+- **[Become a sponsor](https://github.com/sponsors/softbeehive)**
+- **[Donate via PayPal](https://paypal.me/softbeehive)**
+
 ## Quickstart ⚡️
 
 ### Upgrade
-• [**Upgrade guide**](docs/UPGRADE_V1_TO_V2.md)   
-• **[Docs v1](https://github.com/ectoflow/vue-stripe-js/tree/v1.0.4)**
+- **[Upgrade guide](docs/UPGRADE_V1_TO_V2.md)**   
+- **[Docs v1](https://github.com/ectoflow/vue-stripe-js/tree/v1.0.4)**
 
 ### 1. Install
 

biome.json

@@ -7,7 +7,7 @@
   },
   "files": {
     "ignoreUnknown": false,
-    "ignore": ["dist"]
+    "ignore": ["dist", "dist-demo"]
   },
   "formatter": {
     "enabled": true,

examples/CardElement.vue

@@ -1,7 +1,6 @@
 <template>
-  <form @submit.prevent="handlePay">
+  <form v-if="stripeLoaded" @submit.prevent="handlePay">
     <StripeElements
-      v-if="stripeLoaded"
       class="py-3"
       :stripe-key="publishableKey"
       :instance-options="stripeOptions"
@@ -15,7 +14,7 @@
       />
     </StripeElements>
     <button 
-      class="w-full rounded-b bg-slate-600 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-500"
+      class="w-full focus:outline-none text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-900"
     >
       Pay now
     </button>

examples/CardElementLegacy.vue

@@ -17,7 +17,7 @@
   <button
     type="button"
     @click="pay"
-    class="w-full rounded-b bg-slate-600 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-500"
+    class="w-full focus:outline-none text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-900"
   >
     Pay now
   </button>

examples/DemoApp.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col gap-y-12 container px-6 py-10 max-w-xl">
+  <div class="flex flex-col gap-y-10 container p-10 max-w-2xl mx-auto">
     <h1 class="text-3xl font-semibold">Demo Vue Stripe.js</h1>
-
+    
     <section>
       <h2 class="text-2xl font-semibold">Payment Element</h2>
       <p class="pt-1 pb-6">Deferred flow -
@@ -13,6 +13,8 @@
       <PaymentElementDeferred />
     </section>
 
+    <hr class="border-gray-300">
+
     <section>
       <h2 class="text-2xl font-semibold">Card Element</h2>
       <p class="pt-1 pb-4">More recent example. Stripe recommends using Payment Element instead of the Card - 
@@ -24,12 +26,16 @@
       <CardElement />
     </section>
 
+    <hr class="border-gray-300">
+
     <section>
       <h2 class="text-2xl font-semibold">Card Element (Legacy)</h2>
       <p class="pt-1 pb-4">How we implemented card payments a few years ago.</p>
       <CardElementLegacy />
     </section>
 
+    <hr class="border-gray-300">
+
     <section>
       <h2 class="text-2xl font-semibold">Express Checkout Element</h2>
       <p class="pt-1 pb-4">Use your publishable key and enable relevant payment methods, e.g. PayPal - 
@@ -40,6 +46,12 @@
       </p>
       <ExpressCheckoutElement />
     </section>
+
+    <section>
+      <h2 class="text-2xl font-semibold">Built with</h2>
+      <a class="text-blue-700 hover:underline"
+      href="https://github.com/ectoflow/vue-stripe-js">https://github.com/ectoflow/vue-stripe-js</a>
+    </section>
   </div>
 </template>
 

examples/PaymentElementDeferred.vue

@@ -1,7 +1,6 @@
 <template>
-  <form @submit.prevent="handleSubmit">
+  <form v-if="stripeLoaded" @submit.prevent="handleSubmit">
     <StripeElements
-      v-if="stripeLoaded"
       :stripe-key="stripeKey"
       :instance-options="stripeOptions"
       :elements-options="elementsOptions"
@@ -16,7 +15,7 @@
     </StripeElements>
     <button
       type="submit"
-      class="rounded-md bg-slate-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-slate-500"
+      class="focus:outline-none text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 mb-2 dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-900"
     >
       Submit
     </button>

package.json

@@ -14,6 +14,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
+    "build:demo": "vite --config vite.demo.config.ts build",
     "check:types": "publint && attw --pack . --ignore-rules=cjs-resolves-to-esm",
     "ci": "biome check && pnpm run build && pnpm run check:types"
   },

vite.demo.config.ts

@@ -0,0 +1,11 @@
+import tailwindcss from "@tailwindcss/vite"
+import vue from "@vitejs/plugin-vue"
+import { defineConfig } from "vite"
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), tailwindcss()],
+  build: {
+    outDir: "dist-demo",
+  },
+})

vue-stripe-js.code-workspace

@@ -20,6 +20,9 @@
     },
     "[jsonc]": {
       "editor.defaultFormatter": "biomejs.biome"
+    },
+    "[json]": {
+      "editor.defaultFormatter": "biomejs.biome"
     }
   }
 }