chore: 3.0.0-rc.1

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [16]
+        node: [18]
 
     steps:
       - uses: actions/setup-node@v3

.stackblitz/app.vue

@@ -1,25 +1,30 @@
 <script lang="ts" setup>
 // Usage of `useCldImageUrl` composable
-const { url } = useCldImageUrl({ options: { src: "/cld-sample-5.jpg" } });
-console.log(url);
+const { url } = useCldImageUrl({ options: { src: '/cld-sample-5.jpg' } })
+console.log(url)
 
 const { url: videoUrl } = useCldVideoUrl({
-  options: { src: "videos/mountain-stars" },
-});
-console.log(videoUrl);
+  options: { src: 'videos/mountain-stars' },
+})
+console.log(videoUrl)
 
 const mediaAssets = [
-  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
-  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
-  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
-];
+  { tag: 'electric_car_product_gallery_demo' }, // by default mediaType: "image"
+  { tag: 'electric_car_product_gallery_demo', mediaType: 'video' },
+  { tag: 'electric_car_360_product_gallery_demo', mediaType: 'spin' },
+]
 
-const buttonId = "open-btn";
+const buttonId = 'open-btn'
 </script>
 
 <template>
   <!-- Usage of `CldImage.vue` component -->
-  <CldImage src="cld-sample-5" width="987" height="987" alt="Sample Product" />
+  <CldImage
+    src="cld-sample-5"
+    width="987"
+    height="987"
+    alt="Sample Product"
+  />
   <CldVideoPlayer
     width="1620"
     height="1080"
@@ -36,7 +41,12 @@ const buttonId = "open-btn";
       }
     "
   >
-    <button type="button" @click="open">Upload an Image</button>
+    <button
+      type="button"
+      @click="open"
+    >
+      Upload an Image
+    </button>
   </CldUploadWidget>
   <!-- Usage of `CldUploadButton.vue` component -->
   <CldUploadButton upload-preset="nuxt-cloudinary-unsigned">
@@ -93,7 +103,9 @@ const buttonId = "open-btn";
     ]"
   />
 
-  <button :id="buttonId">Select Image or Video</button>
+  <button :id="buttonId">
+    Select Image or Video
+  </button>
   <CldMediaLibrary
     api-key="12345"
     :button-id="buttonId"

.stackblitz/nuxt.config.ts

@@ -2,6 +2,6 @@
 export default defineNuxtConfig({
   modules: ['@nuxtjs/cloudinary'],
   cloudinary: {
-    cloudName: 'nuxt-cloudinary'
-  }
-});
+    cloudName: 'nuxt-cloudinary',
+  },
+})

docs/app.vue

@@ -1,38 +1,38 @@
 <script setup>
 useServerSeoMeta({
-  ogSiteName: "Nuxt Cloudinary",
-  twitterCard: "summary_large_image",
-});
+  ogSiteName: 'Nuxt Cloudinary',
+  twitterCard: 'summary_large_image',
+})
 useHead({
   htmlAttrs: {
-    lang: "en",
+    lang: 'en',
   },
-});
+})
 const links = [
   {
-    label: "Documentation",
-    to: "/getting-started",
+    label: 'Documentation',
+    to: '/getting-started',
   },
   {
-    label: "Playground",
-    to: "/playground",
+    label: 'Playground',
+    to: '/playground',
   },
   {
-    label: "Releases",
-    to: "https://github.com/nuxt-modules/cloudinary/releases",
-    target: "_blank",
+    label: 'Releases',
+    to: 'https://github.com/nuxt-modules/cloudinary/releases',
+    target: '_blank',
   },
-];
-const { data: files } = useLazyFetch("/api/search.json", {
+]
+const { data: files } = useLazyFetch('/api/search.json', {
   default: () => [],
   server: false,
-});
-const { data: navigation } = await useAsyncData("navigation", () =>
-  fetchContentNavigation()
-);
+})
+const { data: navigation } = await useAsyncData('navigation', () =>
+  fetchContentNavigation(),
+)
 
 // Provide
-provide("navigation", navigation);
+provide('navigation', navigation)
 </script>
 
 <template>
@@ -77,8 +77,14 @@ provide("navigation", navigation);
       />
     </template>
     <!-- Mobile panel -->
-    <template v-if="$route.path !== '/'" #panel>
-      <LazyUDocsSearchButton size="md" class="mb-4 w-full" />
+    <template
+      v-if="$route.path !== '/'"
+      #panel
+    >
+      <LazyUDocsSearchButton
+        size="md"
+        class="mb-4 w-full"
+      />
       <LazyUNavigationTree
         :links="mapContentNavigation(navigation)"
         default-open
@@ -104,8 +110,7 @@ provide("navigation", navigation);
           to="https://github.com/nuxt-modules/Cloudinary"
           target="_blank"
           class="underline"
-          >MIT License</NuxtLink
-        >
+        >MIT License</NuxtLink>
       </span>
     </template>
     <template #right>
@@ -145,6 +150,10 @@ provide("navigation", navigation);
     </template>
   </UFooter>
   <ClientOnly>
-    <LazyUDocsSearch :files="files" :navigation="navigation" :links="links" />
+    <LazyUDocsSearch
+      :files="files"
+      :navigation="navigation"
+      :links="links"
+    />
   </ClientOnly>
 </template>

