ブログ構築 0. 更新情報 #02
2020年07月27日に更新

Nuxt.js v2.13.0新機能メモの公開とv2.12.2にダウングレードする方法

2020年7月27日追記: Nuxt.js v2.13の解説記事を書きましたのでこちらをご覧ください。

【Nuxt.js2.13超解説】バージョンアップ手順と6つの新機能+2つの変更点

ご注意ください

ブログ構築カテゴリーで構築するブログは、Nuxt.jsのバージョン2.13.0以上に対応しておりません。

本チュートリアルを実装するには「Nuxt.js v2.13.0未満」で実行してください。

まだまとまっていませんが、Nuxt.jsバージョン2.13.+のnuxt.config.js書き方メモを取り急ぎ公開します。記事下部、Nuxt.js v2.13.+の新機能メモをご覧ください。

Nuxt.js v2.13.0未満にダウングレードする方法

推奨されているアプリ作成コマンドは、自動的に最新のNuxt.jsがインストールされます。

$ yarn create nuxt-app <プロジェクト名>

そこで一度最新のNuxt.jsをインストールした後で、ダウングレードする方法を紹介します。

1. 作成コマンドを実行

$ yarn create nuxt-app <プロジェクト名>


? Project name: myblog_nuxt_v2122
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selectio
n)

新しく質問が追加されました。

? Deployment target: Static (Static/JAMStack hosting)

serverもしくはstaticを選択します。

ここはダウングレード時に削除しますのでどちらを選択しても構いません。

2. package.jsonの書き換え

作成されたpackage.jsonnuxtのバージョンを書き換えます。

package.json
...
"dependencies": {
  "@nuxtjs/axios": "^5.11.0",
  // "nuxt": "^2.13.0" 削除
  "nuxt": "<2.13.0" // 追加
},
  • <2.13.0 … 2.13.0未満のバージョンを指定しています。

3. yarn.lockファイルの削除

ルートディレクトリにあるyarn.lockファイルを削除します。

$ rm yarn.lock

4. node_modulesディレクトリの削除

モジュールが入った「node_mobules」ディレクトリを削除します。

$ rm -r node_modules

5. モジュールを再インストール

それではモジュールの再インストールコマンドを実行します。

$ yarn install

6. 確認しておきましょう

Nuxt.jsのバージョンを確認しておきましょう。

$ yarn list nuxt
...
└─ nuxt@2.12.2
  • nuxt@2.12.2 … v2.13.0未満で一番最新のバージョンです。

以上でダウングレードが完了です。

参考 アップグレード - Nuxt.js

nuxt.config.jsの編集

続いてNuxt.js v2.13.+から追加されたkeyを削除します。

nuxt.config.js
export default {
  ...
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  // target: 'static', 12行目付近 削除
	...
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  // components: true, 43行目付近 削除
	...
}

targetcomponentsの2つのkeyを削除しました。

package.jsonにgenerateスクリプトを追加

Nuxt.js v2.13.+から3つのスクリプトが追加されました。

  1. nuxt starttarget: serverモードのスクリプト。

    本番用サーバを起動する。

  2. nuxt exporttarget: staticモードのスクリプト。

    「dist」ディレクトリに静的HTMLを生成する。(事前レンダリング)

  3. nuxt servetarget: staticモードのスクリプト。

    本番用サーバを起動する。

逆にnuxt genereteスクリプトが非推奨となりました。(v2.13.0未満では非推奨ではありません)

そのためpackage.jsonにはnuxt genereteスクリプトの記載がありません。

そこで追加された3つのスクリプトを削除して、generateを追加しましょう。

package.json
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  // "start": "nuxt start",    // 削除
  // "export": "nuxt export",  // 削除
  // "serve": "nuxt serve",    // 削除
  "generate": "nuxt generate", // 追加
  "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lint": "yarn lint:js"
},

generateスクリプトが正常に動作するか確認しておきましょう。

$ yarn generate

# OK
...
ℹ Generating pages
✔ Generated /

参考 Going Full Static - Nuxt.js

index.vueにimportを追加する

Nuxt.js v2.13.+からはcomponents: trueとすることで、コンポーネントファイルの自動読み込みが可能になりました。

