私がいつもNuxt.jsでプロジェクトを作るときの初期設定の手順がだんだん固定化されてきたので、まとめてみました。
pug,sass,fontawesome,googlefontsに加えて、normalize.scssも入った、個人的全部入りです。
自分でも使っていくつもりなので、更新されることもあるかと思います。

環境

Mojave 10.14.3（18D109）
node.js v10.11.0
yarn 1.10.1

手順

1. nuxt.jsでプロジェクト作成

$ yarn create nuxt-app test_nuxt_app

test_nuxt_app の部分には自分のプロジェクトの名前を入れて、適宜読み替えてください。
色々と設定項目出てきますが、とりあえずこんな感じにしておきます。

実はこれでプロジェクト自体は完成です。
コマンド実行したディレクトリに test_nuxt_app という名前のディレクトリがあるので、移動して、サーバを起動させてみます。

$ cd test_nuxt_app
$ yarn dev

起動するとターミナル上ではこんな感じです。
powerlineとかアイコンフォントとか、色々ツッコミどころはありますが、とにかく当初の目的である、 localhost:3000 にブラウザからアクセスしてみましょう。
ちなみに、2019年3月24日現在ではnuxt.jsの最新バージョンは2.5.1のようです。

簡単ですね。

2. git管理

余談です。
ここまでのプロジェクトをgitでリポジトリを作って管理しましょう。
新しくShoutaWATANABE/nuxt_test_appというリポジトリを作りました。
ここにコミット・プッシュします。

$ git add -A
$ git commit -m "[add] yarn devまで"
$ git remote add origin https://github.com/ShoutaWATANABE/nuxt_test_app.git
$ git push -u origin master

これで完了です。

3. 各種パッケージのインストール

さて、本番はこれからです。
以下のコマンドでまとめてパッケージをインストールします。

$ yarn add -D pug@2.0.3 pug-plain-loader node-sass sass-loader @nuxtjs/style-resources
$ yarn add nuxt-webfontloader nuxt-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

インストールが無事に完了したら、 nuxt.config.js を以下のように編集します。
※デフォルトコメントアウトは除外してあります。

nuxt.config.js

import pkg from './package'

export default {
  mode: 'universal',
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  loading: { color: '#fff' },
  css: [{ src: '~/assets/scss/_normalize.scss', lang: 'scss' }], //normalize
  plugins: [{ src: '~/plugins/global-components.js', ssr: true }], //コンポーネントを一括読み込み
  modules: [
    ['nuxt-webfontloader'], //googlefonts
    'nuxt-fontawesome', //fontawesome
    '@nuxtjs/style-resources', //共通スタイルシート読み込み
    '@nuxtjs/axios',
    '@nuxtjs/pwa'
  ],
  webfontloader: { //googlefonts
    google: {
      families: ['Josefin+Sans']
    }
  }, //googlefontsここまで
  fontawesome: { //fontawesome
    imports: [
      {
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['fas']
      },
      {
        set: '@fortawesome/free-brands-svg-icons',
        icons: ['fab']
      }
    ]
  }, //fontawesomeここまで
  axios: {
  },
  build: {
    extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

4. 各種ファイルの作成・編集

インストールしたパッケージが使えるように、それぞれ関係するファイルの作成・編集をします。

pages/index.vue

<template lang="pug">
  section.container
    div
      logo
      h1.title test_nuxt_app
      h2.subtitle My transcendent Nuxt.js project
      .links
        a.button--green(
          href="https://nuxtjs.org/"
          target="_blank"
        ) Documentation
        a.button--grey(
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
        )
          font-awesome-icon(:icon="['fab', 'github']")
          |GitHub
</template>

<style lang="scss" scoped>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Josefin Sans', 'Quicksand', 'Source Sans Pro', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

plugins/global-components.js

import Vue from 'vue'

import Logo from '~/components/Logo.vue'

Vue.component('Logo', Logo)

assets/scss/_normalize.scss

assets/scss/_nomalize.scss

html {
  -webkit-text-size-adjust: 100%;
  overflow: auto;
  height: 100%;
  font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  line-height: 1.8;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

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

サーバを再起動して、ブラウザの画面を確認してみましょう。

タイトルのフォントが変わって、line-heightも広くなっています。
logoのコンポーネントはindex.vueでは読み込みを明記していませんが、しっかりグローバルコンポーネントとして読み込まれています。
また、githubへのリンクにfontawesomeのアイコンフォントを追記したものも、きちんと表示されていますね。

Nuxt.jsで新規プロジェクトのlocalhost:3000にアクセスするまでの手順[pug][sass][fontawesome][googlefonts][normalize]

環境

手順