【ゼロから学ぶNuxt3×Typescript】①セッティング〜ファイル作成

## Nuxt３×TypeScript 学習
参考サイトを見ながら、アプリケーションを作成します。

▼　神回|vue3.js nuxt3 typescriptどうやる？【ゼロから解説】

https://field.asia/%E7%A5%9E%E5%9B%9Evue3-js-nuxt3-typescript%E3%81%A9%E3%81%86%E3%82%84%E3%82%8B%EF%BC%9F%E3%80%90%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E8%A7%A3%E8%AA%AC%E3%80%91/

求人ページのリニューアルを行う過程を解説してくださっています。
Nuxt3やTypescriptの記法、layout、糖衣構文などが学べます。

不明点、初めてみるエラーなど、ひとつひとつ調べながら手を動かしています。
補足や間違っている点などあれば、ぜひコメントでご指導いただければと思います。

では始めましょう🔥

### 1.node設定
まず、参考サイトでは16.11.0を使用するとのことなので合わせてみる。

```
// インストール可能なバージョンを確認
$ nodebrew ls-remote

// 必要な環境を自動でセットアップしてくれるように
$ nodebrew setup

// バージョンを指定してインストール
$ nodebrew install-binary v16.11.0

// インストールされたか確認
$ nodebrew ls

//　バージョン切り替え
$ nodebrew use v16.11.0
```


### 2.セットアップ
```
$ npx nuxi init study-nuxt3
$ cd study-nuxt3
$ yarn
```
ここでエラーが出た。

``` 
error execa@7.2.0: The engine "node" is incompatible with this module. Expected version "^14.18.0 || ^16.14.0 || >=18.0.0". Got "16.11.0"
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
```

翻訳してみる。
> エラー execa@7.2.0: エンジン「ノード」はこのモジュールと互換性がありません。予期されるバージョン「^14.18.0 || ^16.14.0 || >=18.0.0」。 「16.11.0」を取得しました
エラー 互換性のないモジュールが見つかりました。
info このコマンドに関するドキュメントについては、https://yarnpkg.com/en/docs/cli/install にアクセスしてください。

execa@7.2.0とnodeの互換性がない

ちなみにexecaとは、
Node.jsアプリケーションで外部のプロセスを簡単に実行するためのライブラリ。（GPTによると）

安定版の最新v20.10.0を使うことにする。

``` 
// 安定版をインストール
$ nodebrew install-binary stable

// インストールされたか確認
$ nodebrew ls

//　バージョン切り替え
$ nodebrew use v20.10.0

```

もう一度yarnする

``` 
$ yarn
$ yarn dev
```
これで、http://localhost:3000 でアクセスできるようになった！
![FireShot Capture 001 - Welcome to Nuxt! - localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3524465/faf0a70f-9086-49c9-1121-057d1bdc8709.png)

### Typescriptをインストール
```
$ yarn nuxi typecheck
　　Need to install the following packages:
　　vue-tsc@1.8.25
　　typescript@5.3.3
　　Ok to proceed? (y)
// インストールを続行しても良いか聞かれたのでyを押した
```

### ファイルを作成する
>rootディレクトリにpagesというディレクトリを作り
その中にindex.vueとabout.vueを作る

ここでポップアップが出た
```
❗ Use volar-service-vetur instead of Vetur
 // 訳)Vetur の代わりに volar-service-vetur を使用してください `
```
> Volar プラグインを使わずに、代わりに volar-service-vetur を使用することが推奨されている

調べながらvolar-service-veturをインストール

1.　VSCodeの拡張機能からVolarとVeturを削除
２.volar-service-vetur のインストール
```
yarn add --dev volar-service-vetur
```
3.VSCodeを再起動
４.プロジェクトのルートディレクトリで次のコマンドを実行
```
npx vue-tsc --init
```
vue-tscとは、VolarをベースにしたTypescriptの型チェックツールとのこと。
tsc単体では.vueファイルをコンパイルできないが、vue-tscは template内も含めてチェックがおこなえる。

https://tech.visasq.com/introduce-vue-tsc/

https://ja.vuejs.org/guide/typescript/overview#:~:text=vue%2Dtsc%20%E3%81%AF%20TypeScript%20%E7%8B%AC%E8%87%AA,%E3%82%88%E3%81%86%E3%81%AB%E5%8B%95%E4%BD%9C%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

5.Volar サービスの設定
ルートディレクトリに volar.config.js を作成
```
// volar.config.js
import { defineConfig } from 'volar'

export default defineConfig({
  // カスタムのVolar設定を追加することができます
})
```
Volar サービスがプロジェクトで有効になる。

VSCodeを再起動する。

---

改めてファイルを作成した後から作業をする。
・rootディレクトリのapp.vue

``` vue
<template>
  <NuxtPage />
</template>
```

・index.vue
```vue
<template>
    <h1>This is index Page</h1>
</template>
```

・about.vue
```vue
<template>
    <h1>This is about Page</h1>
</template>
```

下記を開くと、indexページとaboutページの確認ができる。
http://localhost:3000/
http://localhost:3000/about/

### 第一回はここまで
Nuxt3のプロジェクト作成、Typescriptのインストールができるようになりました。


Nuxt2まではプロジェクト作成にあたって、ライブラリやレンダリングをどうするか？といった質問に答え、それをもとに設定されていました。
一方、Nuxt３はコマンド一つですぐに完結してとても速いですね。

次回はcomponentを作成します。

### 参考サイト
https://field.asia/%E7%A5%9E%E5%9B%9Evue3-js-nuxt3-typescript%E3%81%A9%E3%81%86%E3%82%84%E3%82%8B%EF%BC%9F%E3%80%90%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E8%A7%A3%E8%AA%AC%E3%80%91/

https://handson.vuejs-jp.org/

https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09