nuxt.config.jsのいろいろなプロパティの設定について

2021年7月13日Vue.js

Nuxt.config.jsのいろいろなプロパティの設定についてまとめました。

modeプロパティ

mode:'universal' //サーバーサイドレンダリングを行う
or
mode: 'spa'//サーバーサイドレンダリングを行わない

が選択できます。しかし’spa’は非推奨なので、

ssr: false

とssrプロパティを使います。
>>>modeプロパティ

headプロパティ

headプロパティはデフォルトでいくつか設定されています。
head部分に記載する内容を記述します。
書き方は、JavaScriptの形式なので、属性となる部分を左に記述し、コロン(:)の右側にはその内容を記述します。

titleプロパティ

titleプロパティはタブに表示される部分です。

    title: 'first-nuxt-app',

htmlAttrsプロパティ

htmlAttrsプロパティのlangで言語を選択できます。

    htmlAttrs: {
      lang: 'ja'
    },

metaプロパティ

metaプロパティは、metaタグで設定している部分です。

    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'ここに概要をかく' }
    ],

linkプロパティ

linkプロパティは、cssやgoogle fontsなどを指定する部分です。

    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'preconnect', href: 'https://fonts.gstatic.com' },
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;500;700&display=swap' }
    ]

特定のpageのみにheadに内容を追加する

nuxt.config.jsのheadプロパティは、グローバルにすべてのページに適用されます。
個別のpageにheadプロパティを設定することで、そのページだけに適用することができます。
たとえば、pages/posts/index.vueのscriptタグの中で、次のように記述します。

<script>
  head: {
    title: 'これは個別pageのタイトル',
  },
</script>

loadingオプション

  // ローディング
  loading: {
    color: '#FF4E50',
    height: '5px'
  },

loadingが不要な場合は、falseを設定します。

 loading: false,

>>>loadingプロパティ

loading indicatorプロパティ

くるくると回るインディケータなどを簡単に表示することができます。

  // ローディングインディケータ
  loadingIndicator: {
    name: 'circle',
    color: '#FF4E50',
    background: 'white'
  },

circle以外にもいろいろ指定可能です。

  • circle
  • cube-grid
  • fading-circle
  • folding-cube
  • chasing-dots
  • nuxt
  • pulse
  • rectangle-bounce
  • rotating-plane
  • three-bounce
  • wandering-cubes
  • カスタマイズしたローダー

>>>loadingIndicatorプロパティ

cssプロパティ

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '~/assets/styles/main.css'
  ],

上のように設定するとグローバルに適用するcssのファイルを指定することができます。
あとは、layoutsフォルダでレイアウトを切り替えることで、指定したレイアウトを個々のページで柔軟に指定することができます。

envプロパティ

  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }

こうすることで、
process.env.baseUrlでたとえば次のようにアクセスできます。

return axios.get(`${process.env.baseUrl}/posts.json`)

rootDirプロパティ

'/’がデフォルトのルートディレクトリを変更することができます。

rootDir: '/my-app/'

routerプロパティ

Nuxtの場合フォルダでrouterが決定されますが、通常のVueと同じくrouterの設定も可能です。
その場合、nuxt.config.jsにrouterプロパティを設定します。

extendRoutes


  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'custom',
        path: '*',
        component: resolve(__dirname, 'pages/index.vue')
      })
    }
  }

また、上のようにextexdRoutesを使うとNuxtのrouterをプログラマティックに拡張することができます。
上のように設定すれば、設定していないURLにアクセスした場合、pages/index.vueに飛ばすことができます。

>>>routerプロパティ

linkExactActiveClass

  router: {
    linkActiveClass: 'active'
  }

デフォルトでは’nuxt-link-exact-active’ですが、それを変更することができます。

srcDirプロパティ

ソースディレクトリを設定することができます。
相対パスを指定すると、rootDirからの相対パスになります。

srcDir: 'client-app/'

transitionプロパティ

文字列で指定するとname属性

transition: 'slide'

transitionプロパティに文字列を指定した場合は、transitionのname属性になります。

オブジェクトで指定すると

  transition: {
    name: 'fade',
    mode: 'out-in'
  }

オブジェクトの場合、modeやcssなどいろいろなプロパティをまとめて指定できます。

assets/styles/main.cssを作成してアニメーションを設定します。

.fade-enter-active, .fade-leave-active {
  transition: all 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(-70px);
}

name属性に’fade’としているので、enterとleaveのクラスは上のようになります。

忘れずに作成したcssファイルをnuxt.config.jsに読み込ませます。

  css: [
    '~/assets/styles/main.css'
  ],

そうすると、コンポーネントが切り替わるたびにアニメーションが実現します。

pluginsプロパティ

pluginsプロパティはpluginsの使い方の記事を参考にしてみてください。

modulesプロパティ

modulesプロパティはmodulesの使い方の記事を参考にしてみてください。

Vue.js

Posted by devsakaso