docs/components/Logo.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <svg
     class="w-auto h-8 text-[#18181B] dark:text-white"
@@ -7,7 +8,12 @@
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <rect y="1" width="42" height="32" fill="url(#pattern0)" />
+    <rect
+      y="1"
+      width="42"
+      height="32"
+      fill="url(#pattern0)"
+    />
     <path
       d="M76.8026 6.63636V27H73.0838L64.2244 14.1832H64.0753V27H59.7699V6.63636H63.5483L72.3381 19.4432H72.517V6.63636H76.8026ZM90.0742 20.4972V11.7273H94.31V27H90.2433V24.2259H90.0842C89.7395 25.1207 89.1661 25.84 88.364 26.3835C87.5685 26.9271 86.5974 27.1989 85.4506 27.1989C84.4298 27.1989 83.5316 26.9669 82.756 26.5028C81.9805 26.0388 81.3739 25.3793 80.9364 24.5241C80.5056 23.669 80.2868 22.6449 80.2802 21.4517V11.7273H84.516V20.696C84.5226 21.5975 84.7646 22.3101 85.2418 22.8338C85.7191 23.3575 86.3588 23.6193 87.1609 23.6193C87.6713 23.6193 88.1486 23.5033 88.5927 23.2713C89.0368 23.0327 89.3948 22.6813 89.6665 22.2173C89.945 21.7533 90.0808 21.1799 90.0742 20.4972ZM101.238 11.7273L104.042 17.0668L106.915 11.7273H111.261L106.836 19.3636L111.38 27H107.055L104.042 21.7202L101.079 27H96.7038L101.238 19.3636L96.8629 11.7273H101.238ZM121.9 11.7273V14.9091H112.702V11.7273H121.9ZM114.79 8.06818H119.026V22.3068C119.026 22.6979 119.086 23.0028 119.205 23.2216C119.325 23.4337 119.49 23.5829 119.702 23.669C119.921 23.7552 120.173 23.7983 120.458 23.7983C120.657 23.7983 120.856 23.7817 121.055 23.7486C121.254 23.7088 121.406 23.679 121.512 23.6591L122.178 26.8111C121.966 26.8774 121.668 26.9536 121.283 27.0398C120.899 27.1326 120.432 27.1889 119.881 27.2088C118.861 27.2486 117.966 27.1127 117.197 26.8011C116.434 26.4896 115.841 26.0057 115.417 25.3494C114.993 24.6932 114.784 23.8646 114.79 22.8636V8.06818Z"
       fill="currentColor"

docs/components/content/ColoredVideoPlayer.vue

@@ -10,8 +10,8 @@
 
 <script setup lang="ts">
 const colors = {
-  accent: "#ff0000",
-  base: "#00ff00",
-  text: "#0000ff",
-};
+  accent: '#ff0000',
+  base: '#00ff00',
+  text: '#0000ff',
+}
 </script>

docs/components/content/MediaLibrary.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
-const buttonId = "open-btn";
-const apiKey = "12345";
+const buttonId = 'open-btn'
+const apiKey = '12345'
 </script>
 
 <template>
   <div>
-    <button :id="buttonId">Select Image or Video</button>
-    <CldMediaLibrary :api-key="apiKey" :button-id="buttonId" />
+    <button :id="buttonId">
+      Select Image or Video
+    </button>
+    <CldMediaLibrary
+      :api-key="apiKey"
+      :button-id="buttonId"
+    />
   </div>
 </template>

docs/components/content/ProductGallery.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 const mediaAssets = [
-  { tag: "electric_car_product_gallery_demo" }, // by default mediaType: "image"
-  { tag: "electric_car_product_gallery_demo", mediaType: "video" },
-  { tag: "electric_car_360_product_gallery_demo", mediaType: "spin" },
-];
+  { tag: 'electric_car_product_gallery_demo' }, // by default mediaType: "image"
+  { tag: 'electric_car_product_gallery_demo', mediaType: 'video' },
+  { tag: 'electric_car_360_product_gallery_demo', mediaType: 'spin' },
+]
 </script>
 
 <template>
-  <CldProductGallery :media-assets="mediaAssets" cloud-name="demo" />
+  <CldProductGallery
+    :media-assets="mediaAssets"
+    cloud-name="demo"
+  />
 </template>

docs/components/content/UploadButton.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { ref } from "vue";
-const resource = ref();
+import { ref } from 'vue'
+
+const resource = ref()
 </script>
 
 <template>

docs/components/content/UploadWidget.vue

@@ -1,6 +1,15 @@
 <template>
-  <CldUploadWidget v-slot="{ open }" uploadPreset="nuxt-cloudinary-unsigned">
-    <button type="button" class="button" @click="open">Upload an Image</button>
+  <CldUploadWidget
+    v-slot="{ open }"
+    upload-preset="nuxt-cloudinary-unsigned"
+  >
+    <button
+      type="button"
+      class="button"
+      @click="open"
+    >
+      Upload an Image
+    </button>
   </CldUploadWidget>
 </template>
 

docs/layouts/default.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-multiple-template-root -->
 <template>
   <slot />
 </template>

docs/nuxt.config.ts

@@ -12,7 +12,7 @@ export default defineNuxtConfig({
   },
 
   cloudinary: {
-    cloudName: 'nuxt-cloudinary'
+    cloudName: 'nuxt-cloudinary',
   },
 
   ui: {