もう忌々しいimport文からは解放されるのですね。非常に魅力的です。

nuxt.config.js
components: true

そのため、index.vueには「Logo.vue」のインポート分がありません。

scriptタグに以下を追加しましょう。

pages/index.vue
...
<script>
import Logo from '~/components/Logo'

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

これにてダウングレード作業終了です。

まとめ

Nuxt.jsのバージョン2.12.2へのダウングレードまとめ

  1. package.jsonの書き換え => "nuxt": "<2.13.0"
  2. yarn.lock、モジュールディレクトリを削除して全てを再インストール => $ yarn install
  3. nuxt.config.jsの2つのkeyを削除する => target & components
  4. package.jsonにgenerateスクリプトを追加 => "generate": "nuxt generate"
  5. 2.13.0未満で使用しない3つのスクリプトを削除する => start & export &serve
  6. index.vueにimport分を追加 => import Logo from '~/components/Logo'

以上の変更で http://localhost:3000/ に、Nuxt.jsのスタートページがエラーなく表示することができます。

(本編終わり。)

Nuxt.js v2.13.+の新機能メモ

ゆくゆくはこのブログ自体もバージョン2.13に対応する予定です。

その際は新たなチュートリアルも公開できればと思っています。(今は到底着手できません😫ごめんなさい。)

そこで現時点で得たNuxt.jsバージョン2.13.+の情報をnuxt.config.jsにまとめました。

ご参考までに。

nuxt.config.js
import colors from 'vuetify/es5/util/colors'
// 削除 $ yarn remove @nuxtjs/dotenv
// require('dotenv').config() // 追記

