✨ feat(docs): add new composable components for Vue Stripe Components

- Added new files: use-checkout.vue, use-constants.vue, use-elements.vue, use-payment-element.vue, use-stripe.vue
- Each file represents a different composable component for Vue Stripe Components
- Each file includes a template with a main heading and a script section
- The script section imports necessary dependencies and defines page metadata using the useSeoMeta and definePageMeta functions
- The metadata includes title, description, and Twitter card information for each composable component

These new composable components were added to provide additional functionality and flexibility to Vue Stripe Components. They allow for easier integration and customization of Stripe payment functionality in Vue.js applications.

src/pages/docs/composables/use-checkout.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>useCheckout</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'useCheckout - Vue Stripe Components';
+    const metaDescription = 'useCheckout for Vue Stripe Components.';
+
+    useSeoMeta({
+      title: metaTitle,
+      ogTitle: metaTitle,
+      description: metaDescription,
+      ogDescription: metaDescription,
+      // image: ogBanner,
+      // ogImage: ogBanner,
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
+      twitterCard: 'summary_large_image',
+    });
+  },
+};
+</script>

src/pages/docs/composables/use-constants.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>useConstants</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'useConstants - Vue Stripe Components';
+    const metaDescription = 'useConstants for Vue Stripe Components.';
+
+    useSeoMeta({
+      title: metaTitle,
+      ogTitle: metaTitle,
+      description: metaDescription,
+      ogDescription: metaDescription,
+      // image: ogBanner,
+      // ogImage: ogBanner,
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
+      twitterCard: 'summary_large_image',
+    });
+  },
+};
+</script>

src/pages/docs/composables/use-elements.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>useElements</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'useElements - Vue Stripe Components';
+    const metaDescription = 'useElements for Vue Stripe Components.';
+
+    useSeoMeta({
+      title: metaTitle,
+      ogTitle: metaTitle,
+      description: metaDescription,
+      ogDescription: metaDescription,
+      // image: ogBanner,
+      // ogImage: ogBanner,
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
+      twitterCard: 'summary_large_image',
+    });
+  },
+};
+</script>

src/pages/docs/composables/use-payment-element.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>usePaymentElement</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'usePaymentElement - Vue Stripe Components';
+    const metaDescription = 'usePaymentElement for Vue Stripe Components.';
+
+    useSeoMeta({
+      title: metaTitle,
+      ogTitle: metaTitle,
+      description: metaDescription,
+      ogDescription: metaDescription,
+      // image: ogBanner,
+      // ogImage: ogBanner,
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
+      twitterCard: 'summary_large_image',
+    });
+  },
+};
+</script>

src/pages/docs/composables/use-stripe.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>useStripe</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'useStripe - Vue Stripe Components';
+    const metaDescription = 'useStripe for Vue Stripe Components.';
+
+    useSeoMeta({
+      title: metaTitle,
+      ogTitle: metaTitle,
+      description: metaDescription,
+      ogDescription: metaDescription,
+      // image: ogBanner,
+      // ogImage: ogBanner,
+      // url: 'https://jofftiquez.com/gui',
+      // ogUrl: 'https://jofftiquez.com/gui',
+      twitterCard: 'summary_large_image',
+    });
+  },
+};
+</script>