Edited at

vue-cliで作ったNuxtスターターキットでNuxt1 => 2に上げるやり方(追記あり)


追記(2018/10/26)

Image from Gyazo

vue init nuxt-community/starter-template が公式発表10/14でdeprecatedになったようです。

https://github.com/nuxt-community/starter-template/commit/82513c7306563b2dd42c7da3efed57803d25aea2

今後はこんな記事なんぞ参照せずcreate-nuxt-appを使うようにしましょう👋👋👋


Nuxt.js 2.0 Release !

Image from Gyazo

Nuxt.js 2.0: Webpack 4, ESM Modules, create-nuxt-app and more! 💫

ついに来ました Nuxt2.0。ということで初心者でもすぐ体験できるNuxt2の世界の話をします。

たぶんこのあとvue-cliがちゃんとアップデートしてくれると思いますが、それまでの僅かな命だと思ってご覧ください。


install

npm 5.2.0以上だったらnpx使うとラクチンです。

npx vue-cli init nuxt-community/starter-template nuxt2

? Project name nuxt2
? Project description Nuxt.js project
? Author yamanoku <0910yama@gmail.com>

vue-cli · Generated "nuxt2".

To get started:

cd nuxt2
npm install # Or yarn
npm run dev

cd nuxt2

yarn

宗教上の都合でyarnを使ってますが別にnpmでも問題ないです


package.json

現時点(9/21)ではこうなってると思います

  "dependencies": {

"nuxt": "^1.0.0"
},

ここから2にあげる

yarn add nuxt

  "dependencies": {

"nuxt": "^2.0.0"
},


run

とりあえず動かしてみましょう

yarn dev

yarn run v1.9.4
$ nuxt

Image from Gyazo

おっ動いてる

Image from Gyazo

と思いきやeslintでなにやらコケてる


fix

以前@potate4dさんの記事で拝見したMigrate from isServer to process.serverで該当箇所を修正してみる。


before/nuxt.config.js

  build: {

/*
** Run ESLint on save
*/

extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}


after/nuxt.config.js

  build: {

/*
** Run ESLint on save
*/

extend (config) {
if (process.server && process.client) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}

Image from Gyazo

エラー消えた!

Image from Gyazo

buildも動く

Image from Gyazo

generateも動く

以上!!!!!!!!!!!!!!!!!!


etc

他なにかわかったら追記します。


vendorがあると警告が出る


nuxt.config.js

  build: {

vendor: [
'axios',
]
},

こういうのがあったと思うんですが、Nuxt2にアプデしてこのまま動かすと警告が出ます。

⚠ warn vendor has been deprecated due to webpack4 optimization

webpack4の最適化による非推奨になったためだそうです。