You can use the Product Gallery widget to display an image gallery in your application.

View Demo: [COLBY DEPLOY THIS ON NETLIFY PLS]

1. To use the ProductGallery widget in a Vue app, first load its script( in index.html preferrably):

<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>

This will add a cloudinary property to the window object which will contain a productWidget method that you can use to initialize the widget.

2. In CldProductGallery.vue, we are finding images containing the tags "vue-product-gallery" and videos containing the tags "vue-product-gallery-vids". Make sure to add these tags to your images and videos in the cloudinary console.

Alternatively, you can change the tag names in CldProductGallery.vue to match what the images and videos are tagged in your cloudinary console. Maybe have a dropdown to show the list of tags and show the dynamic gallery based on selection. Or, you can add params for tags and load multiple libraries of your choice!

• Create an environment variable file .env, and inside it add:

VITE_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"

(Also ensure you have unticked "Resource List" from Restricted media types in Settings > Security)

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

See Vite Configuration Reference.

npm install

npm run dev

npm run build

npm run format

npm run lint