export default {
  /*
   ** Nuxt rendering mode
   ** See https://nuxtjs.org/api/configuration-mode
   */
  mode: 'universal',
  /*
   ** Nuxt target
   ** See https://nuxtjs.org/api/configuration-target
   */
  // v2.13.+の新機能('server' | 'static')デフォルト'server'

  // 'server':サーバー側レンダリング用
  // ogp対応可能
  // package.jsonに「"generate": "nuxt generate"」を追加(nuxt generate は非推奨とされています (しかし、今は何の変更もなく動作しています) => 対策の情報なし。現状これで行くしかない?)
  // Netlify $ yarn build && yarn generateの実行
  // NetlifyのPublish Directry 「dist」
  // Nuxtの起動($ nuxt start)はNetlifyが行ってくれるのでコマンドの必要なし
  // 動的ルーティング(generate)の追加必要なし(Nuxt.内部クローラーが行ってくれる)
  // nuxt.config.js に export key を追加しました。これは現在 generate のエイリアスですが、Nuxt 3 ではこれを引き継ぐ予定です。
  // $ nuxt start => ローカルで本番環境を起動したい場合

  // 'static':静的サイトの場合
  // ogp対応可能
  // Netlify $ yarn build && yarn export を実行。
  // NetlifyのPublish Directry 「dist」
  // dist/ディレクトリに静的ファイルが出力される。(超早い!SPAはこれすべき)
  // 動的ルーティングもdistディレクトリに吐き出されるのでリロードしても参照できるようになった。よって本番環境に動的ルーティングの追加は必要なし。

  // $ nuxt serve => 開発環境でstaticモードの本番環境サーバーが立ち上がる

  // 総括
  // どちらのモードにしろ、generateによる動的ルーティングの追加の必要なし
  // リロードすればページが無い問題は解消された
  // どちらもOGPに対応可能。ブログ構築はstaticモードで良いのでは?(かなり早い)
  // あとはクローラーの対応でモードを判断すべきか。そこは確認できず。

  // 詳細: https://nuxtjs.org/blog/going-full-static
  target: 'static',
  /*
   ** Headers of the page
   ** See https://nuxtjs.org/api/configuration-head
   */
  head: {
    title: process.env.BASE_NAME,
    titleTemplate: `%s - ${process.env.BASE_NAME}`,
    htmlAttrs: {
      lang: 'ja'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.BASE_DESC },
      { hid: 'og:site_name', property: 'og:site_name', content: process.env.BASE_NAME },
      { hid: 'og:type', property: 'og:type', content: 'article' },
      { hid: 'og:url', property: 'og:url', content: process.env.BASE_URL },
      { hid: 'og:title', property: 'og:title', content: process.env.BASE_NAME },
      { hid: 'og:description', property: 'og:description', content: process.env.BASE_DESC },
      { hid: 'og:image', property: 'og:image', content: `${process.env.BASE_URL}/defaultEyeCatch.png` },
      { name: 'twitter:card', content: 'summary_large_image' },
      { name: 'twitter:site', content: `@${process.env.TWITTER_ACCOUNT}` },
      { property: 'fb:app_id', content: process.env.FB_APP_ID }
    ],
    link: [
      { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon.ico' },
      { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon.ico' }
    ]
  },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */
  plugins: [
    'plugins/vuetify',
    'plugins/contentful'
  ],
  /*
   ** Auto import components
   ** See https://nuxtjs.org/api/configuration-components
   */
  // v2.13.+の新機能)コンポーネントの自動読み込み
  // true => componentsディレクトリいかが自動で読み込まれるので、手動importの必要なし
  // 子ディレクトリ内にあるコンポーネントはファイル名で認識する。そのためファイル名はディレクトリ名をつけること。
  // 「NG => components/foo/bar.vue」,「OK => components/foo/fooBar.vue」
  // ファイル名の開始は大文字でも小文字でもOK.
  // file「DraftChip」の場合、OK => <DraftChip /> OR <draft-chip />
  // file「draftChip」の場合、
  // <span is="draftChip" />は読み込めるが、
  // メソッドで返す文字列の場合 NG => <draftChip /> OK => <draft-chip />
  // もしファイル名をそのまま使用したい場合、prefixオプションを付ける
  // components: [
  //   '~/components/',
  //   { path: '~/components/foo/', prefix: 'foo' }
  // ]
  // 詳細: https://github.com/nuxt/components
  components: true,
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/eslint-module'
    // 削除
    // '@nuxtjs/dotenv' // 追記
  ],

  // V2.13.+新機能 ランタイム構成
  // dotenvがなくても.envファイルを読み込めるようになった
  // 詳細: https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config#migrating-to-the-nuxtjs-runtime-config-from-nuxtjsdotenv
  // フロントエンドで使う環境変数(重要では無い値)
  // 参照方法 => $config.baseName
  publicRuntimeConfig: {
    // meta
    baseName: process.env.BASE_NAME,
    baseUrl: process.env.BASE_URL,
    ctfBlogPostTypeId: process.env.CTF_BLOG_POST_TYPE_ID
  },
  // サーバーサイドのみで使用する環境変数(重要な値)
  // 参照方法 => env.BASE_NAME
  privateRuntimeConfig: {
    // pluginsファイルに環境変数を渡す場合、ここで宣言しても渡せない
    // CTF_SPACE_ID: process.env.CTF_SPACE_ID,
    // CTF_BLOG_POST_TYPE_ID: process.env.CTF_BLOG_POST_TYPE_ID,
    // CTF_CDA_ACCESS_TOKEN: process.env.CTF_CDA_ACCESS_TOKEN,
    // CTF_PREVIEW_ACCESS_TOKEN: process.env.CTF_PREVIEW_ACCESS_TOKEN
  },
  // envプロパティは引き続き使用でき、NODE_ENV = stagingやVERSION = 1.2.3など、実行時ではなくビルド時に必要なenv変数に役立ちます。ただし、ランタイムenv変数の場合、envプロパティを使用すると、dotenvモジュールを誤って使用するのと同じくらい危険な場合があるため、ランタイム構成が推奨されます。
  env: {
    // contentful.jsに渡すためにはここで宣言する
    CTF_SPACE_ID: process.env.CTF_SPACE_ID,
    CTF_BLOG_POST_TYPE_ID: process.env.CTF_BLOG_POST_TYPE_ID,
    CTF_CDA_ACCESS_TOKEN: process.env.CTF_CDA_ACCESS_TOKEN,
    CTF_PREVIEW_ACCESS_TOKEN: process.env.CTF_PREVIEW_ACCESS_TOKEN
  },
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},
  /*
   ** vuetify module configuration
   ** https://github.com/nuxt-community/vuetify-module
   */
  vuetify: {
    theme: {
      themes: {
        light: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
          twitter: '#55acee',
          facebook: '#3b5998',
          background: colors.grey.lighten5
        }
      }
    }
  },
  /*
   ** Build configuration
   ** See https://nuxtjs.org/api/configuration-build/
   */
  build: {
    transpile: ['vuetify/lib'],
    extend (config, ctx) {}
  }
}

