Zenn
Closed28

Nuxt 3 触ってみる

Nuxt
Nuxt
Futa HirakobaFuta Hirakoba

npx nuxi init quick_startで雛形作る

❯ npx nuxi init quick_start
Need to install the following packages:
  nuxi
Ok to proceed? (y) y
Nuxt CLI v3.0.0-rc.2                                                       17:30:19
ℹ cloned nuxt/starter#v3 to /Users/korosuke613/ghq/github.com/korosuke613/playground/javascript/nuxt3/quick_start
                                                                           17:30:21
 ✨ Your wondrous Nuxt project is just created! Next steps:

 📁  cd quick_start                                                        17:30:21

 💿  Install dependencies with npm install or yarn install or pnpm install --shamefully-hoist

 🚀  Start development server with npm run dev or yarn dev or pnpm run dev 17:30:21
Futa HirakobaFuta Hirakoba

今回はnpxで作ったけどNuxt的にはどれがおすすめなんだろうか。

Futa HirakobaFuta Hirakoba

npm iした後にサーバを立ち上げてみる。

❯ npm run dev

> dev
> nuxt dev

ちゃんとVite使われてる

Nuxt CLI v3.0.0-rc.2                                                       17:36:05
                                                                           17:36:05
  > Local:    http://localhost:3000/
  > Network:  http://xxx.xxx.xxx.xxx:3000/

ℹ Vite server warmed up in 93ms                                            17:36:07
ℹ Vite client warmed up in 492ms                                           17:36:07
✔ Vite server built in 396ms                                               17:36:08
✔ Nitro built in 206 ms                                              nitro 17:36:08
Futa HirakobaFuta Hirakoba

localhost:3000を開いてみる。

Remove this welcome page by removing <NuxtWekcome /> tag or creating an app.vue file.

とのこと。

app.vueから<NuxtWekcome />を消すとページが真っ白に。
ていうかビルドはえぇ。もちろん規模小さいから早くて当然なんだけど。

Futa HirakobaFuta Hirakoba

Next steps

Now that you've created your Nuxt 3 project, you are ready to start building your application.

  • Learn about the framework concepts
  • Learn more about the framework features

とのこと。Quick Start終わり！シンプルなQuick Startだった。

Futa HirakobaFuta Hirakoba

Nuxtを選ぶ理由

  • JavaScript フレームワークはVue.jsだよ
  • webpack 5とviteの両方をサポートしてるよ
  • トランスパイラにはesbuildを採用してるよ
  • h3を使ってるよ
    • h3って何？

      • Minimal h(ttp) framework built for high performance and portability ⚡️

      • 軽量なhttpフレームワークらしい。Vueとの関係性はどういう感じなんだろうかわからん
  • ルーティングにはvue-routerを使ってるよ
Futa HirakobaFuta Hirakoba

どのように動作する？

  • コアエンジン: nuxt
  • バンドラー: @nuxt/vite-builder、@nuxt/webpack-builder
  • CLI: nuxi
  • サーバーエンジン: nitro
    • nitroよく知らない
  • development kit: @nuxt/kit
    • プラグインなんかを作るときに使うのかな
  • nuxt 2 bridge: @nuxt/bridge
    • nuxt 2でnuxt 3の機能を使うためのモジュールらしい
Futa HirakobaFuta Hirakoba

Vue with Nuxt

  • 単一ファイルコンポーネント
  • components/ディレクトリにあるVueコンポーネントは利用するものだけ自動インポート
  • pages/ディレクトリと命名規則を使用してルーティングを自動で設定する

components/Welcome.vueを作ってapp.vueを以下のようにした。

app.vue
<template>
  <div>
    <Welcome />
  </div>
</template>

マジでインポートしなくても読み込んでくれた。

Futa HirakobaFuta Hirakoba

pages/index.vueとpages/hoge.vueを作った。app.vueを以下のようにするとpages/index.vueが表示された。

app.vue
<template>
  <div>
    <NuxtPage />
  </div>
</template>

また、pages/index.vueをルートのドキュメントと解釈してくれるみたいでapp.vueを消したらpages/index.vueの内容が表示された。

http://localhost:3000/hogeにアクセスするとちゃんとpages/hoge.vueが表示された。

Futa HirakobaFuta Hirakoba

lintおよびformatの設定についてはドキュメントで見つけられず。
Nuxt 2と同じようにすればよいのだろうか。ググるか

Futa HirakobaFuta Hirakoba

eslintにpages/index.vueがmulti-wordじゃないって怒られる件。

/Users/korosuke613/ghq/github.com/korosuke613/playground/javascript/nuxt3/quick_start/pages/index.vue
  1:1  error  Component name "index" should always be multi-word  vue/multi-word-component-names

pageなんだし許してほしい。eslintの設定でpages以下でこのルールを無効化したら良さそう。

Futa HirakobaFuta Hirakoba

こんな風にしてpages以下のvueファイルだけmulti-wordのルールを無効化した。

.eslintrc.js
...
  rules: {},
  overrides: [
    {
      files: ["pages/*.vue"], 
      rules: {
        "vue/multi-word-component-names": "off",
      },
    },
  ],
...
づだづだ

横から失礼します！
この方法思いつかなかったので、助かりました！

ネストされた pages に適応するために、files 指定は以下のようにする必要がありました！

eslintrc.js
...
  rules: {},
  overrides: [
    {
      files: ["**/pages/**/*.vue"], 
      rules: {
        "vue/multi-word-component-names": "off",
      },
    },
  ],
...
Futa HirakobaFuta Hirakoba

お〜それは良かったです！
ネスト対応版もお書きくださりありがとうございます😊

Futa HirakobaFuta Hirakoba

最終的な.eslintrc.js

.eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: 2021,
  },
  plugins: [],
  rules: {},
  overrides: [
    {
      files: ["pages/*.vue"],
      rules: {
        "vue/multi-word-component-names": "off",
      },
    },
  ],
};

最終的なdevDependencies

  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.22.0",
    "@typescript-eslint/parser": "^5.22.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "eslint": "^8.15.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.7.1",
    "nuxt": "3.0.0-rc.1",
    "prettier": "^2.6.2"
  }
Futa HirakobaFuta Hirakoba

stylelintも導入した。

.stylelintrc.js
module.exports = {
  "extends": ["stylelint-config-recommended", "stylelint-config-standard", "stylelint-config-recommended-vue"]
}

devDepnedenciesに以下を追加

    "stylelint": "^14.8.2",
    "stylelint-config-recommended": "^7.0.0",
    "stylelint-config-recommended-vue": "^1.4.0",
    "stylelint-config-standard": "^25.0.0"
このスクラップは2022/05/09にクローズされました