Nuxt.js 初期設定＆トラブルシューティング

Install & Generate project

プロジェクト開始時のnuxtインストールとプロジェクトテンプレート作成。

1. npm install -g vue-cli
2. vue init nuxt-community/starter-template <project-name>

https://ja.nuxtjs.org/guide/installation/

css & scss 読み込み設定

scssを使うための設定

1. npm install --save-dev node-sass sass-loader
2. ~/assets/example.scss
3. configure nuxt.config.js

module.exports = {
  css: [
    // プロジェクト内の CSS ファイル
    '~assets/css/main.css',
    // プロジェクト内の SASS ファイル
    { src: '~assets/css/main.scss', lang: 'scss' } // SASS の代わりに SCSS を使う
  ]
}

npmコマンドでインストールしたcssライブラリはこう読み込ませる。

..
  css: [
    'assets/main.css',
    { src: '~assets/css/pulse.scss', lang: 'scss' },
    // spectre css framework
    'node_modules/spectre.css/dist/spectre.min.css',
    'node_modules/spectre.css/dist/spectre-exp.min.css',
    'node_modules/spectre.css/dist/spectre-icons.min.css'
  ], ..

https://ja.nuxtjs.org/api/configuration-css/

plugins 外部ライブラリ設定

npmでインストールしたライブラリはこう読み込ませる。

1. create plugin js plugins/vue-notifications.js

import Vue from 'vue'
import VueNotifications from 'vue-notifications'
Vue.use(VueNotifications)

1. configure nuxt.config.js

module.exports = {
  build: {
    vendor: ['vue-notifications']
  },
  plugins: ['~plugins/vue-notifications']
}

ex. クライアントサイドでしか使わない系のプラグイン

  plugins: [
    { src: '~plugins/uikit', ssr: false }
  ],

https://ja.nuxtjs.org/guide/plugins/

tslintでエラー出るときは

No ESLint configuration found.

1. .eslintrc.js を作る

module.exports = {
  root: true,
  parser: 'babel-eslint',
  env: {
    browser: true,
    node: true
  },
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  rules: {},
  globals: {}
}

---

nuxt.jsすっごく便利ですね :D