【Nuxt.js編】Nuxt.js + Contentful + NetlifyでSPAブログを自作する

はじめに

Nuxt.jsとContentfulとNetlifyでモダンな（？）SPAブログを作りました。こちら
何回かにわけて構築の記録を残しているシリーズの第２回です。
今回は簡単にSPAサイトが作れるフレームワーク、Nuxt.jsについて書いていきます。

【シリーズの予定】
- まえがき編
- Nuxt.js編 ← この記事
- Contentful編
- Netlify編

前提となる知識

Vue.jsの基本を知っていることを前提としています。
まだやったことが無い方は公式チュートリアルをやってみましょう。

インストール

まずは公式サイトに従って、インストールしていきましょう。
スクラッチからもできそうですが、スターターテンプレートでラクします。
公式サイトはnpmなのでyarnでやってみます。（yarn派なので）

$ yarn add -g vue-cli
$ vue init nuxt-community/starter-template nuxt_blog
 ? Project name nuxt_blog
 ? Project description <てきとうに>
 ? Author <あなたの名前>
$ cd nuxt_blog
$ yarn install

開発環境の起動は

$ yarn run dev

です。
http://localhost:3000にアクセスして、以下のようにロゴとタイトルが表示されれば成功です。

テンプレートをつくる

ではテンプレートページをいじって、ブログ風にしてみましょう。
ここでは標準のHTML, CSSで書きますが、プリプロセッサを使いたい方はお好みで。(個人的にはpug＋sylusがラクで好きです。)
こんな感じ。

leyouts/default.vue

<template>
  <div>
    <header>
      <h1 class="title">いい感じのSPAブログ</h1>
    </header>
    <main class="container">
      <nuxt/>
    </main>
  </div>
</template>

<style>
html {
  font-family: "Source Sans Pro", 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, sans-serif;
  font-size: 16px;
}
h1, h2, h3 {
  font-weight: normal;
}
.title {
  color: #35495e;
  margin: 100px 0 30px;
  text-align: center;
}
.container {
  width: 80%;
  margin: 0 auto;
}
</style>

pages/index.vue

<template>
  <section class="index">
    <card v-for="i in 5" v-bind:key="i"/>
  </section>
</template>

<script>
import Card from '~/components/card.vue'

export default {
  components: {
    Card
  }
}
</script>

<style scoped>
.index {
  display: flex;
  flex-wrap: wrap;
}
</style>

pages/blog/_slug.vue

<template>
  <section class="slug">
    <h1 class="slug_title">
      タイトル
    </h1>
    <p class="slug_date">2018/8/2</p>
    <div>
      記事の内容。あああああああああああああああああああああああああああああああああああああああ
    </div>
  </section>
</template>

<style scoped>
.slug {
  max-width: 800px;
  margin: 0 auto;
}
.slug_title {
  font-size: 2.0rem;
  font-weight: bolder;
}
.slug_date {
  font-size: 1.0rem;
  color: rgb(57, 72, 85);
  text-align: right;
}
</style>

components/card.vue

<template>
  <article class="card">
    <nuxt-link :to="{ name: 'blog-slug'}" class="wrapper">
      <h1 class="card_title">記事１</h1>
      <p class="card_text">記事の内容。ああああああああああああああああああ</p>
      <p class="card_date">2018/8/2</p>
    </nuxt-link>
  </article>
</template>

<style scoped>
.card {
  width: 300px;
  height: 200px;
  box-shadow: 1px 2px 3px 1px rgba(0,0,0,0.2);
  border: 0.5px solid rgb(57, 72, 85);
  padding: 10px 20px;
  margin: 10px 10px;
}
.wrapper {
  text-decoration: none;
}
.card_title {
  font-size: 1.2rem;
}
.card_text {
  color: rgb(57, 72, 85);
  margin: 10px 0;
}
.card_date {
  font-size: 0.7rem;
  color: rgb(57, 72, 85);
  text-align: right;
}
</style>

なんとなくブログの記事一覧っぽいのができたかと思います。

Markdownを読み込む

記事はMarkdownで書けると便利なので、vue-markdownを入れます。

$ yarn add vue-markdown

vue-markdownをブログに反映する

pages/blog/_slug.vue

      <p class="slug_date">2018/8/2</p>
-     <div>
-       記事の内容。あああああああああああああああああああああああああああああああああああああああ
-     </div>
+     <vue-markdown>
+ # 記事の内容
+ - あいうえお
+   - あ
+   - い
+   - う
+   - え
+   - お
+ - かきくけこ
+ 本文本文本文本文本文本文本文本文本文
+     </vue-markdown>
    </section>
  </template>
+
+ <script>
+ import VueMarkdown from 'vue-markdown'
+ export default {
+   transition: 'slide-left',
+   components: {
+     VueMarkdown
+   }
+ }
+ </script>

無駄にアニメーションをつける

さすがに地味すぎるかなと思ったので‥

leyouts/default.vue

  .container {
    width: 80%;
    margin: 0 auto;
  }
+ .slide-left-enter {
+   transform: translateX(2000px);
+   opacity: 0;
+ }
+ .slide-left-enter-active {
+   transition: all .3s linear;
+ }
+ .slide-left-leave-to {
+   transform: translateX(-2000px);
+   opacity: 0;
+ }
+ .slide-left-leave-active {
+   transition: all .3s linear;
+ }
  </style>

pages/index.vue

  import Card from '~/components/card.vue'
  export default {
+   transition: 'slide-left',
    components: {

pages/blog/_slug.vue

  import VueMarkdown from 'vue-markdown'
  export default {
+   transition: 'slide-left',
    components: {

途中経過

画面がこんな感じになっていれば成功です！

• 記事一覧
  

• 記事内容
  

終わりに

本日はNuxt.jsで簡単にSPAブログのテンプレートを作ってみました！
ですが、記事の内容が全部同じですね。。
次回はcontentfulと連携して、記事の内容を読み込めるようにしましょう！

ではではー。