Nuxt.jsで簡単のサイトを作ってみた

Nuxt.jsで簡単のサイトを作ってみた。

Vue.jsとNuxt.jsを学習しているので、簡単なサイトを作って見ました。

npx create-nuxt-app <title>

上記のコマンドでプロジェクトを作成します。

pagesディレクトリには、各ページのvueファイルを作成します。

今回は上記のように作成しました。
Nuxt.jsでは、Vue Routerのルーティングを自動で設定してくれます。pagesディレクトリにvueファイルを作るだけで、各ページを作ることが可能です。

componentsディレクトリには各ページで共通化したい部分を作成します。

今回はヘッダーとフッターを共通化したいので作成しました。

header.vue

<template>
  <header class="header">
    <div class="container">
      <h1>DEAL CAFE</h1>
      <nav>
        <ul class="gnav">
          <li><router-link to="/" active-class="active-list" exact>HOME</router-link></li>
          <li><router-link to="/drink" active-class="active-list" exact>DRINK</router-link></li>
          <li><router-link to="/info" active-class="active-list" exact>INFO</router-link></li>
          <li><router-link to="/contact" active-class="active-list" exact>CONTACT</router-link></li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<style lang="sass" scoped>
    .header
          padding: 20px 0
          box-shadow: 0 0 1px 1px #333
          margin-bottom: 10px
          .container 
                    display: flex
                    justify-content: space-between
                    align-items: baseline
                    .gnav
                        display: flex
                        li
                          margin-left: 10px
                          a
                           &:hover
                                  border-bottom: 2px solid
    .active-list
               border-bottom: 2px solid
</style>

footer.vue

<template>
  <div class="footer">
    <div class="container">
      <p><small>DEAL CAFE</small></p>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.footer
      color: #fff
      text-align: center
      background: #333
      padding: 30px
      margin-top: 300px
</style>

共通化したcomponentはdefault.vueファイルで読み込みした。

default.vue

<template>
  <div>
    <header-section />
    <nuxt />
    <footer-section />
  </div>
</template>

<script>
import header from '~/components/header.vue'
import footer from '~/components/footer.vue'
export default {
  components: {
    headerSection: header,
    footerSection: footer
  }
}
</script>

scriptのcomponentsはキャメルケースで書いて、templateの中はケバブケースでもokです。

最後にビルドして終了です。

$ npm run build

簡単ではありますが、SPAサイトの完成です。
今後はもっと複雑なものも作成していきたいです。一応GitHub Pagesにデプロイしているので、良かったご覧ください。
https://to-ko5.github.io/vueDemoHp/

※GitHub Pagesにデプロイする時は、nuxt.config.jsファイルにrouter baseを追記する必要があります。

nuxt.config.js

export default {
  router: {
    base: '/<repository-name>/'
  }
}