Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

追記(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の最適化による非推奨になったためだそうです。

yamanoku
アクセシビリティはねぇ大事なんですよ
https://yamanoku.net
crowdworks
21世紀の新しいワークスタイルを提供する日本最大級のクラウドソーシング「クラウドワークス」のエンジニアチームです!
https://crowdworks.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした