Nuxt.js 触ってみる

今度は Vue ベースの Nuxt.js を触りだけ。

コチラも気が付いたら CLI が充実していて、npx でサッとプロジェクトが作れる。Next.js の create-next-app と違って、対話形式で色々と質問されるので、導入したいモノを選んでいく。Angular に近いかな。

$ npx create-nuxt-app neos-nuxt-app

create-nuxt-app v3.4.0
✨  Generating Nuxt.js project in neos-nuxt-app
? Project name: neos-nuxt-app
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Single Page App
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? neos21
? Version control system: Git

🎉  Successfully created project neos-nuxt-app

  To get started:

        cd neos-nuxt-app
        npm run dev

  To build & start for production:

        cd neos-nuxt-app
        npm run build
        npm run start

  For TypeScript users.

  See : https://typescript.nuxtjs.org/cookbook/components/

どんなファイルができたか見てみる。

$ tree -a -I '\.git|node_modules' ./neos-nuxt-app/
./neos-nuxt-app/
├── .editorconfig
├── .gitignore
├── README.md
├── assets
│   ├── README.md
│   └── variables.scss
├── components
│   ├── Logo.vue
│   ├── README.md
│   └── VuetifyLogo.vue
├── layouts
│   ├── README.md
│   ├── default.vue
│   └── error.vue
├── middleware
│   └── README.md
├── nuxt.config.js
├── package.json
├── pages
│   ├── README.md
│   ├── index.vue
│   └── inspire.vue
├── plugins
│   └── README.md
├── static
│   ├── README.md
│   ├── favicon.ico
│   ├── v.png
│   └── vuetify-logo.svg
├── store
│   └── README.md
└── tsconfig.json

TypeScript ベースにしてみたので、tsconfig.json が作られている。また、CSS フレームワークに Material Design を実現できる Vuetify を選定したので、Vuetify 関連のアセットや SCSS ファイルが作られている。このあたり、Next.js が JS ベースでしかなかったのと比べると、配慮が効いている。

package.json はこんな感じ。

{
  "name": "neos-nuxt-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^2.0.0",
    "@nuxtjs/axios": "^5.12.2",
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.6",
    "@nuxt/typescript-build": "^2.0.3",
    "@nuxtjs/vuetify": "^1.11.2"
  }
}

CLI で選んだツール類はいずれも @next/ ないしは @nuxtjs/ スコープのパッケージたちで、素の Axios や Vuetify を読んでいるワケではないようだ。この辺は「Vue じゃなくて Nuxt のための調整」が必要になりそうで、なんかイマイチだなぁ…。

ディレクトリ構成は SSR を見越して細かめに分けられている。Hexo っぽい感じもする。Next と同じく index.html のような HTML ファイルがないが、nuxt.config.js が存在するので、もう少し見通しが良い。

Vue や Nuxt は、「AngularJS の分かりにくかったところを徹底的に簡単にしてあげる」ことが狙いのフレームワークだと感じている。対話形式で導入するツールを選定できるところも、親切心が溢れている。

しかし、バックに大きな企業が付いておらずコミュニティベースで開発が進んでいるためか、いささかそれらのツールの協調性が弱い感じがする。@nuxt/ スコープでラップしたパッケージを提供しているのはやや強引な感じもする。Next.js はその辺りあまり配慮していなくて、テンプレートプロジェクトに任せているようだったので、それと比べれば「Nuxt 自身で改善しようとしている」のかもしれない。それでも、Angular のように HttpClientModule まで自前でこしらえてしまうような大規模な開発による平仄合わせはしきれないようだ。

初心者・中級者がそれっぽくプロジェクトを始めるにはもってこいだと思うが、細かいことをやりたくなった時にニッチなトラブルに悩まされそうである…。