ご注意ください

ブログ構築カテゴリーで構築するブログは、Nuxt.jsのバージョン2.13.0以上に対応しておりません。

本チュートリアルを実装するには「Nuxt.js v2.13.0未満」で実行してください。

まだまとまっていませんが、Nuxt.jsバージョン2.13.+のnuxt.config.js書き方メモを取り急ぎ公開します。記事下部、Nuxt.js v2.13.+の新機能メモをご覧ください。

Nuxt.js v2.13.0未満にダウングレードする方法

推奨されているアプリ作成コマンドは、自動的に最新のNuxt.jsがインストールされます。

$ yarn create nuxt-app <プロジェクト名>

そこで一度最新のNuxt.jsをインストールした後で、ダウングレードする方法を紹介します。

1. 作成コマンドを実行

$ yarn create nuxt-app <プロジェクト名>


? Project name: myblog_nuxt_v2122
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selectio
n)

新しく質問が追加されました。

? Deployment target: Static (Static/JAMStack hosting)

serverもしくはstaticを選択します。

ここはダウングレード時に削除しますのでどちらを選択しても構いません。

2. package.jsonの書き換え

作成されたpackage.jsonnuxtのバージョンを書き換えます。

package.json
...
"dependencies": {
  "@nuxtjs/axios": "^5.11.0",
  // "nuxt": "^2.13.0" 削除
  "nuxt": "<2.13.0" // 追加
},
  • <2.13.0 … 2.13.0未満のバージョンを指定しています。

3. yarn.lockファイルの削除

ルートディレクトリにあるyarn.lockファイルを削除します。

$ rm yarn.lock

4. node_modulesディレクトリの削除

モジュールが入った「node_mobules」ディレクトリを削除します。

$ rm -r node_modules

5. モジュールを再インストール

それではモジュールの再インストールコマンドを実行します。

$ yarn install

6. 確認しておきましょう

Nuxt.jsのバージョンを確認しておきましょう。

$ yarn list nuxt
...
└─ nuxt@2.12.2
  • nuxt@2.12.2 … v2.13.0未満で一番最新のバージョンです。

以上でダウングレードが完了です。

参考 アップグレード - Nuxt.js

nuxt.config.jsの編集

続いてNuxt.js v2.13.+から追加されたkeyを削除します。

nuxt.config.js
export default {
  ...
  /*
  ** Nuxt target
  ** See https://nuxtjs.org/api/configuration-target
  */
  // target: 'static', 12行目付近 削除
	...
  /*
  ** Auto import components
  ** See https://nuxtjs.org/api/configuration-components
  */
  // components: true, 43行目付近 削除
	...
}

targetcomponentsの2つのkeyを削除しました。

package.jsonにgenerateスクリプトを追加

Nuxt.js v2.13.+から3つのスクリプトが追加されました。

  1. nuxt starttarget: serverモードのスクリプト。

    本番用サーバを起動する。

  2. nuxt exporttarget: staticモードのスクリプト。

    「dist」ディレクトリに静的HTMLを生成する。(事前レンダリング)

  3. nuxt servetarget: staticモードのスクリプト。

    本番用サーバを起動する。

逆にnuxt genereteスクリプトが非推奨となりました。(v2.13.0未満では非推奨ではありません)

そのためpackage.jsonにはnuxt genereteスクリプトの記載がありません。

そこで追加された3つのスクリプトを削除して、generateを追加しましょう。

package.json
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  // "start": "nuxt start",    // 削除
  // "export": "nuxt export",  // 削除
  // "serve": "nuxt serve",    // 削除
  "generate": "nuxt generate", // 追加
  "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lint": "yarn lint:js"
},

