Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at how the best packages for adding pagination buttons, async computed properties, and carousels.
vue-async-computed
Vue components can’t have computed properties that are async.
However, with the addition of the vue-async-computed package, we can.
To install it, we run:
npm i vue-async-computed
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import AsyncComputed from "vue-async-computed";
Vue.use(AsyncComputed);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
`<template>
<div>
<div>{{product}}</div>
</div>
</template>
<script>
export default {
data() {
return {
x: 2,
y: 3
};
},
asyncComputed: {
product() {
return new Promise(resolve =>
setTimeout(() => resolve(this.x * this.y), 1000)
);
}
}
};
</script>
We registered the plugin that came with the package,.
Then in our component, we return a promise that resolves to values derived from other states.
In our example, we just take the product of them and set that as the resolved value of the promise. We can set which properties to watch explicitly.
To do that, we write:
<template>
<div>
<div>{{product}}</div>
</div>
</template>
<script>
export default {
data() {
return {
x: 2,
y: 3
};
},
asyncComputed: {
product: {
get() {
return new Promise(resolve =>
setTimeout(() => resolve(this.x * this.y), 1000)
);
},
watch: ["y"]
}
}
};
</script>
Then this,y ‘s value is watched and its new value recomputed if it changed.
vue-flicking
The vue-flicking library lets us add a carousel to our Vue app easily.
To use it, first we install it by running:
npm i @egjs/vue-flicking
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueFlicking from "@egjs/vue-flicking";
Vue.use(VueFlicking);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div>
<flicking
:options="{ gap: 10, moveType: 'freeScroll' }"
:tag="'div'"
:viewportTag="'div'"
@need-panel="e => {}"
@move-end="e => {}"
>
<div v-for="n in 10" :key="n">slide {{n}}</div>
</flicking>
</div>
</template>
<script>
import { Flicking } from "@egjs/vue-flicking";
export default {
components: {
Flicking: Flicking
}
};
</script>
We set the gap between slides in pixels.
moveType is how the slides move.
tag is the tag to render for the slider.
viewportTag is the tag for the viewport.
We can also add plugins that are separate from the package.
To do that, we write:
<template>
<div>
<flicking
:options="{ gap: 10, moveType: 'freeScroll' }"
:tag="'div'"
:viewportTag="'div'"
:plugins="plugins"
@need-panel="e => {}"
@move-end="e => {}"
>
<div v-for="n in 10" :key="n">slide {{n}}</div>
</flicking>
</div>
</template>
<script>
import { Flicking } from "@egjs/vue-flicking";
import { Fade, AutoPlay } from "@egjs/flicking-plugins";
export default {
components: {
Flicking: Flicking
},
data() {
return {
plugins: [new Fade(), new AutoPlay(2000, "NEXT")]
};
}
};
</script>
We installed the plugin package with:
npm i @egjs/flicking-plugins
Then we added the Fade and AutoPlay plugins to add a fade effect and autoplay respectively.
2000 is the number of milliseconds before we move to the next slide.
vue-cookie-accept-decline
The vue-cookie-accept-decline package lets us add a banner for displaying a cookies message that’s seen frequently on websites.
To install it, we run:
npm i vue-cookie-accept-decline
Then we add the CSS to index.html between the head tags:
<link
rel="stylesheet"
type="text/css"
href="https://unpkg.com/vue-cookie-accept-decline@5.2.3/dist/vue-cookie-accept-decline.css"
/>
Then we register the component by writing:
import Vue from "vue";
import App from "./App.vue";
import VueCookieAcceptDecline from "vue-cookie-accept-decline";
Vue.component("vue-cookie-accept-decline", VueCookieAcceptDecline);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
in main.js
Next, we use it by writing:
<template>
<div>
<vue-cookie-accept-decline
:ref="'myPanel1'"
:elementId="'myPanel1'"
:debug="false"
:position="'bottom-left'"
:type="'floating'"
:disableDecline="false"
:transitionName="'slideFromBottom'"
:showPostponeButton="false"
@status="cookieStatus"
@clicked-accept="cookieClickedAccept"
@clicked-decline="cookieClickedDecline"
>
<div slot="postponeContent">×</div>
<div slot="message">
We use cookies.
<a href="https://example.com/" target="_blank">Learn More...</a>
</div>
<div slot="declineContent">OPT OUT</div>
<div slot="acceptContent">GOT IT!</div>
</vue-cookie-accept-decline>
</div>
</template>
<script>
export default {
methods: {
cookieStatus() {},
cookieClickedAccept() {},
cookieClickedDecline() {}
}
};
</script>
The setting of the button will be stored in local stored in local storage so it won’t show up again.
We’ll see the message in the message slot displayed.
The acceptContent slot has the accept button.
The declineContent slot has the decline button.
There are also events emitting for each button clicked.
clicked-accept is emitted when the accept button is clicked.
clicked-decline is emitted when the decline button is clicked.
status is emitted when the status is changed.
Conclusion
The vue-async-computed package us add async computed properties.
vue-cookie-accept-decline lets us add an accept cookie message.
vue-flicking lets us add a slideshow.
