## 要件
できるだけ早い段階で不正タグ(typo/import忘れ)に気づけること。
| タイミング | 評価 | 備考 |
| -------------- | ---- | -------------------------------------- |
| コーディング時 | ◎ | [[Neovim]]にて |
| サーバー起動 | 〇 | `bun dev` |
| 型チェック時 | △ | `nuxt typecheck` ([[vue-tsc]] v2.0.28) |
| ビルド時 | △ | `nuxt generate` |
| 実行時 | × | [[Google Chrome]]にて |
## ベースプロジェクトの作成
```
+
[email protected]
+
[email protected]
```
```console
bun x nuxi@latest init nuxt-sandbox
cd nuxt-sandbox
bun add --optional typescript
mkdir pages components
bun add -D @fsouza/prettierd prettier-plugin-organize-imports
cat >.prettierrc.json <<'EOF'
{
"plugins": ["prettier-plugin-organize-imports"]
}
EOF
```
`components/Hello.vue`
```html
<script setup lang="ts">
defineProps<{
message: string;
}>();
</script>
<template>
<h1>Hello! {{ message }}</h1>
</template>
```
## 開発環境
```
NVIM v0.10.0
nvim-lspconfig fa6c2a6
vue-language-server 2.0.28
typescript 5.5.4
Bun 1.1.20
```
[[Hybrid Mode]]は使っていない。
`init.lua`
```lua
-- VueだけでなくTypeScriptやReactもVolarを使う
lspconfig.volar.setup({
capabilities = capabilities,
filetypes = { "typescript", "javascript", "javascriptreact", "typescriptreact", "vue" },
init_options = {
vue = {
hybridMode = false,
},
},
})
```
# auto importあり (default)
## デフォルト
`nuxt.config.ts`
```ts
export default defineNuxtConfig({
compatibilityDate: '2024-04-03',
devtools: { enabled: true }
})
```
`tsconfig.json`
```json
{
"extends": "./.nuxt/tsconfig.json"
}
```
### importなし
`pages/top.vue`
```html
<template>
<Hello message="hogehoge" />
</template>
```
| アクション | 結果 | 備考 |
| -------------- | -------------------- | ------------------------------------------- |
| コードジャンプ | `components.d.ts` へ | [[Auto-imports (Nuxt)\|Auto-imports]]が発動 |
| diagnostics | なし | |
| ホットリロード | OK | |
| nuxt typecheck | OK | |
| generate | OK | |
| ページの表示 | OK | |
### importあり
`pages/top.vue`
```html
<script setup lang="ts">
import Hello from "~/components/Hello.vue";
</script>
<template>
<Hello message="hogehoge" />
</template>
```
| アクション | 結果 | 備考 |
| -------------- | ------------------------ | --- |
| コードジャンプ | `components/Hello.vue` へ | |
| diagnostics | なし | |
| ホットリロード | OK | |
| nuxt typecheck | OK | |
| generate | OK | |
| ページの表示 | OK | |
## 不正なコンポーネントタグ
`nuxt.config.ts`
```ts
export default defineNuxtConfig({
compatibilityDate: '2024-04-03',
devtools: { enabled: true }
})
```
`tsconfig.json`
```json
{
"extends": "./.nuxt/tsconfig.json"
}
```
### 標準
`pages/top.vue`
```html
<template>
<Hellooo message="hogehoge" />
</template>
```
気づくことはできるが、WARN止まりなのに加え、エディタやCI/ビルド時には拾えなさそう。
| アクション | 結果 | 備考 |
| -------------- | --------------- | --- |
| コードジャンプ | できない | |
| diagnostics | なし | |
| サーバー起動 | なし | |
| nuxt typecheck | OK | |
| generate | OK | |
| ページの表示 | **WARN** (動かない) | |
### strictTemplates
[[tsconfig.json]]に[[vueCompilerOptions.strictTemplates]]を追加。
`tsconfig.json`
```json
{
"extends": "./.nuxt/tsconfig.json",
"vueCompilerOptions": {
"strictTemplates": true
}
}
```
`pages/top.vue`
```html
<template>
<Hellooo message="hogehoge" />
</template>
```
ちゃんとエラーになる。
```error
Property 'Hellooo' does not exist on type '{}'. ts (2339) [2, 4]
```
| アクション | 結果 | 備考 |
| -------------- | --------------- | --- |
| コードジャンプ | できない | |
| diagnostics | **ERROR** | |
| サーバー起動 | なし | |
| nuxt typecheck | **ERROR** | |
| generate | OK | |
| ページの表示 | **WARN** (動かない) | |