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の使い方の記事を参考にしてみてください。