Cntlog

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

フロントエンド

投稿日

今年から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 };
  },