generateスクリプトが正常に動作するか確認しておきましょう。

$ yarn generate

# OK
...
ℹ Generating pages
✔ Generated /

参考 Going Full Static - Nuxt.js

index.vueにimportを追加する

Nuxt.js v2.13.+からはcomponents: trueとすることで、コンポーネントファイルの自動読み込みが可能になりました。

もう忌々しいimport文からは解放されるのですね。非常に魅力的です。

nuxt.config.js
components: true

そのため、index.vueには「Logo.vue」のインポート分がありません。

scriptタグに以下を追加しましょう。

pages/index.vue
...
<script>
import Logo from '~/components/Logo'

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

これにてダウングレード作業終了です。

まとめ

Nuxt.jsのバージョン2.12.2へのダウングレードまとめ

  1. package.jsonの書き換え => "nuxt": "<2.13.0"
  2. yarn.lock、モジュールディレクトリを削除して全てを再インストール => $ yarn install
  3. nuxt.config.jsの2つのkeyを削除する => target & components
  4. package.jsonにgenerateスクリプトを追加 => "generate": "nuxt generate"
  5. 2.13.0未満で使用しない3つのスクリプトを削除する => start & export &serve
  6. index.vueにimport分を追加 => import Logo from '~/components/Logo'

以上の変更で http://localhost:3000/ に、Nuxt.jsのスタートページがエラーなく表示することができます。

(本編終わり。)

Nuxt.js v2.13.+の新機能メモ

ゆくゆくはこのブログ自体もバージョン2.13に対応する予定です。

その際は新たなチュートリアルも公開できればと思っています。(今は到底着手できません😫ごめんなさい。)

そこで現時点で得たNuxt.jsバージョン2.13.+の情報をnuxt.config.jsにまとめました。

ご参考までに。

nuxt.config.js
import colors from 'vuetify/es5/util/colors'
// 削除 $ yarn remove @nuxtjs/dotenv
// require('dotenv').config() // 追記

