## 目的
以下の内容から『[[Neovim]]に関係なく、**型安全に[[Nuxt]]の開発をする部分**のみを抽出したスライドを作成する』ために、情報を整理する。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" />
<span class="link-card-v2-site-name">Minerva</span>
</div>
<div class="link-card-v2-title">
📘完全武装をしてNeovimでも安全で快適なNuxt3の開発をするのだ
</div>
<div class="link-card-v2-content">NeovimでNuxt3とTypeScriptを型安全かつ快適に開発するための設定方法を解説します。Auto-importsの無効化や未使用importの自動削除、未定義タグの検知、フォールスルー属性対応など、VSCodeやWebStormでは得られないNeovim特有の課題とその解決策を詳しく紹介しています。詳しい手順や設定例は記事でご確認ください。</div>
<img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/%F0%9F%93%98Articles/attachments/2024-07-26.webp" />
<a data-href="📘完全武装をしてNeovimでも安全で快適なNuxt3の開発をするのだ" class="internal-link"></a>
</div>
%%[[📘完全武装をしてNeovimでも安全で快適なNuxt3の開発をするのだ]]%%
特に
- [[Nuxt4]]を使う
- 上記を執筆以降に
- 新しく登場した実用的な新機能の導入を検討する
- 非推奨となっている箇所のフォロー
### 環境
| 対象 | バージョン |
| ------------------------------------------- | ------ |
| [[macOS]] | 15.7.2 |
| [[Bun]] | 1.3.5 |
| [[Neovim]] | 0.11.5 |
| [[vtsls]] | 0.3.0 |
| [[@vue language-server\|vue_ls]] | 3.2.2 |
| [[Vue - Official (VSCode)\|Vue - Official]] | 3.2.2 |
```
├── @fsouza/
[email protected]
├──
[email protected]
├──
[email protected]
├──
[email protected]
├──
[email protected]
└──
[email protected]
```
## プロジェクト作成
```console
toki nuxt nuxt4-sandbox
```
```
◇ Templates loaded
│
◇ Which template would you like to use?
│ minimal – Minimal setup for Nuxt 4
│
◇ Creating project in nuxt4-sandbox
│
◇ Downloaded minimal template
│
◇ Which package manager would you like to use?
│ bun
│
◇ Initialize git repository?
│ Yes
│
◇ Dependencies installed
│
◓ Initializing git repositoryInitialized empty Git repository in /Users/tadashi-aikawa/tmp/nuxt4-sandbox/.git/
◇ Git repository initialized
│
◇ Would you like to install any of the official modules?
│ No
│
└ ✨ Nuxt project has been created with the minimal template.
```
起動確認。
```console
cd nuxt4-sandbox
bun dev -o
```
### 初期ファイル作成
`app/app.vue`
```html
<template>
<NuxtPage />
</template>
```
`app/pages/top.vue`
```ts
<template>
<Header1 text="hello!" />
</template>
```
`app/components/Header1.vue`
```html
<script setup lang="ts">
defineProps<{
text: string;
}>();
</script>
<template>
<h1 v-text="text"></h1>
</template>
```