An extension offering commands and tools
What does Nuxtr do?
Project directories and files creation
With just a few clicks or using commands and context menus, you can effortlessly create all the necessary directories and files for your Nuxt project, including Vue/TypeScript files, special files like
You can customize Vue file templates using the following settings:
And auto open the created file using:
Package Manager Detection: Detecting your package manager if a lock file exists. Or letting you choose which package manager to use with this setting. You can select your default package manager from the setting:
Dependency Removal and Upgrade/Downgrade: From sidebar inside project view, You can remove or upgrade/downgrade your dependencies by selecting which version you want to install.
Status Bar Icon: In your statusbar you can see your outdated dependencies and update them with few clicks.
IntelliSense and Auto Completion
Nuxtr VSCode offers a robust IntelliSense with focused support for Vue files, offering relative path completion from the pages directory for NuxtLinks and from the public or static directories for media resources, depending on your Nuxt version. Moreover, it offers IntelliSense for essential configuration files like
You can enable/disable IntelliSense from the settings:
Nuxi CLI Integration
The Nuxt CLI, also known as Nuxi, stands as an indispensable tool in the arsenal of every Nuxt developer. Nuxtr seamlessly incorporates this powerful CLI, allowing you to execute Nuxi commands right from the command palette. Under the
While it's entirely sensible to employ the CLI directly from your terminal, Nuxtr's inclusion will enhance your DX working with multiple terminals. It provides a structured approach to your terminal environment, categorizing commands based on their scope. This not only streamlines your workflow but also simplifies the process of adding modules, eliminating the need to recall or search for exact names.
Nuxt Snippets: You can use Nuxt snippets by typing
Nuxt Snippets is enabled by default. You can enable/disable them using this setting.
Nitro Snippets: Nitro is empoweing Nuxt Server Engine. Please, refer to Nitro Docs for more information.
Nitro Snippets is enabled by default. You can enable/disable them using this setting.
Custom Snippets: Easily manage your custom snippets from the sidebar. You can create, edit or delete your snippets.
More on this side of the extension is coming soon!
Vue File Templates
To provide users with greater flexibility in customizing their Vue files, we offer the ability to create and utilize personalized templates. These templates can be set as defaults or used selectively as per the user's preference.
We currently support two types of templates for ensuring a consistent user experience:
You can set your default template from these settings:
srcDir, serverDir and monorepo support
Or locate your nuxt project in your monorepo using this setting in
Run scripts from the VSCode command palette or sidebar
Main scripts are available from command palette, if you want to use a custom command you can find it in the sidebar. Besides
Toggle Nuxt Devtools from your status bar
Nuxt Devtools is a great tool! One of the great features it offer is working globally with your project if you are using Nuxt <= 3.4.0. You can toggle it from your status bar. Extension detects your Nuxt version and advices you to update if not.
Manual toggling from nuxt.config.ts is detected and state is synced.
Search and install Nuxt integrations
Almost full support for Nuxt modules with a typical searching/filters experience as Nuxt Modules directory. Once you have found your desired module and detected your package manager, it will be installed and added to the nuxt.config file. A success message will be displayed, along with a button to access the module documentation.
Starting from v0.1.0, you can filter integration types (modules/layers) from the sidebar.
Install & Configure CSS frameworks and Linters
You can install and configure most CSS frameworks with few steps:
Same for linters:
More coming soon.
MIT License © 2023.
We always welcome new ideas! 💚
Nuxtr VSCode relies on the following projects/repositories: