Nuxtr

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

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.

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.

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.

Install, remove and update project dependencies.

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

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.

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)