vue-card-stackとVuetifyを使用して綺麗にカードをスワイプさせる
Vue.jsのライブラリ「vue-card-stacke」を使用することで、簡単にスワイプ可能なカードの実装ができます。
そこで、nuxt.jsで「vue-card-stacke」とVue.js向けUIフレームワーク「Vuetify」を使って綺麗に仕上げたいと思います。
Vuetifyの公式ドキュメントはこちらから
完成イメージはこちらです
目次
この記事の対象者
-
Vue.jsに触ったことがある人
-
Nuxt.jsで何か作ってみたい人
-
カードのスワイプ機能を実装したい人
開発環境
-
Mac OS
-
node v １２.６.０
-
npm v ６.１４.４
-
Nuxt.js v ２.１５.０
こちらはNuxt.jsの環境構築時の設定です
$ npx create-nuxt-app test
create-nuxt-app v2.15.0
✨ Generating Nuxt.js project in test
? Project name test
? Project description My kickass Nuxt.js project
? Author name YourName
? Choose programming language JavaScript
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
🎉 Successfully created project test
Vuetifyの導入
以下のコマンドでインストールします.
$ yarn add vue-card-stacke
nuxt.config.jsに追記
buildModules: [
"@nuxtjs/vuetify"
],
ここまでで、Nuxt上で「Vuetify」を使用することができるようになりました。
vue-card-stackeの導入
以下のコマンドでインストールします.
$ yarn add --dev @nuxtjs/vuetify
~/plugins/vue-card-stack.js に記述
import Vue from "vue"
import VueCardStack from "vue-card-stack"
Vue.use(VueCardStack)
nuxt.config.jsに追記
plugins: [
{
src: '@/plugins/plugin',
}
],
実装
pages/index.vueに記述
<template>
<div class="vue-card-stack">
<vue-card-stack
:cards="cards"
:stack-width="350"
:card-width="300"
:max-visible-cards="8"
:scale-multiplier="0.1"
>
<template v-slot:card="{ card }">
<div style="width: 100%; height: 100%">
<v-card max-width="344" class="mx-auto" style="border-style: solid">
<v-img :src="card.imgurl" height="194" />
<v-list-item>
<v-list-item-avatar color="grey">
<v-img :src="card.imgurl" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title class="headline">
{{ card.title }}
</v-list-item-title>
<v-list-item-subtitle>
by {{ card.name }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-card-text>
ここに説明文とか。ここに説明文とか。ここに説明文とか。ここに説明文とか。ここに説明文とか。ここに説明文とか。
</v-card-text>
<v-card-actions>
<v-btn text color="deep-purple accent-4" :href="card.siteurl">
Website
</v-btn>
<v-spacer />
<v-btn icon>
<v-icon>mdi-share-variant</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</div>
</template>
</vue-card-stack>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
cards: [
{
imgurl: "https://cdn.vuetifyjs.com/images/cards/cooking.png",
name: "アイウエオ",
title: "○×△○×△大学",
siteurl: "https://white-t007.com",
},
{
imgurl: "https://cdn.vuetifyjs.com/images/cards/mountain.jpg",
name: "カキクケコ",
title: "○×△○×△保険",
},
{
imgurl: "https://cdn.vuetifyjs.com/images/cards/sunshine.jpg",
name: "サシスセソ",
title: "○×△○×△クラブ",
},
{
imgurl: "https://cdn.vuetifyjs.com/images/cards/docks.jpg",
name: "タチツテト",
title: "○×△○×△店",
},
{
imgurl: "https://cdn.vuetifyjs.com/images/cards/store.jpg",
name: "ナニヌネノ",
title: "○×△○×△屋",
},
{
imgurl: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg",
name: "ハヒフへホ",
title: "○×△○×△社",
},
],
}
},
}
</script>
<style>
.vue-card-stack {
margin-top: 0;
margin-bottom: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
※使用している画像はVuetifyの公式サンプルの画像を利用しています
まとめ
今回はGooglebooksのwebapiアクセスして、「Nuxt」というキーワード検索した状態のデータを表示してみるところまで行いました。
次回は実際に検索ワードをユーザー側が指定して表示できるように作っていきたいと思います。
次回もお楽しみに！ありがとうございました！
