Posted at

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

More than 1 year has passed since last update.


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