## 事象
以下のような[[Vue]]のファイルがある。
```html
<script setup lang="ts">
const name = ref("");
const result = ref("");
const { $bff } = useNuxtApp();
async function concurrentFetchUser() {
const results = await Promise.all([
$bff.fetchUser(name.value + "1"),
$bff.fetchUser(name.value + "2"),
$bff.fetchUser(name.value + "3"),
]);
result.value = results.map((r) => r.items?.[0].name).join(", ");
}
watch(name, async () => {
await concurrentFetchUser();
});
</script>
<template>
<div>
<input type="text" v-model="name" placeholder="Enter your name" />
<h3>{{ result }}</h3>
</div>
</template>
```
`:AerialOpen` コマンドを実行すると以下の表示になる。
```console
script
template
div
input
h3
```
間違ってはいないが、期待しているのは scriptタグ の中の[[TypeScript]]コードに対するシンボルが表示されることである。
### プラグイン設定
`plugins/aerial.lua`
```lua
return {
"stevearc/aerial.nvim",
opts = {
layout = {
-- default_direction = "float",
min_width = 50,
},
keymaps = {
["<ESC>"] = "actions.close",
["o"] = "actions.scroll",
},
highlight_on_hover = true,
close_on_select = true,
-- ネストは1階層まで
on_first_symbols = function(bufnr)
require("aerial").tree_set_collapse_level(bufnr, 1)
end,
-- tree_set_collapse_level が連動してしまうので必要
link_tree_to_folds = false,
-- 表示は上の方に
post_jump_cmd = "normal! zt",
},
dependencies = {
"nvim-treesitter/nvim-treesitter",
},
keys = {
{ "<C-j>o", ":AerialOpen<CR>", silent = true },
},
init = function()
vim.api.nvim_create_autocmd("ColorScheme", {
callback = function()
vim.api.nvim_set_hl(0, "AerialLine", { fg = "#efef33", bg = "#565612", bold = true })
end,
})
end,
}
```
### 環境
| 対象 | バージョン |
| --------------- | --------- |
| [[macOS]] | 15.7 |
| [[Neovim]] | 0.11.3 |
| [[aerial.nvim]] | `c7cbbad` |
## 原因
デフォルト設定では[[tree-sitter]]の結果が[[LSP]]よりも優先されるため。
> ```lua
> require("aerial").setup({
> -- Priority list of preferred backends for aerial.
> -- This can be a filetype map (see :help aerial-filetype-map)
> backends = { "treesitter", "lsp", "markdown", "asciidoc", "man" },
> ```
>
> [GitHub - stevearc/aerial.nvim: Neovim plugin for a code outline window](https://github.com/stevearc/aerial.nvim?tab=readme-ov-file#options)
[[Vue]]の[[LSP]] ([[vtsls]]) ではなく `vue` の[[tree-sitter]]設定が優先されてしまっていた。
## 解決方法
`backends` を設定し、[[LSPの結果をtreesitterより優先表示 (aerial.nvim)|LSPの結果をtreesitterより優先表示]]する。
`plugins/aerial.lua`
```lua
opts = {
-- 追加する
backends = { "lsp", "treesitter", "markdown", "asciidoc", "man" },
}
```
[[script setup]]が認識して中身が表示されるようになった。
```console
script setup
concurrentFetchUser
results.map() callback
watch() callback
template
```