Nuxt.jsとvue-magic-gridというライブラリを使ってフォトギャラリーっぽいものを作ってみます。

環境


下記の環境で試してます。

  • nuxt: 2.8.1
  • @nuxtjs/axios: 5.5.4
  • vue-magic-grid: 0.0.4

出来上がり


出来上がりは下記のようなものを目指します。実際に動くものはここにあります

インストール


今回は@nuxtjs/axiosvue-magic-gridをつかうのでそれらをインストールします。ただし、データを分離せずにビューに直接記述するのであれば@nuxtjs/axiosは不要です。

1
$ npm install vue-magic-grid @nuxtjs/axios

axiosの設定


@nuxtjs/axiosの使い方は基本的に公式ドキュメントのとおりで、後は一つ前の記事で書いた通りに開発と本番で取得先のURLが変わるように設定します。

Pluginsで呼び出す


Nuxt.jsでVueのプラグインを使うにはpluginsディレクトリで対象となるプラグインをVue.useすればよいです。なので、magic-grid.jsというファイルを作って下記のようなコードを書きます。

1
2
3
4
import Vue from "vue";
import MagicGrid from "vue-magic-grid";

Vue.use(MagicGrid);

これをnuxt.config.jsで指定します。

1
2
3
4
5
6
7
export default {
...
plugins: [
"~/plugins/magic-grid"
],
...
}

コンポーネントを作る


次に写真付きカード表示用するコンポーネントを作ります。下記のようなコードを書いてcomponents/Card.vueとかそんな感じの名前で保存します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
<div class="card large">
<div class="card-image">
<figure class="image">
<img v-bind:src="image" alt="Image" />
</figure>
</div>
<div class="card-content content">
<h6>{{ title }}</h6>
<p>{{ body }}</p>
</div>
</div>
</template>

<script>
export default {
name: "card",
props: {
image: {
type: String,
default: ""
},
title: {
type: String,
default: ""
},
body: {
type: String,
default: ""
}
}
};
</script>

データを準備する


次にカードに表示するデータのjsonを用意します。これをstatic/dataの下らへんにimages.jsonとかなんかそんな感じで保存します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[
{
"image": "https://example.com/images/1.jpg",
"title": "Test One",
"body": "Description One"
},
{
"image": "https://example.com/images/2.jpg",
"title": "Test Two",
"body": "Description Two"
},
{
"image": "https://example.com/images/3.jpg",
"title": "Test Three",
"body": "Description Three"
},
...
]

カードを表示するページを作成する


最後にカードを表示するページを作成します。pages以下に適当にページ用のファイルを作成し、asyncDataで先に作成したjsonからデータを取得します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
<div>
<magic-grid>
<card
v-for="(x, i) in data"
:key="i"
:image="x.image"
:title="x.title"
:body="x.body" />
</magic-grid>
</div>
</template>

<script>
import card from "../components/Card.vue";

export default {
name: "grid",
components: {
card
},
async asyncData({ $axios }) {
const imagesData = await $axios.$get(`/data/images.json`);
return { data: imagesData };
}
};
</script>

表示順をランダムにしたい


ということもあります。自前でシャフルしましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default {
name: "grid",
components: {
card
},
async asyncData({ $axios }) {
let imagesData = await $axios.$get(`/data/images.json`);
for (let i = imagesData.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
let tmp = imagesData[i];
imagesData[i] = imagesData[j];
imagesData[j] = tmp;
}
return { data: imagesData };
}
};

これでページを表示するたびに異なる順序でカードが表示されるようになります。

その他


後はほかのライブラリと組み合わせてクリックすると全画面表示とかできるようにしたいと思ってます。できたらそのうち続きを書くかもしれません。

おわり。