今年からVue.jsを使い始めてノリノリだったのですが、最近Nuxt.jsも触り始めました。
Vue.jsがわかっていたら大丈夫かなーと思っていたのですが、結構Nuxt.jsの書き方でトラブったり悩んだりしたことがあったので、自分のあった経験と解決方法をご紹介します。
インストール方法
まずは一番基本のインストール方法。
npx create-nuxt-app <project-name>
※project-nameの部分は自分の好きなものに書き換えてください。
これで、Nuxt.jsの基本テンプレートが作成されます。
scss 読み込み設定
まずはnpmでインストール。
npm install --save-dev node-sass sass-loader
それから、@/assers/scss/*の中に.scssを置きます。（今回は参考までにstyle.scssというのを置く想定で書きます）
続いて、nuxt.config.jsにCSSの読み込みを追記します。
module.exports = {
css: [
// プロジェクト内の SASS ファイル
{ src: '@/assets/scss/style.css', lang: 'scss' }
]
}
SCSSで設定したmixinやvaliableをVueファイルでも使う
下記をインストール（sass-loaderをインストールしてない人はこちらもインストールしてくださいね）
npm install --save-dev nuxt-sass-resources-loader
nuxt.config.jsに下記を追記します。
module.exports = {
modules: [
['nuxt-sass-resources-loader', [
'@/assets/sass/congig/variable.scss',
'@/assets/sass/congig/mixin.scss',
]],
],
}
エラーが出る場合
nuxt-sass-resources-loaderのエラーで出た場合はstyle-resources対処していました。
sass-resources-loaderを削除して、style-resourcesに置き換える
$ npm remove nuxt-sass-resources-loader
$ npm i -D @nuxtjs/style-resources
nuxt.config.jsで記述していた、nuxt-sass-resources-loaderのコードを消して、下記のように差し替えます。
modules: [
'@nuxtjs/style-resources',
],
styleResources: {
sass: [
'~/assets/sass/config/variable.scss',
'~/assets/sass/config/mixin.scss',
'~/assets/sass/config/extend.scss',
],
},
bulma使う時
Nuxt.jsでframeworkを使う場合、JSの内frameworkだからかbulmaが良いと聞いたので、これをメインに使ってます。
npm i @nuxtjs/bulma --save-dev
nuxt.config.jsに下記2つを追加
{
modules: [
'@nuxtjs/bulma'
]
}
build: {
/*
** You can extend webpack config here
*/
postcss: {
plugins: {
'postcss-cssnext': {
features: {
customProperties: false
}
}
}
},
extend(config, ctx) {
// Run ESLint on save
if (ctx.isDev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
google tag manager を使う
下記のパッケージをインストール
npm add @nuxtjs/google-tag-manager
nuxt.config.jsに下記を追記
module.exports = {
modules: [
['@nuxtjs/google-tag-manager', {id: 'GTM-XXXXX'}]
]
}
このとき、GTMは NODE_ENV=production の環境でしか動かないことに注意が必要です。
netlifyでNuxt.jsを利用する
Nuxt.jsには静的ページを書き出すganerate というコマンドがあるのでそれを利用します。
netlifyでは、githubやgitlabのリポジトリと連携して、対象のブランチに変化があった場合に自動デプロイする設定があります。
そこで、ビルドコマンドとして、npm run ganerate を使い、ドメインの直下をdistにすると静的に吐き出されたページで運用ができます。

scrollToTop が効かない
pageごとにscrollToTop: true と設定すれば、ページのTOPが表示されるはずなのですが、これが効かない状況のときは、nuxt.config.js に下記の内容を追記します。
module.exports = {
router: {
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
let position = {};
if (to.matched.length < 2) {
position = { x: 0, y: 0 }
} else if (to.matched.some(r => r.components.default.options.scrollToTop)) {
position = { x: 0, y: 0 }
}
if (to.hash) {
position = { selector: to.hash }
}
return position;
}
},
},
};
sitemap.xmlを作成する
npmがあるのでそれをインストールするだけで使えます。
sitemapモジュールのインストール
$ yarn add @nuxtjs/sitemap
or
$ npm i --save @nuxtjs/sitemap
nuxt.config.jsに登録
modules: [
'@nuxtjs/sitemap'
]
確認方法
npm run devをしてから、http://localhost:3000/sitemap.xmlにアクセスすると確認できます。
モジュールをasyncDataで使う例
axios
async asyncData({ app, params }) {
const { id } = params;
const response = await app.$axios.get(`/users/${id}`);
const { user } = response.data;
return { user };
},