Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>NuxtrNew to Visual Studio Code? Get it now.
Nuxtr

Nuxtr

Nuxtr

|
967 installs
| (5) | Free
An extension for Nuxt.js offering commands and tools to make your experience with Nuxt.js more pleasant.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

What does Nuxtr do?

Nuxtr VSCode extension offers a set of commands and tools to help with your Nuxt.js development workflow. You can create items (components, pages, layouts, stores, etc.), run Nuxt.js commands from the VSCode command palette. Toggle Nuxt Devtools from your status bar, manage your Nuxt.js project dependencies, find, install and add your modules to nuxt.config.ts files with one click and more.


Features

  • Create Nuxt project directories
  • Create Nuxt.js files
  • Open Nuxt.js Docs.
  • Installing dependencies.
  • Run scripts from the VSCode command palette or sidebar
  • Toggle Nuxt Devtools from your status bar
  • Install, remove and update project dependencies.
  • Search and install nuxt modules.
  • Install and Configure most CSS frameworks with few steps. (TailwindCSS, WindiCSS, UnoCSS, and more coming soon)


Create Nuxt project directories

Nuxt Project Creation



Create Nuxt.js files

You can create all kind of files that Nuxt.js needs (Vue/TypeScript) and special files like .nuxtignore and app.config.ts files. Flat/sub directories structure are supported too.

Nuxt Files Creation

You can customize Vue file templates using the following settings:

  "nuxtr.vueFiles.firstTag": "template",
  "nuxtr.vueFiles.script.type": "setup",
  "nuxtr.vueFiles.style.addStyleTag": true,
  "nuxtr.vueFiles.style.alwaysScoped": true,
  "nuxtr.vueFiles.style.defaultLanguage": "scss"


Installing dependencies

Detecting your package manager if a lock file exists. Or letting you choose which package manager to use.



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.

Nuxt Scripts



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.js version and advices you to update if not.

Manual toggling from nuxt.config.ts is detected and state is synced.

Nuxt Devtools



Install, remove and update project dependencies.

You can remove or update your dependencies by selecting which version you want to install.

Nuxt Dependencies



Search and install nuxt modules.

Almost full support for Nuxt modules with typical searching/filters experience as Nuxt Modules directory. Once you found your wanted module, clicking install will install using the right flag (normal/dev) after detecting your package manager, add them to nuxt.config.ts and showing you a success message with a button to the module docs.

Nuxt Modules



Install and Configure most CSS frameworks with few steps

You can configure most CSS frameworks with few steps. (TailwindCSS, WindiCSS, UnoCSS, and more coming soon)

Nuxt CSS Frameworks

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft