Cntlog > スキルアップ・ノウハウ > コーディング > Nuxt.jsのトラブル解決方法

Nuxt.jsのトラブル解決方法

今年からVue.jsを使い始めてノリノリだったのですが、最近Nuxt.jsも触り始めました。

Vue.jsがわかっていたら大丈夫かなーと思っていたのですが、結構Nuxt.jsの書き方でトラブったり悩んだりしたことがあったので、自分のあった経験と解決方法をご紹介します。

インストール方法

まずは一番基本のインストール方法。

npm install -g vue-cli
vue init nuxt-community/starter-template <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',
]],
],
}

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;
}
},
},
};

関連記事

Sassの人気に嫉妬!でもLESSにだっていいとこあるんだよ... 最近「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 」という本が出版されてSassがさらに注目されていますね。 個人的にはいよいよSass一択になってLESSが淘汰されていっちゃうのかなと心配しています。 そもそもLESSって何?って方もいるでし...
Bootstapのグリッドでcolumn崩れが起きるときの対処法... Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。 今回はその対処方を紹介します。 対処方法 Flexboxを使う gridの.rowにFlexboxを当てれば解決します。 CSS ....
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...
コーディングのお供に!CSSの更新を自動で反映させてくれる便利なブックマークレート... 最近コーディングで便利なブックマークレートを見つけましたのでご紹介します。 CSSrefresh このブックマークレートは表示しているページで使われているCSSファイルの更新を自動的に確認してブラウザに反映させてくれるというものです。 コーデ...
gulpで作るスタイルガイドをFrontNoteにした... みなさん、スタイルガイドは使ってますか。 私は今年になって使い始めました。 これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。 乗り換えたスタイルガイドジェネレーターは「fron...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...