Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue3-loader-image
Advanced tools
vue3-loader-image - npm Package Compare versions
Comparing version 1.1.0 to 1.1.1
| { | ||
| "name": "vue3-loader-image", | ||
| "version": "1.1.0", | ||
| "version": "1.1.1", | ||
| "description": "Vue3 package for showing loader while image loading, with default skeleton", | ||
@@ -5,0 +5,0 @@ "type": "module", |
| # Vue 3 Image Loader | ||
| Vue 3 package for showing a loader while an image loading. | ||
| Vue 3 package for showing a loader while an image loading with default using skeleton loader, see video below for demo. | ||
| ## Recommended IDE Setup | ||
| https://github.com/ichsanputr/vue3-image-loader/assets/69036480/4296e70b-8780-41da-9d52-4ed765bfaef6 | ||
| - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). | ||
| ## Usage | ||
| ## Type Support For `.vue` Imports in TS | ||
| ### Installation | ||
| 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)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. | ||
| ```bash | ||
| npm install vue-loader-image | ||
| ``` | ||
| If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: | ||
| ### Importing | ||
| 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. | ||
| This package support either composition and options api with typescript used. | ||
| ```vue | ||
| <script lang="ts"> | ||
| import VueLoaderImage from 'vue3-loader-image'; | ||
| import 'vue3-loader-image/dist/style.css' | ||
| </script> | ||
| ``` | ||
| Or use option api. | ||
| ```vue | ||
| <script lang="ts"> | ||
| import { defineComponent } from 'vue' | ||
| export default defineComponent({ | ||
| components: { | ||
| VueLoaderImage | ||
| } | ||
| }) | ||
| </script> | ||
| ``` | ||
| ### Example | ||
| We can use delay props to increase the time the image will be displayed, because sometimes the loader doesn't come out because the internet speed is good during the loading process. | ||
| ```vue | ||
| <VueLoaderImage delay="4000" src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?q=80&w=1973" width="300px" height="300px"></VueLoaderImage> | ||
| ``` | ||
| That's will be show image after image loaded plus 4 second. | ||
| Beside skeleton loader you also can use custom css loader like using slot like this. | ||
| ```vue | ||
| <VueLoaderImage delay="4000" src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?q=80&w=1973" width="300px" height="300px"> | ||
| <div class="loader"/> | ||
| </VueLoaderImage> | ||
| ``` | ||
| See more css loader on [https://css-loaders.com/](https://css-loaders.com/). | ||
| ## Props | ||
| | Attribute | Type | Is Required | Description | | ||
| |:-------------|:--------:|:--------------:|:------------------------------------------------------------------------------| | ||
| | src | String | true | Image source url which will be displayed | | ||
| | width | String | true | Width of image, accpeting all unit measured (1px, 1rem, 1%, etc) | | ||
| | height | String | true | Same like width | | ||
| | delay | String | no | Image will be show after loaded plus delay value | | ||
| | circle | Boolean | no | Border radius 100% | | ||
| | pill | String | no | Border radius custom value | ||
| | alt | String | no | -- | ||
| | crossorigin | String | no | -- | ||
| | loading | String, eager or lazy | no | -- | ||
| | longdesc | String | no | -- | ||
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by13.93%
10507
- Number of lines in readme file
- increased by284.21%
73
No dependency changes