A VSCode extension designed to enhance the developer experience for Nuxt projects by providing tools for auto-locating and navigating to auto-imported components, functions, routes and more.
Motivation
The goal is to enhance the developer experience for Nuxt projects, making developers more productive and efficient.
Features
Configuration
We recommend to set editor.gotoLocation.multipleDefinitions to goto for better experience. By this, it will automatically navigate to the file.
Settings
"configuration": {
"title": "Nuxt DX Tools",
"properties": {
"nuxtDxTools.api.hover.enable": {
"type": "boolean",
"default": true,
"description": "Enable/disable hover on nitro APIs extension."
},
"nuxtDxTools.api.functions": {
"type": "array",
"default": ["$fetch", "useFetch"],
"description": "List of functions to be considered as nitro APIs."
}
}
}
Examples
Auto-locate server apis:
- These are all supported syntaxes, once you hover you will be able to see the first 3 lines of the API file
$fetch('/api/myapi');
useFetch('/api/myapi')
$fetch('/api/change', {
method: 'POST',
body: JSON.stringify({ name: 'test' }),
})
$fetch('/api/change', {
method: 'GET',
body: JSON.stringify({ name: 'test' }),
})
$fetch('/api/change')
const id = 1;
$fetch(`/api/blog/` + id)
$fetch('/api/blog/' + id)
$fetch("/api/blog/" + id)
$fetch(`/api/blog/${id}`)
$fetch(`/api/blog/${id}/my-slug`)
$fetch("/api/blog/" + id + '/new')
$fetch("/api/blog/" + id + '/' + id)
useFetch('/api/blog/' + id + '/my-blog-slug/and-more')
$fetch.raw('/api/change')
$fetch.raw('/api/change', {
method: 'POST',
body: JSON.stringify({ name: 'test' }),
})
Hover
Peek
Possible Improvements
- This extension can also support standalone nitro projects where just the backend.
- References
| |