Setup
Precondition
Install @awesome-image/image More
Vue/Nuxt
Install @awesome-image/transition
yarn add @awesome-image/transition
yarn add @awesome-image/transition
yarn add @nuxtjs/composition-api
Usage
Global
main.js
import AsTransition from '@awesome-image/transition'
import '@awesome-image/transition/dist/style.css'
Vue.use(AsTransition)
main.js
import AsTransition from '@awesome-image/transition'
import '@awesome-image/transition/dist/style.css'
createApp().use(AsTransition)
./plugins/as-image-transition.js
// add ./plugins/as-image-transition.js
import AsTransition from '@awesome-image/transition'
import '@awesome-image/transition/dist/style.css'
Vue.use(AsTransition)
nuxt.config.js
// add plugin path to nuxt.config.js
{
plugins: [
'~~/plugins/as-image-transition.js'
]
}
Local
<script>
import AsImage from '@awesome-image/image'
import '@awesome-image/image/dist/style.css'
import AsTransition from '@awesome-image/transition'
import '@awesome-image/transition/dist/style.css'
export default {
components: {
AsImage,
AsTransition
}
}
</script>
<template>
<AsTransition>
<template
#images="{
toGroupWithIndex
}"
>
<AsImage
class="demoimage"
:width="999"
:height="1424"
:src="'//d3skwsdk169y0b.cloudfront.net/image/fake3d/mount.jpg'"
:to-group="toGroupWithIndex(0)"
>
</AsImage>
<AsImage
class="demoimage"
:width="999"
:height="1424"
:src="'//d3skwsdk169y0b.cloudfront.net/image/fake3d/canyon.jpg'"
:to-group="toGroupWithIndex(1)"
>
</AsImage>
</template>
</AsTransition>
</template>
Browser
Add @awesome-image/image
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/composition-api/dist/vue-composition-api.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.12.1/lib/index.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/image/dist/vue2/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/transition/dist/vue2/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-demi@0.12.4/lib/index.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/image/dist/vue3/index.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@awesome-image/transition/dist/vue3/index.umd.js"></script>
Add css
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@awesome-image/image/dist/style.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@awesome-image/transition/dist/style.css"
/>
Usage
Loading CodeSandbox...