export default {
  /*
   ** Nuxt rendering mode
   ** See https://nuxtjs.org/api/configuration-mode
   */
  mode: 'universal',
  /*
   ** Nuxt target
   ** See https://nuxtjs.org/api/configuration-target
   */
  // v2.13.+の新機能('server' | 'static')デフォルト'server'

  // 'server':サーバー側レンダリング用
  // ogp対応可能
  // package.jsonに「"generate": "nuxt generate"」を追加(nuxt generate は非推奨とされています (しかし、今は何の変更もなく動作しています) => 対策の情報なし。現状これで行くしかない?)
  // Netlify $ yarn build && yarn generateの実行
  // NetlifyのPublish Directry 「dist」
  // Nuxtの起動($ nuxt start)はNetlifyが行ってくれるのでコマンドの必要なし
  // 動的ルーティング(generate)の追加必要なし(Nuxt.内部クローラーが行ってくれる)
  // nuxt.config.js に export key を追加しました。これは現在 generate のエイリアスですが、Nuxt 3 ではこれを引き継ぐ予定です。
  // $ nuxt start => ローカルで本番環境を起動したい場合

  // 'static':静的サイトの場合
  // ogp対応可能
  // Netlify $ yarn build && yarn export を実行。
  // NetlifyのPublish Directry 「dist」
  // dist/ディレクトリに静的ファイルが出力される。(超早い!SPAはこれすべき)
  // 動的ルーティングもdistディレクトリに吐き出されるのでリロードしても参照できるようになった。よって本番環境に動的ルーティングの追加は必要なし。

  // $ nuxt serve => 開発環境でstaticモードの本番環境サーバーが立ち上がる

  // 総括
  // どちらのモードにしろ、generateによる動的ルーティングの追加の必要なし
  // リロードすればページが無い問題は解消された
  // どちらもOGPに対応可能。ブログ構築はstaticモードで良いのでは?(かなり早い)
  // あとはクローラーの対応でモードを判断すべきか。そこは確認できず。

  // 詳細: https://nuxtjs.org/blog/going-full-static
  target: 'static',
  /*
   ** Headers of the page
   ** See https://nuxtjs.org/api/configuration-head
   */
  head: {
    title: process.env.BASE_NAME,
    titleTemplate: `%s - ${process.env.BASE_NAME}`,
    htmlAttrs: {
      lang: 'ja'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.BASE_DESC },
      { hid: 'og:site_name', property: 'og:site_name', content: process.env.BASE_NAME },
      { hid: 'og:type', property: 'og:type', content: 'article' },
      { hid: 'og:url', property: 'og:url', content: process.env.BASE_URL },
      { hid: 'og:title', property: 'og:title', content: process.env.BASE_NAME },
      { hid: 'og:description', property: 'og:description', content: process.env.BASE_DESC },
      { hid: 'og:image', property: 'og:image', content: `${process.env.BASE_URL}/defaultEyeCatch.png` },
      { name: 'twitter:card', content: 'summary_large_image' },
      { name: 'twitter:site', content: `@${process.env.TWITTER_ACCOUNT}` },
      { property: 'fb:app_id', content: process.env.FB_APP_ID }
    ],
    link: [
      { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon.ico' },
      { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon.ico' }
    ]
  },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */
  plugins: [
    'plugins/vuetify',
    'plugins/contentful'
  ],
  /*
   ** Auto import components
   ** See https://nuxtjs.org/api/configuration-components
   */
  // v2.13.+の新機能)コンポーネントの自動読み込み
  // true => componentsディレクトリいかが自動で読み込まれるので、手動importの必要なし
  // 子ディレクトリ内にあるコンポーネントはファイル名で認識する。そのためファイル名はディレクトリ名をつけること。
  // 「NG => components/foo/bar.vue」,「OK => components/foo/fooBar.vue」
  // ファイル名の開始は大文字でも小文字でもOK.
  // file「DraftChip」の場合、OK => <DraftChip /> OR <draft-chip />
  // file「draftChip」の場合、
  // <span is="draftChip" />は読み込めるが、
  // メソッドで返す文字列の場合 NG => <draftChip /> OK => <draft-chip />
  // もしファイル名をそのまま使用したい場合、prefixオプションを付ける
  // components: [
  //   '~/components/',
  //   { path: '~/components/foo/', prefix: 'foo' }
  // ]
  // 詳細: https://github.com/nuxt/components
  components: true,
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxtjs/vuetify'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/eslint-module'
    // 削除
    // '@nuxtjs/dotenv' // 追記
  ],

  // V2.13.+新機能 ランタイム構成
  // dotenvがなくても.envファイルを読み込めるようになった
  // 詳細: https://nuxtjs.org/blog/moving-from-nuxtjs-dotenv-to-runtime-config#migrating-to-the-nuxtjs-runtime-config-from-nuxtjsdotenv
  // フロントエンドで使う環境変数(重要では無い値)
  // 参照方法 => $config.baseName
  publicRuntimeConfig: {
    // meta
    baseName: process.env.BASE_NAME,
    baseUrl: process.env.BASE_URL,
    ctfBlogPostTypeId: process.env.CTF_BLOG_POST_TYPE_ID
  },
  // サーバーサイドのみで使用する環境変数(重要な値)
  // 参照方法 => env.BASE_NAME
  privateRuntimeConfig: {
    // pluginsファイルに環境変数を渡す場合、ここで宣言しても渡せない
    // CTF_SPACE_ID: process.env.CTF_SPACE_ID,
    // CTF_BLOG_POST_TYPE_ID: process.env.CTF_BLOG_POST_TYPE_ID,
    // CTF_CDA_ACCESS_TOKEN: process.env.CTF_CDA_ACCESS_TOKEN,
    // CTF_PREVIEW_ACCESS_TOKEN: process.env.CTF_PREVIEW_ACCESS_TOKEN
  },
  // envプロパティは引き続き使用でき、NODE_ENV = stagingやVERSION = 1.2.3など、実行時ではなくビルド時に必要なenv変数に役立ちます。ただし、ランタイムenv変数の場合、envプロパティを使用すると、dotenvモジュールを誤って使用するのと同じくらい危険な場合があるため、ランタイム構成が推奨されます。
  env: {
    // contentful.jsに渡すためにはここで宣言する
    CTF_SPACE_ID: process.env.CTF_SPACE_ID,
    CTF_BLOG_POST_TYPE_ID: process.env.CTF_BLOG_POST_TYPE_ID,
    CTF_CDA_ACCESS_TOKEN: process.env.CTF_CDA_ACCESS_TOKEN,
    CTF_PREVIEW_ACCESS_TOKEN: process.env.CTF_PREVIEW_ACCESS_TOKEN
  },
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},
  /*
   ** vuetify module configuration
   ** https://github.com/nuxt-community/vuetify-module
   */
  vuetify: {
    theme: {
      themes: {
        light: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
          twitter: '#55acee',
          facebook: '#3b5998',
          background: colors.grey.lighten5
        }
      }
    }
  },
  /*
   ** Build configuration
   ** See https://nuxtjs.org/api/configuration-build/
   */
  build: {
    transpile: ['vuetify/lib'],
    extend (config, ctx) {}
  }
}
あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる...。そんな方に向けた単発・短期間メンターサービスを行っています。下のサービスへお進みください。
独学プログラマのサービス
次の記事はこちら
Udemy
SPA開発
0. 更新情報 #01
ブログ構築カテゴリーの記事修正、更新情報【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
0. 更新情報 #02
Nuxt.js v2.13.0新機能メモの公開とv2.12.2にダウングレードする方法
1. 今回作るアプリケーション #01
Nuxt.jsとContentfulで作るマイブログ
2. 開発環境にNuxt.jsを立ち上げる #01
Nuxt.jsを動かす環境を構築する
2. 開発環境にNuxt.jsを立ち上げる #02
Nuxt.jsのプロジェクトを作成する
2. 開発環境にNuxt.jsを立ち上げる #03
Hello Nuxtを表示する
3. Nuxt.jsアプリを公開する #01
Nuxt.jsをデプロイする前の事前準備を行う
3. Nuxt.jsアプリを公開する #02
Netlifyの初期セットアップとNuxt.jsのデプロイを行う
3. Nuxt.jsアプリを公開する #03
NetlifyにデプロイしたNuxt.jsに独自ドメインを設定する
4. Contentfulのセットアップ #01
【Nuxt.js Universal】Vuetify2.0にバージョンアップしよう
4. Contentfulのセットアップ #02
【画像で説明】Contentfulの使い方。初期設定と各メニューについて学ぶ
4. Contentfulのセットアップ #03
Contentfulにブログ記事モデルを作成していこう
4. Contentfulのセットアップ #04
ContentfulからAPIを取得してNuxt.jsで記事一覧を表示する
5. ブログ記事周りの構築 #01
Nuxt.jsにContentfulのブログ記事を表示する
5. ブログ記事周りの構築 #02
Contentfulから取得した下書き記事を開発環境に表示する
5. ブログ記事周りの構築 #03
Nuxt.jsのgenerateプロパティに動的なルーティングを追加する
5. ブログ記事周りの構築 #04
【Nuxt.js】middlewareを活用しブログ記事取得のパフォーマンスを改善する
6. カテゴリーページの構築 #01
【Contentful】カテゴリーモデルとブログ記事モデルの関連付け
6. カテゴリーページの構築 #02
【Nuxt.js × Contentful】ブログ記事に関連付くカテゴリーを表示する
6. カテゴリーページの構築 #03
【Nuxt.js × Contentful】カテゴリー記事一覧ページを作成する
7. タグ機能の構築 #01
Contentfulにタグモデルを作成し関連付けを行う
7. タグ機能の構築 #02
【Nuxt.js × Contentful】タグに関連付いたブログ記事を表示する
7. タグ機能の構築 #03
Contentfulのincludesを使って関連モデルを取得しタグ一覧ページを作成する
7. タグ機能の構築 #04
Vuetify2のdata-tableの使い方を学んで、タグ一覧ページをレイアウト
99. Nuxt.jsブログカスタマイズ #01
Twitterシェアボタン、フォローボタンの作り方【Nuxt.js Universalモード編】
99. Nuxt.jsブログカスタマイズ #02
Contentfulの全文検索を使ったNuxt.jsブログ内検索の実装
小ネタ集