導入
公式ドキュメントに目を通しただけだと内容がいまいち頭に入らないことってありますよね…。
実際にnuxt.jsを使ってみてこういうことができるんだ！便利！と改めて実感できたことをまとめてみました。
※ソースサンプルは公式ドキュメントから転載しているものがあります。
便利な点
コンポーネントのprefix（接頭辞）を設定できる
ファイル名をすっきり保ちつつテンプレート側ではどういうコンポーネントなのか一目で判断できてよかったです。Atomic Designのコンポーネント整理をする場合とても噛み合っていると感じました。
nuxt.config.js
export default {
components: [
'~/components',
{ path: '~/components/awesome/', prefix: 'awesome' }
]
}
// ディレクトリ
| components/
---| awesome/
------| Button.vue
---| Button.vue
SomeComponent.vue
<template>
<div>
<AwesomeButton>Click on me 🤘</AwesomeButton>
<button>Click on me</button>
</div>
</template>
参考
ファイル名を保ったままビルドすることができる
assets ディレクトリにはスタイルや画像、フォントなどコンパイルされていないアセットを入れます。
との記載があるので画像もassetsディレクトリに入れるものだと思いこんでいたのですが、
staticディレクトリに入れる方法もあると教えていただきました。
assetsディレクトリに入れたファイルはビルドの過程でパスが書き変わりビルドファイルは人間視点だとわかりづらくなります。サーバのルートに置きたいファイル類（favicon等）のほか、画像類もstaticに入れた方が個人的に良いかなと思いました（感覚的ですみません）
参考
外部ファイルの設定方法
具体的にはGTMの読み込みをしました。
nuxt.config.jsのhead.scriptでパス設定ができます。
公式ドキュメントではjqueryを読み込んでいますが、下記のようにルートパスでstaticディレクトリ下のファイルを設定して読み込めました。gtm.jsの内容は発行されたGTMの<script>の中身そのままです。
nuxt.config.js
export default {
head: {
script: [
{
src: '/assets/js/gtm.js'
}
]
}
}
gtm.js
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-SOMEGTMID');
※GTMのIDは適当な文字に置き換えてます
また<noscript>はプロジェクトルートのapp.htmlに直接記載することで実現できました。
app.html
// ~~ 省略 ~~
<body {{ BODY_ATTRS }}>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-SOMEGTMID"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
{{ APP }}
// ~~ 省略 ~~
参考
まとめ
以上です。他にも思いついたら更新します！