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

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

関連記事

10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...
【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました... これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。 乗り換えた理由 以前からaigisの存在は知っていたのですが、私はFrontnoteを使っていました。 理由は単純で、Frontnoteだと導入が楽だったからです。 ス...
Bootstapのグリッドでcolumn崩れが起きるときの対処法... Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。 今回はその対処方を紹介します。 対処方法 Flexboxを使う gridの.rowにFlexboxを当てれば解決します。 CSS ....
今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...