nuxtプロジェクトの作成セットアップ

何をしたか

nuxtのプロジェクトを立ち上げる時に毎回一々調べてから同じようなことをしているため、自分用のマニュアルとして書きました。

手順

1.　下記にあるsetup_nuxt.shを実行

2.　大体バックエンド側でrailsも立ち上げるため、nuxt.config.tsでportを4000に設定

nuxt.config.ts

server: {
  port: 4000
}

3.　srcディレクトリを作成し、その配下に諸々のディレクトリを移動

4.　nuxt.config.tsに下記を追加

nuxt.config.ts

srcDir: 'src/',

5.　tsconfig.jsonを修正

tsconfig.json

"paths": {
  "~/*": [
-   "./*"
+   "./src/*"
  ],
  "@/*": [
-   "./*"
+   "./src/*"
  ]
},

6.　assets/scss配下に下記2つを追加

_mixins.scss

@mixin large {
  @media screen and (min-width: 600px) { @content; }
}

@mixin small {
  @media screen and (max-width: 599px) { @content; }
}

@mixin inner {
  margin: 0 auto;
  width: 100%;
  padding: 0 16px;

  @include large {
    width: 600px;
  }
}

_colores.scss

$bg-color: #f6f6f4;
$border-gray: #dcdcdc;

7.　nuxt.config.tsで3の2つのファイルを読み込む

nuxt.config.ts

modules: [
  '@nuxtjs/style-resources'
],
︙
styleResources: {
  scss: [
    '~/assets/scss/_mixins.scss',
    '~/assets/scss/_colores.scss'
  ]
}

8.　Header.vueを追加

Header.vue

<template lang="pug">
  header.header
    .header__inner
      p ヘッダー
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

@Component
export default class Header extends Vue {}
</script>

<style scoped lang="scss">
.header {
  height: 56px;
  border-bottom: 1px solid $border-gray;
  box-shadow: 0 0 2px $border-gray;

  &__inner {
    @include inner;

    height: 100%;
    display: flex;
    align-items: center;
  }
}
</style>

9.　Footer.vueを追加

Footer.vue

<template lang="pug">
  footer.footer
    .footer__inner
      p.footer__copyright © 2021 フッター
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

@Component
export default class Footer extends Vue {}
</script>

<style lang="scss" scoped>
.footer {
  height: 56px;
  border-top: 1px solid #dddddd;
  box-shadow: 0 0 2px #ddd;

  &__inner {
    @include inner;

    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  &__copyright {
    margin: 0;
  }
}
</style>

10.　layout/default.vueを修正

default.vue

<template lang="pug">
  div
    Header
    #wrapper
      .container
        Nuxt
    Footer
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import Header from '@/components/header/Header.vue'
import Footer from '@/components/footer/Footer.vue'

@Component({
  components: {
    Header,
    Footer
  }
})
export default class DefaultLayout extends Vue {}
</script>

<style lang="scss">
html {
  font-family:
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

p {
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

# wrapper {
  background-color: $bg-color;
}

.container {
  @include inner;

  padding-top: 64px;
  padding-bottom: 64px;
  background-color: #ffffff;
}

# wrapper,
.container {
  min-height: calc(100vh - 56px * 2);
}
</style>