vue-unsplash
v3.1.0
Published
A simple Unsplash API plugin for Vue.js
Downloads
2
Maintainers
Readme
vue-unsplash
A simple Unsplash API plugin for Vue.js
Installation
npm install vue-unsplash --save
How to use
Default use in your main.js Vue project
import Unsplash from 'vue-unsplash'
...
// Access Key is mandatory to use Unsplash API
createApp(App)
.use(Unsplash, { accessKey: <string> })
...
Setup Composition API
You can now use the instance methods this.$unsplash
in your Vue template script.
In Vue 3.x, as an example to use in the setup composition API:
import { getCurrentInstance, onMounted } from 'vue'
...
export default {
name: 'MyComponent',
setup(props, context) {
const instance = getCurrentInstance()
const globalProperties = instance.appContext.config.globalProperties
onMounted(async () => {
var image = await globalProperties.$unsplash.getPhoto('l3N9Q27zULw')
var urls = image.urls || []
var links = image.links || []
var user = image.user || {}
...
})
}
}
...
List photos
Returns a Promise
var page = 1
var perPage = 10
var orderBy = 'popular'
this.$unsplash.getPhotos(page, perPage, orderBy)
.then(results => {
...
})
For more information, please refer to API.
Get a photo
Returns a Promise
this.$unsplash.getPhoto('l3N9Q27zULw')
.then(image => {
var urls = image.urls || []
var links = image.links || []
var user = image.user || {}
...
})
The result is cached to improve performance. For more information, please refer to API.
Get a random photo
Returns a Promise
var count = 1
var orientation = 'portrait'
this.$unsplash.random(count, orientation)
.then(response => {
...
})
For more information, please refer to API.
Get a collection’s photos
Returns a Promise
this.$unsplash.getCollection('LBI7cgq3pbM')
.then(results => {
...
})
The results are cached to improve performance. For more information, please refer to API.
Get a random photo from collection
Retrieve a random photo from a fetched collection
this.$unsplash.getCollection('LBI7cgq3pbM')
.then(results => {
var image = this.$unsplash.randomFrom(results)
var urls = image.urls || []
var links = image.links || []
var user = image.user || {}
...
})
For more information, please refer to API.