Nuxt.js v2.13.0新機能メモの公開とv2.12.2にダウングレードする方法
  • 2020.07.08に公開
  • 2020.07.27に更新
  • ブログ構築
  • 0. 更新情報
  • No.2 / 2
「ブログ構築」では、Nuxt.js v2.14未満が使用されています。 Nuxt.jsはv2.13~14で大きなバージョンアップがありました。それに伴い、書き方も大きく変化しています。 v2.14以上で書かれた「ブログ構築」の続編は、カテゴリー「 ブログ構築TS 」 で公開しています。

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.jsonのnuxtのバージョンを書き換えます。

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行目付近 削除
	...
}

targetとcomponentsの2つのkeyを削除しました。

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

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

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

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

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

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

  3. nuxt serve ... target: 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に対応する予定です。

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

そこで現時点で得た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.jsonのnuxtのバージョンを書き換えます。

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行目付近 削除
	...
}

targetとcomponentsの2つのkeyを削除しました。

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

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

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

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

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

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

  3. nuxt serve ... target: 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に対応する予定です。

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

そこで現時点で得た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) {}
  }
}
← Prev
Next →
0. 更新情報
1. ブログ構築カテゴリーの記事修正、更新情報【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
1. 今回作るアプリケーション
1. Nuxt.jsとContentfulで作るマイブログ
あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
「独学プログラマ」の内容についてSlackで質問できますよ 0円/ALL FREE
【ココナラ】Rails、Nuxt.js周りの短期間・短時間メンターになります 5,500円/1h
ブログ構築の投稿
1
  • 更新情報
  • /
  • #01
ブログ構築カテゴリーの記事修正、更新情報【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
2
  • 更新情報
  • /
  • #02
Nuxt.js v2.13.0新機能メモの公開とv2.12.2にダウングレードする方法
1
  • 今回作るアプリケーション
  • /
  • #01
Nuxt.jsとContentfulで作るマイブログ
1
  • 開発環境にNuxt.jsを立ち上げる
  • /
  • #01
Nuxt.jsを動かす環境を構築する
2
  • 開発環境にNuxt.jsを立ち上げる
  • /
  • #02
Nuxt.jsのプロジェクトを作成する
3
  • 開発環境にNuxt.jsを立ち上げる
  • /
  • #03
Hello Nuxtを表示する
1
  • Nuxt.jsアプリを公開する
  • /
  • #01
Nuxt.jsをデプロイする前の事前準備を行う
2
  • Nuxt.jsアプリを公開する
  • /
  • #02
Netlifyの初期セットアップとNuxt.jsのデプロイを行う
3
  • Nuxt.jsアプリを公開する
  • /
  • #03
NetlifyにデプロイしたNuxt.jsに独自ドメインを設定する
1
  • Contentfulのセットアップ
  • /
  • #01
【Nuxt.js Universal】Vuetify2.0にバージョンアップしよう
2
  • Contentfulのセットアップ
  • /
  • #02
【画像で説明】Contentfulの使い方。初期設定と各メニューについて学ぶ
3
  • Contentfulのセットアップ
  • /
  • #03
Contentfulにブログ記事モデルを作成していこう
4
  • Contentfulのセットアップ
  • /
  • #04
ContentfulからAPIを取得してNuxt.jsで記事一覧を表示する
1
  • ブログ記事周りの構築
  • /
  • #01
Nuxt.jsにContentfulのブログ記事を表示する
2
  • ブログ記事周りの構築
  • /
  • #02
Contentfulから取得した下書き記事を開発環境に表示する
3
  • ブログ記事周りの構築
  • /
  • #03
Nuxt.jsのgenerateプロパティに動的なルーティングを追加する
4
  • ブログ記事周りの構築
  • /
  • #04
【Nuxt.js】middlewareを活用しブログ記事取得のパフォーマンスを改善する
1
  • カテゴリーページの構築
  • /
  • #01
【Contentful】カテゴリーモデルとブログ記事モデルの関連付け
2
  • カテゴリーページの構築
  • /
  • #02
【Nuxt.js × Contentful】ブログ記事に関連付くカテゴリーを表示する
3
  • カテゴリーページの構築
  • /
  • #03
【Nuxt.js × Contentful】カテゴリー記事一覧ページを作成する
1
  • タグ機能の構築
  • /
  • #01
Contentfulにタグモデルを作成し関連付けを行う
2
  • タグ機能の構築
  • /
  • #02
【Nuxt.js × Contentful】タグに関連付いたブログ記事を表示する
3
  • タグ機能の構築
  • /
  • #03
Contentfulのincludesを使って関連モデルを取得しタグ一覧ページを作成する
4
  • タグ機能の構築
  • /
  • #04
Vuetify2のdata-tableの使い方を学んで、タグ一覧ページをレイアウト
1
  • Nuxt.jsブログカスタマイズ
  • /
  • #01
Twitterシェアボタン、フォローボタンの作り方【Nuxt.js Universalモード編】
2
  • Nuxt.jsブログカスタマイズ
  • /
  • #02
Contentfulの全文検索を使ったNuxt.jsブログ内検索の実装
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
ブログ構築（Nuxt v2.14未満）
ABOUT
このサイトの読者さんへ
独学プログラミング勉強法 一問一答
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。
info.cloudacct+blog@gmail.com