CSS
JavaScript
Node.js
vue.js
nuxt.js

Create Nuxt Appとnuxt-community/express-templateで作成したときの違いメモ

Nuxt.jsのバージョンは2.0.0です。

最初に1系でnuxt-community/express-templateでNuxt.js + Expressの環境を作っていて、最近nuxt/create-nuxt-appを使って2系を触ってみてます。

あのファイルどこいったの?ってのがいくつかあったのでメモしておきます。

インストール

$ npx create-nuxt-app

選んだ選択肢は以下の内容

  • ? Project name: myapp
  • ? Project description: My geometric Nuxt.js project
  • ? Use a custom server framework: express
  • ? Use a custom UI framework: none
  • ? Choose rendering mode: Universal
  • ? Use axios module: yes
  • ? Use eslint: yes
  • ? Use prettier: node

今回はこんな感じです。

GlobalなCSSのデフォルトの場所

nuxt-community/express-templateだとbodyやhtmlタグ全体のCSS設定はassets/css/main.cssに記載してあったのですが/layouts/default.vueの中のstyleにデフォルトで記述してあります。ここを編集すると全体へ反映できます。

<template>
  <div>
    <nuxt/>
  </div>
</template>

<style>
html {
  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
}

.button--green {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #3b8070;
  color: #3b8070;
  text-decoration: none;
  padding: 10px 30px;
}

.button--green:hover {
  color: #fff;
  background-color: #3b8070;
}

.button--grey {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #35495e;
  color: #35495e;
  text-decoration: none;
  padding: 10px 30px;
  margin-left: 15px;
}

.button--grey:hover {
  color: #fff;
  background-color: #35495e;
}
</style>

Expressのサーバースクリプトの場所

nuxt-community/express-templateだとapi/index.jsにあるindex.jsですが、server/index.jsにあります。

server/index.js
const express = require('express')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000

app.set('port', port)

// Import and Set Nuxt.js options
let config = require('../nuxt.config.js')
config.dev = !(process.env.NODE_ENV === 'production')

async function start() {
  // Init Nuxt.js
  const nuxt = new Nuxt(config)

  // Build only in dev mode
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // Give nuxt middleware to express
  app.use(nuxt.render)

  // Listen the server
  app.listen(port, host)
  consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
  })
}
start()

起動スクリプト

nuxt-community/express-templatepackage.jsonを見ると起動スクリプトを見るとnpm start"nuxt build && nuxt start"になっていることがわかります。Expressでサーバーを起動させたい場合にこの起動方法だとデバッグがうまくいかなかったりPaaS側での起動がうまくいかなかったりVSCodeのデバッグモード起動でうまく動かなかったりがあり、node server.jsの形式で起動しているcreate nuxt appの方が個人的には好きです。

  • nuxt-community/express-templateのpackage.json
package.json
省略
"scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt build && nuxt start",
    "precommit": "npm run lint",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
  },

省略
  • nuxt/create-nuxt-appのpackage.json
package.json
省略
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
省略

蛇足:

関係ないけどインストール時に最後のprettierをyesにすると最初から起動できずにエラーになりました苦笑
(2018/10/9時点)

デフォルトでエラーでるってジェネレーターとしてどうなんだろ(エラー内容追って直す気になれなかった)

 ERROR  Failed to compile with 1 errors                                                                                             7:07:23 PM

 error  in ./pages/index.vue

Module Error (from ./node_modules/eslint-loader/index.js):

/Users/n0bisuke/dotstudio/playground/nuxt-test/myapp/pages/index.vue
  36:1  error  Delete `⏎`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.


 @ ./.nuxt/router.js 5:9-7:3
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js