Nuxt3 Betaをブラウザに立ち上げる【Nuxt3 × VSCodeセットアップ】
  • 2022.01.25に公開
  • Nuxt3
  • 0. Nuxt3
  • No.1 / 9
現在このカテゴリーは、Nuxt3パブリックベータ版の情報を公開しています。変更の可能性が大きくあるので、最新の情報は Nuxt3の公式サイト をご確認ください。

今回達成すること

ブラウザにNuxt3を立ち上げます。

2022-01-25 17-42-58

Nuxt3 インストール前の事前準備

1. Node.js

Node.jsの最新のLTS(安定)バージョンが必要です。

2022年1月現在では下記バージョンが必須です。

"^14.16.0 || ^16.11.0 || ^17.0.0".

ローカルのNode.jsのバージョンを確認の上、次のステップに進んでください。

2. エディタ

Nuxt3にはVSCodeが推奨されています。

VSCode ダウンロードリンク

3. Vue Language Features (Volar)(VSCode 拡張機能)のインストール

VSCodeにVue Language Features (Volar) をインストールします。

Vue Language Features (Volar)は、Vue3とTypeScriptの開発環境をサポートするVSCodeの拡張機能です。

その他にもシンタックスハイライトや、 HTMLタグの名前変更を自動化してくれる機能が備わっています。

参考: vitejs/vite - GitHub, Tips · johnsoncodehk/volar - GitHub

Nuxt2系ではエラーが発生するのでVolarはまだ有効にしないでください。

インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。ts(7026)

2022-01-25 15-24-28

Nuxt3のインストール

1. 作業ディレクトリの作成

作業ディレクトリを作成し、移動します。

% mkdir nuxt3 && cd $_

2. Nuxt3Betaのインストール

npxを使用し、Nuxt3のインストールコマンドを実行します。

% npx nuxi init <app name>

# 筆者の場合
% npx nuxi init test-nuxt-app
  • nuxi ... Nuxt3のスタブ(テスト用のまだ完成していない機能の代わりとなる部品)パッケージのインストールコマンド。

npxコマンドが使用できない場合

npmコマンドでグローバル(ローカルPC)にインストールできます。

% npm install -g npx

3. VSCodeでNuxtプロジェクトを開く

VSCodeのcodeコマンドでターミナルからプロジェクトを開きます。

% code <app name>

codeコマンドが使用できない場合

  1. VSCodeの検索バーを開く => Cmd + Shift + P
  2. 検索バーにshell commandと入力
  3. 「PATH内に'code'コマンドをインストールします」をクリック

2022-01-25 17-14-43

4. 依存関係のインストール

VSCodeのターミナルから、Nuxt3の依存関係(パッケージ)をインストールします。

% yarn install

...
success Saved lockfile.
✨  Done in 23.07s.

Nuxt3 × VSCodeセットアップ

VSCode上でCmd + Shift + Xを実行し、インストール済みの拡張機能を開きます。

1. Vue Language Features (Volar)を有効にする

インストールしたVue Language Featuresは、有効ワークスペース)にします。

2022-01-25 17-26-44

2. Veturを無効にする

Volarとの競合を避けるため、Veturを無効にする必要があります。

拡張機能のVeturが有効になっている場合は無効ワークスペース)にしてください。

2022-01-25 17-30-01

3. テイクオーバーモードを有効にする

Volarモードには問題があり、VSCodeのテイクオーバーモードを有効にする必要があります。

テイクオーバーモードはどのようにVolarモードの問題を解決しますか?

テイクオーバーモードは、VSCode組み込みのTypeScript拡張機能を使用せず、Vue + TS言語サポートを提供するためにVue言語サーバーのみを使用します。したがって、2つの言語サービスインスタンスしかありません。

このアプローチにはハッキングはありません。拡張機能が更新されるたびに、TSプラグインのvscodeをリロードする必要がなくなりました。

引用: https://github.com/johnsoncodehk/volar/discussions/471

拡張機能の検索バーから、「@builtin TypeScript and JavaScript Language Features」を検索します。

出力される「TypeScript and JavaScript Language Features」を無効ワークスペース)にします。

2022-01-25 17-38-09

以上でNuxt3とVSCodeの環境は整いました。

ブラウザでNuxt3を立ち上げる

VSCodeのターミナルから、Nuxt3サーバー起動コマンドにopenオプションを付けて実行します。

% yarn dev -o

localhost:3000にNuxt3が立ち上がりました。

2022-01-25 17-42-58

完。

補足: テイクオーバーモードの制限

テイクオーバーモードの制限は何ですか?

Vue言語サーバーはすべての組み込みTS拡張機能を提供しようとしますが、いくつかの機能が遅れたり、欠落したり、バグがあったりすることが常にあります。

Volarには、monorepoサポートに関する既知のパフォーマンスの問題があります。TSプロジェクトがmonorepoの場合、。tsでの言語サポートは以前より遅くなる可能性があります。*

TS拡張機能が無効になっていると、VolarはTS拡張機能の設定を取得できないため、VSCodeユーザーのTypeSciprt設定が機能しません。ただし、worksapceTypeSciprt設定は引き続き機能します。

引用: https://github.com/johnsoncodehk/volar/discussions/471

上記のように完全な設定ではありませんので、TypeScript and JavaScript Language Featuresを有効に戻すことも視野に入れてください。

その場合の代替え案として、TypeScript Vue Plugin (Volar) をダウンロードする方法も紹介されています。

参考: Nuxt 3 - Introduction

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。