docs: refactor script setup lang="ts" (#116)

nuxt · Jun 28, 2024 · 565211e · 565211e
1 parent 376fafe
commit 565211e
Show file tree

Hide file tree

Showing 24 changed files with 33 additions and 33 deletions.
diff --git a/docs/components/LogoScroller.vue b/docs/components/LogoScroller.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 const list = ref()
 // list is a html element, we need to set up a transition to scroll it to the bottom
 onMounted(async () => {

diff --git a/docs/components/OgImage/Docs.vue b/docs/components/OgImage/Docs.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 defineProps({
   title: {
     type: String,

diff --git a/docs/components/OgImage/Home.vue b/docs/components/OgImage/Home.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 defineProps({
   title: {
     type: String,

diff --git a/docs/content/docs/1.getting-started/3.confetti-tutorial.md b/docs/content/docs/1.getting-started/3.confetti-tutorial.md
@@ -63,7 +63,7 @@ useHead({
 Within your one of your components, you'll want to load the script. You can do this by using the `useScriptNpm` registry script.
 
 ```vue [app.vue]
-<script lang="ts" setup>
+<script setup lang="ts">
 useScriptNpm({
   packageName: 'js-confetti',
   file: 'dist/js-confetti.browser.js',
@@ -82,7 +82,7 @@ leverage the [use](/docs/api/use-script#use) function.
 This function is only called on the client-side and is used to resolve the third-party script.
 
 ```vue [app.vue]
-<script lang="ts" setup>
+<script setup lang="ts">
 useScriptNpm({
   packageName: 'js-confetti',
   file: 'dist/js-confetti.browser.js',
@@ -104,7 +104,7 @@ See the [Understanding proxied functions](/docs/guides/script-loading#Understand
 ::code-group
 
 ```vue [Proxy Usage]
-<script lang="ts" setup>
+<script setup lang="ts">
 const { addConfetti } = useScriptNpm({
   packageName: 'js-confetti',
   file: 'dist/js-confetti.browser.js',
@@ -117,7 +117,7 @@ addConfetti({ emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'] })
 ```
 
 ```vue [Await Load]
-<script lang="ts" setup>
+<script setup lang="ts">
 const { $script } = useScriptNpm({
   packageName: 'js-confetti',
   file: 'dist/js-confetti.browser.js',
@@ -142,7 +142,7 @@ However, you'll notice that we have an issue with types here. The `addConfetti`
 You can use the generic from the `useScriptNpm` composable to add types to the script and add global types to the window object.
 
 ```vue [app.vue]
-<script lang="ts" setup>
+<script setup lang="ts">
 export interface JSConfettiApi {
   addConfetti: (options?: { emojis: string[] }) => void
 }
@@ -171,7 +171,7 @@ You can delay the loading of the script by using the `trigger` option. This can
 In this example we'll combine the [useElementScriptTrigger](/docs/api/use-element-script-trigger) composable with the `useScriptNpm` composable to load the script after a certain element is in view.
 
 ```vue [app.vue]
-<script lang="ts" setup>
+<script setup lang="ts">
 const mouseOverEl = ref<HTMLElement>()
 const { addConfetti } = useScriptNpm<{ addConfetti: (options?: { emojis: string[] }) => void }>({
   packageName: 'js-confetti',
@@ -198,7 +198,7 @@ As the script is from NPM and versioned, we can safely bundle it with our applic
 To bundle the script, you can use the `bundle` option.
 
 ```vue [app.vue]
-<script lang="ts" setup>
+<script setup lang="ts">
 const { addConfetti } = useScriptNpm<{ addConfetti: (options?: { emojis: string[] }) => void }>({
   packageName: 'js-confetti',
   file: 'dist/js-confetti.browser.js',

diff --git a/docs/content/docs/1.guides/1.registry-scripts.md b/docs/content/docs/1.guides/1.registry-scripts.md
@@ -157,7 +157,7 @@ export default defineNuxtConfig({
 ```
 
 ```vue [components/any-component.vue]
-<script setup>
+<script setup lang="ts">
 const { trackGoal } = useScriptFathomAnalytics() // no options required
 </script>
 

diff --git a/docs/content/docs/1.guides/3.consent.md b/docs/content/docs/1.guides/3.consent.md
@@ -26,7 +26,7 @@ export const agreedToCookiesScriptConsent = useConsentScriptTrigger()
 ```
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 import { agreedToCookiesScriptConsent } from '#imports'
 
 useScript('https://www.google-analytics.com/analytics.js', {
@@ -36,7 +36,7 @@ useScript('https://www.google-analytics.com/analytics.js', {
 ```
 
 ```vue [components/cookie-banner.vue]
-<script setup>
+<script setup lang="ts">
 import { agreedToCookiesScriptConsent } from '#imports'
 </script>
 

diff --git a/docs/content/docs/1.guides/4.global.md b/docs/content/docs/1.guides/4.global.md
@@ -44,7 +44,7 @@ export default defineNuxtConfig({
 ```
 
 ```vue [components/Tracking.vue]
-<script lang="ts" setup>
+<script setup lang="ts">
 // This will not trigger the script to be loaded again because of the nuxt.config global script
 const { track, $script } = useScript<{ track: (e: string) => void }>('https://analytics.com/tracker.js')
 

diff --git a/docs/content/docs/3.api/3.use-consent-script-trigger.md b/docs/content/docs/3.api/3.use-consent-script-trigger.md
@@ -49,7 +49,7 @@ interface UseConsentScriptTriggerApi extends Promise<void> {
 ## Example
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 const trigger = useConsentScriptTrigger()
 useScript('https://example.com/script.js', { trigger })
 </script>

diff --git a/docs/content/docs/3.api/3.use-element-script-trigger.md b/docs/content/docs/3.api/3.use-element-script-trigger.md
@@ -41,7 +41,7 @@ A promise that resolves when the script is loaded.
 - Load a script when an element is visible.
 
 ```vue
-<script lang="ts" setup>
+<script setup lang="ts">
 const el = ref<HTMLElement>()
 useScript('/script.js', {
   trigger: useElementScriptTrigger({
@@ -64,7 +64,7 @@ useScript('/script.js', {
 - Load a script when an element is hovered over.
 
 ```vue
-<script lang="ts" setup>
+<script setup lang="ts">
 const el = ref<HTMLElement>()
 useScript('/script.js', {
   trigger: useElementScriptTrigger({

diff --git a/docs/content/docs/3.api/4.use-analytics-page-event.md b/docs/content/docs/3.api/4.use-analytics-page-event.md
@@ -29,7 +29,7 @@ A ref containing the current page title and path.
 - Load a script when an element is visible.
 
 ```vue
-<script lang="ts" setup>
+<script setup lang="ts">
 useAnalyticsPageEvent((ctx) => {
   console.log(ctx.title, ctx.path)
 })

diff --git a/docs/content/scripts/analytics/cloudflare-web-analytics.md b/docs/content/scripts/analytics/cloudflare-web-analytics.md
@@ -123,7 +123,7 @@ export interface CloudflareWebAnalyticsApi {
 Loading Cloudflare Web Analytics through the `app.vue` when Nuxt is ready.
 
 ```vue [app.vue]
-<script setup>
+<script setup lang="ts">
 useScriptCloudflareWebAnalytics({
   token: '12ee46bf598b45c2868bbc07a3073f58',
   scriptOptions: {

diff --git a/docs/content/scripts/analytics/google-analytics.md b/docs/content/scripts/analytics/google-analytics.md
@@ -137,7 +137,7 @@ Using Google Analytics only in production while using `gtag` to send a conversio
 ::code-group
 
 ```vue [ConversionButton.vue]
-<script setup>
+<script setup lang="ts">
 const { gtag } = useScriptGoogleAnalytics()
 
 // noop in development, ssr

diff --git a/docs/content/scripts/analytics/matomo-analytics.md b/docs/content/scripts/analytics/matomo-analytics.md
@@ -119,7 +119,7 @@ Using Matomo Analytics only in production while using `_paq` to send a conversio
 ::code-group
 
 ```vue [ConversionButton.vue]
-<script setup>
+<script setup lang="ts">
 const { _paq } = useScriptMatomoAnalytics()
 
 // noop in development, ssr

diff --git a/docs/content/scripts/analytics/plausible-analytics.md b/docs/content/scripts/analytics/plausible-analytics.md
@@ -120,7 +120,7 @@ Using Plausible Analytics only in production while using `plausible` to send a c
 ::code-group
 
 ```vue [ConversionButton.vue]
-<script setup>
+<script setup lang="ts">
 const { plausible } = useScriptPlausibleAnalytics()
 
 // noop in development, ssr

diff --git a/docs/content/scripts/content/google-maps.md b/docs/content/scripts/content/google-maps.md
@@ -145,7 +145,7 @@ const emits = defineEmits<{
 To subscribe to Google Map events, you can use the `ready` event.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 function handleReady(map) {
   map.addListener('center_changed', () => {
     console.log('Center changed', map.getCenter())
@@ -251,7 +251,7 @@ export interface GoogleMapsApi {
 Loading the Google Maps SDK and interacting with it programmatically.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const { $script } = useScriptGoogleMaps({
   apiKey: 'key'
 })

diff --git a/docs/content/scripts/marketing/clarity.md b/docs/content/scripts/marketing/clarity.md
@@ -137,7 +137,7 @@ Using Clarity only in production while using `clarity` to send a conversion even
 ::code-group
 
 ```vue [ConversionButton.vue]
-<script setup>
+<script setup lang="ts">
 const { clarity } = useScriptClarity()
 
 // noop in development, ssr

diff --git a/docs/content/scripts/marketing/hotjar.md b/docs/content/scripts/marketing/hotjar.md
@@ -127,7 +127,7 @@ Using Hotjar only in production while using `hj` to send a conversion event.
 ::code-group
 
 ```vue [ConversionButton.vue]
-<script setup>
+<script setup lang="ts">
 const { hj } = useScriptHotjar()
 
 // noop in development, ssr

diff --git a/docs/content/scripts/marketing/intercom.md b/docs/content/scripts/marketing/intercom.md
@@ -146,7 +146,7 @@ Using Intercom only in production.
 ::code-group
 
 ```vue [IntercomButton.vue]
-<script setup>
+<script setup lang="ts">
 const { Intercom } = useScriptIntercom()
 
 // noop in development, ssr

diff --git a/docs/content/scripts/payments/lemon-squeezy.md b/docs/content/scripts/payments/lemon-squeezy.md
@@ -89,7 +89,7 @@ export interface LemonSqueezyApi {
 Using the Lemon Squeezy SDK with a payment link.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const { Setup } = useScriptLemonSqueezy()
 onMounted(() => {
   Setup()

diff --git a/docs/content/scripts/payments/stripe.md b/docs/content/scripts/payments/stripe.md
@@ -114,7 +114,7 @@ export interface StripeApi {
 Loading the Stripe SDK and using it to create a payment element.
 
 ```vue
-<script setup>
+<script setup lang="ts">
 const paymentEl = ref(null)
 const { $script } = useScriptStripe()
 onMounted(() => {

diff --git a/docs/content/scripts/tracking/google-tag-manager.md b/docs/content/scripts/tracking/google-tag-manager.md
@@ -123,7 +123,7 @@ Using Google Tag Manager only in production while using `dataLayer` to send a co
 ::code-group
 
 ```vue [ConversionButton.vue]
-<script setup>
+<script setup lang="ts">
 const { dataLayer } = useScriptGoogleTagManager()
 
 // noop in development, ssr

diff --git a/docs/content/scripts/tracking/meta-pixel.md b/docs/content/scripts/tracking/meta-pixel.md
@@ -148,7 +148,7 @@ Using Meta Pixel only in production while using `fbq` to send a conversion event
 ::code-group
 
 ```vue [ConversionButton.vue]
-<script setup>
+<script setup lang="ts">
 const { fbq } = useScriptMetaPixel()
 
 // noop in development, ssr

diff --git a/docs/content/scripts/tracking/segment.md b/docs/content/scripts/tracking/segment.md
@@ -125,7 +125,7 @@ Using Segment only in production while using `analytics` to send a conversion ev
 ::code-group
 
 ```vue [ConversionButton.vue]
-<script setup>
+<script setup lang="ts">
 const { track, analytics } = useScriptSegment()
 
 // noop in development, ssr

diff --git a/docs/content/scripts/tracking/x-pixel.md b/docs/content/scripts/tracking/x-pixel.md
@@ -147,7 +147,7 @@ Using X Pixel only in production while using `twq` to send a conversion event.
 ::code-group
 
 ```vue [ConversionButton.vue]
-<script setup>
+<script setup lang="ts">
 const { twq } = useScriptXPixel()
 
 // noop in development, ssr