nuxt.js

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