Nuxt.js

vue-card-stackとVuetifyを使用して綺麗にカードをスワイプさせる

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 12.6.0

  • npm  v 6.14.4

  • Nuxt.js  v 2.15.0

こちらは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」というキーワード検索した状態のデータを表示してみるところまで行いました。

次回は実際に検索ワードをユーザー側が指定して表示できるように作っていきたいと思います。

次回もお楽しみに!ありがとうございました!

関連記事

最近の投稿