✨ feat(docs): add new components Address Element, Express Checkout El…

…ement, Link Authentication Element, and Payment Element

The commit adds four new Vue components: Address Element, Express Checkout Element, Link Authentication Element, and Payment Element. These components are part of the documentation pages for Vue Stripe Components. Each component defines its own page meta, including title and description, and uses the `useSeoMeta` and `definePageMeta` functions from the `#imports` module to set the SEO metadata. This addition enhances the documentation by providing examples and explanations for these specific components.

src/pages/docs/components/address-element.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>Address Element</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'Address Element - Vue Stripe Components';
+    const metaDescription = 'Address Element 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/components/express-checkout-element.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>Express Checkout Element</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'Express Checkout Element - Vue Stripe Components';
+    const metaDescription = 'Express Checkout Element 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/components/link-authentication-element.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>Link Authentication Element</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'Link Authentication Element - Vue Stripe Components';
+    const metaDescription = 'Link Authentication Element 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/components/payment-element.vue

@@ -0,0 +1,32 @@
+<template>
+  <main>
+    <h1>Payment Element</h1>
+  </main>
+</template>
+
+<script>
+// import { onMounted, ref } from 'vue';
+import { useSeoMeta, definePageMeta } from '#imports';
+export default {
+  setup () {
+    definePageMeta({
+      layout: 'blank',
+    });
+
+    const metaTitle = 'Payment Element - Vue Stripe Components';
+    const metaDescription = 'Payment Element 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>