{"id":13539818,"url":"https://github.com/nuxtrdev/nuxtr-vscode","last_synced_at":"2025-04-09T06:11:19.150Z","repository":{"id":159525434,"uuid":"634258174","full_name":"nuxtrdev/nuxtr-vscode","owner":"nuxtrdev","description":"An extension offering commands and tools to make your experience with Nuxt more pleasant.","archived":false,"fork":false,"pushed_at":"2024-09-22T22:01:49.000Z","size":41521,"stargazers_count":356,"open_issues_count":17,"forks_count":17,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-02T04:07:03.449Z","etag":null,"topics":["developer-tool","nuxt","nuxtjs","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=Nuxtr.nuxtr-vscode","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nuxtrdev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-29T14:53:05.000Z","updated_at":"2025-03-12T15:24:56.000Z","dependencies_parsed_at":"2023-10-20T18:32:37.368Z","dependency_job_id":"b5207348-1b31-413b-a67a-fe3882cf9dbe","html_url":"https://github.com/nuxtrdev/nuxtr-vscode","commit_stats":{"total_commits":199,"total_committers":4,"mean_commits":49.75,"dds":0.02010050251256279,"last_synced_commit":"cc48b77b9eb5066a11e1ae4a48a9ef09c9458e23"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxtrdev%2Fnuxtr-vscode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxtrdev%2Fnuxtr-vscode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxtrdev%2Fnuxtr-vscode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuxtrdev%2Fnuxtr-vscode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuxtrdev","download_url":"https://codeload.github.com/nuxtrdev/nuxtr-vscode/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247987285,"owners_count":21028895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developer-tool","nuxt","nuxtjs","vscode","vscode-extension"],"created_at":"2024-08-01T09:01:32.368Z","updated_at":"2025-04-09T06:11:19.126Z","avatar_url":"https://github.com/nuxtrdev.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cbr /\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/nuxtrdev/nuxtr-vscode/main/.github/media/logo.png\" alt=\"Logo\" width=\"80\" height=\"80\"\u003e\n    \u003ch3 align=\"center\"\u003eNuxtr VSCode\u003c/h3\u003e\n    \u003cp align=\"center\"\u003eAn extension offering commands and tools \u003cbr /\u003e to make your experience with Nuxt more pleasant!\u003c/p\u003e\n    \u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=Nuxtr.nuxtr-vscode\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/visual-studio-marketplace/v/Nuxtr.nuxtr-vscode.svg?color=blue\u0026label=VS%20Code%20Marketplace\u0026logo=visual-studio-code\" alt=\"Visual Studio Marketplace Version\" /\u003e\u003c/a\u003e\n        \u003ca href=\"https://marketplace.visualstudio.com/items?itemName=Nuxtr.nuxtr-vscode\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/visual-studio-marketplace/i/Nuxtr.nuxtr-vscode?color=blue\u0026label=Installs\u0026logo=visual-studio-code\" alt=\"Visual Studio Marketplace Installs\" /\u003e\u003c/a\u003e\n    \u003c/div\u003e\n    \u003cbr\u003e\n    \u003cdiv align=\"center\"\u003e\n        \u003ca target=\"_blank\" href=\"https://github.com/nuxtrdev/nuxtr-vscode/issues/new?assignees=\u0026labels=bug%2Ctriage\u0026projects=\u0026template=issue.yaml\u0026title=%5BBug%5D%3A+\"\u003e\u003cstrong\u003eReport Bug\u003c/strong\u003e »\u003c/a\u003e\n        ·\n        \u003ca target=\"_blank\" href=\"https://github.com/nuxtrdev/nuxtr-vscode/discussions/new/choose\"\u003e\u003cstrong\u003eShare Idea/feedback\u003c/strong\u003e »\u003c/a\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n\n\n\u003cbr\u003e\n\n### What does Nuxtr do?\n\n- [Project Creation](#project-creation)\n- [Directory and File Creation](#directory-and-file-creation)\n- [Dependencies management](#dependencies-management)\n- [IntelliSense and Auto Completion](#intellisense-and-auto-completion)\n- [Nuxi CLI Integration](#nuxi-cli-integration)\n- [Nuxt, Nitro and Custom Snippets](#nuxt-nitro-and-custom-snippets)\n- [Personalized Vue File Templates](#personalized-vue-file-templates)\n- [Support for `srcDir`, `serverDir`, and Monorepo Projects](#support-for-srcdir-serverdir-and-monorepo-projects)\n- [Execute Scripts with Ease](#execute-scripts-with-ease)\n- [Toggle Nuxt Devtools from your status bar](#toggle-nuxt-devtools-from-your-status-bar)\n- [Search and install Nuxt integrations](#search-and-install-nuxt-integrations)\n- [Install \\\u0026 Configure CSS frameworks and Linters](#install--configure-css-frameworks-and-linters)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Project Creation\n\nUsing `Nuxtr: Create Nuxt project` command, you can create a new Nuxt project with a few steps. You can choose a project starter from [Nuxt Startes](https://nuxt.new) or you can add your own project started:\n\n```JSON\n\"nuxtr.projectTemplates\": [\n    {\n        \"name\": \"Vitesse\",\n        \"description\": \" Vitesse for Nuxt 3 🏔💚⚡️ \",\n        \"repoURL\": \"https://github.com/antfu/vitesse-nuxt3\",\n        \"branch\": \"main\", // Optional\n    },\n],\n```\n\n\u003cbr\u003e\n\n### Directory and File Creation\n\nEffortlessly generate all essential directories and files for your Nuxt project right from within VSCode. Utilize the command palette  or context menus to swiftly create Vue/TypeScript files, as well as special files like [`.nuxtignore`](https://nuxt.com/docs/guide/directory-structure/nuxtignore), [`.nuxtrc`](https://nuxt.com/docs/api/configuration/nuxt-config), and [`app.config.ts`](https://nuxt.com/docs/guide/directory-structure/app-config).\n\nTo initiate any creation action, simply prepend it with the prefix **`Nuxtr: Create...`** and **`Nuxtr: Nuxt project structure...`** command for creating the entire project structure.\n\nCustomize Vue file templates with these settings:\n\n```JSON\n\"nuxtr.vueFiles.template.defaultLanguage\": \"html\",\n\"nuxtr.vueFiles.firstTag\": \"template\",\n\"nuxtr.vueFiles.script.type\": \"setup\",\n\"nuxtr.vueFiles.script.defaultLanguage\": \"ts\",\n\"nuxtr.vueFiles.style.addStyleTag\": true,\n\"nuxtr.vueFiles.style.alwaysScoped\": true,\n\"nuxtr.vueFiles.style.defaultLanguage\": \"scss\",\n\"nuxtr.piniaFiles.defaultTemplate\": \"options\"\n```\n\nAdditionally, you can choose to automatically open the newly created file with:\n\n```JSON\n\"nuxtr.openItemsAfterCreation\": true\n```\n\n![Nuxt Project Creation](https://raw.githubusercontent.com/nuxtrdev/nuxtr-vscode/main/.github/media/file_creation.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Dependencies management\n\n**Package Manager Detection**: Your package manager is automatically detected if a lock file exists. Alternatively, you can specify which package manager to use with the following setting:\n\n```JSON\n\"nuxtr.defaultPackageManager\": \"pnpm\"\n```\n\n**Dependencies Management**: Within the sidebar of the project view, easily remove, upgrade, or downgrade your dependencies by selecting the desired version.\n\n**Status Bar Icon**: Keep an eye on your outdated dependencies directly from the status bar. With just a few clicks, you can initiate the update process.\n\n\u003cbr\u003e\n\n![Nuxt Dependencies](https://raw.githubusercontent.com/nuxtrdev/nuxtr-vscode/main/.github/media/dependencies.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### IntelliSense and Auto Completion\n\nNuxtr offers robust IntelliSense capabilities tailored for Vue files. This includes dynamic path completion for [NuxtLinks](https://nuxt.com/docs/api/components/nuxt-link#internal-routing) within the pages directory, and seamless handling of media resources from the [public or static directories](https://nuxt.com/docs/guide/directory-structure/public), depending on your Nuxt version. Additionally, enjoy IntelliSense support for critical configuration files like [`.nuxtignore`](https://nuxt.com/docs/guide/directory-structure/nuxtignore) and [`.nuxtrc`](https://nuxt.com/docs/guide/directory-structure/nuxtrc), ensuring precise guidance and efficient coding.\n\nYou can enable/disable IntelliSense from the settings:\n\n```JSON\n \"nuxtr.intellisense.nuxtrc\": true,\n \"nuxtr.intellisense.vueFiles\": true,\n \"nuxtr.intellisense.nuxtignore\": true,\n```\n\n![IntelliSense](https://raw.githubusercontent.com/nuxtrdev/nuxtr-vscode/main/.github/media/intellisense.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Nuxi CLI Integration\n\nThe Nuxt CLI, also known as [Nuxi](https://github.com/nuxt/cli), is an essential tool for every Nuxt developer. Seamlessly integrated into Nuxtr, it enables you to effortlessly execute Nuxi commands directly from the command palette. Under the `Nuxtr: Run` prefix, you'll discover a curated set of frequently used commands at your fingertips. Additionally, you can access the complete list of Nuxi commands through the `Nuxtr: Nuxi CLI` command.\n\nWhile using the CLI directly from your terminal is perfectly viable, Nuxtr's integration enhances your development experience, especially when working with multiple terminals. It introduces 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.\n\n\n![Nuxi CLI](https://raw.githubusercontent.com/nuxtrdev/nuxtr-vscode/main/.github/media/nuxi.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Nuxt, Nitro and Custom Snippets\n\n**Nuxt Snippets**: Enhance your development speed with Nuxt snippets. Simply type `nuxt` for components, `use` for Composables, or begin typing Nuxt utilities and select your desired snippet from the list.\n\nStarting 0.2.10, you can inject a dynamic snippet based on your Nuxtr Vue files configuration with `vueBase` or `vueBaseLayout`.\n\nNuxt Snippets are enabled by default. You can toggle them on or off using this setting:\n\n```JSON\n \"nuxtr.snippets.nuxt\": true\n```\n\n**Nitro Snippets**: Nitro powers the Nuxt Server Engine. For detailed information, refer to the [Nitro Docs](https://nitro.unjs.io).\n\nNitro Snippets are enabled by default. You can customize their behavior using this setting:\n\n```JSON\n \"nuxtr.snippets.nitro\": true\n```\n\n**Custom Snippets**: Easily manage your custom snippets directly from the sidebar. Create, edit, or delete your snippets with ease. Stay tuned for more updates on this feature!\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Personalized Vue File Templates\n\nIn order to offer users greater flexibility in tailoring their Vue files, we provide the capability to create and utilize personalized templates. These templates can be set as defaults or used selectively based on the user's preference.\n\nWe currently support two types of templates to ensure a consistent user experience: `.page-template` and `.layout-template`. When Nuxt is loaded, these files are treated as regular Vue files, simplifying the editing process. Templates can be created from existing respective files via the context menu or from empty templates accessed in the sidebar.\n\nSet your default template with these settings:\n\n```JSON\n\"nuxtr.vueFiles.pages.defaultTemplate\": \"default.page-template\",\n\"nuxtr.vueFiles.layouts.defaultTemplate\": \"default.layout-template\"\n```\n\n![File Templates](https://raw.githubusercontent.com/nuxtrdev/nuxtr-vscode/main/.github/media/file_templates.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Support for `srcDir`, `serverDir`, and Monorepo Projects\n\n\u003e **Note:** Monorepo mode is under heavy development.\n\nNuxtr seamlessly integrates with projects using `srcDir` and `serverDir`, as well as monorepo setups. Set your `srcDir` or `serverDir` directly from your `nuxt.config.ts` file, and Nuxtr will detect and generate files/directories in the correct locations for you.\n\nExample:\n\n```JSON\n  \"srcDir\": \"src\",\n  \"serverDir\": \"server\"\n```\n\nFor monorepo configurations, specify the directory name containing your Nuxt project in your `.vscode/settings.json`:\n\n```JSON\n  \"nuxtr.monorepoMode.DirectoryName\": \"directory-name\"\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Execute Scripts with Ease\n\nAccess main scripts directly from the command palette for swift execution. Should you require a custom command, you can conveniently locate it in the sidebar. With the exception of nuxt dev, all other commands operate in the background, and you can monitor the output in the VSCode output channel.\n\n![Nuxt Scripts](https://raw.githubusercontent.com/nuxtrdev/nuxtr-vscode/main/.github/media/scripts.png)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Toggle Nuxt Devtools from your status bar\n\n[Nuxt Devtools](https://devtools.nuxtjs.org/) empowers you to make informed decisions about your project. Provides invaluable insights and transparency for your Nuxt application. Uncover performance gaps and effortlessly fine-tune your app configurations and more!\n\n Nuxtr offers a toggle directly in your VSCode statusbar. Manual toggling from nuxt.config.ts is also detected and state is synced.\n\n![Nuxt Devtools](https://raw.githubusercontent.com/nuxtrdev/nuxtr-vscode/main/.github/media/devtools.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Search and install Nuxt integrations\n\nEffortlessly search for and install Nuxt modules, mirroring the familiar experience of the [Nuxt Modules](https://nuxt.com/modules) directory. Once you've located your desired module and your package manager is detected, it will be seamlessly integrated into your nuxt.config file. A success message will confirm the installation, along with a quick link to access the module documentation.\n\n\nSearch and Install Nuxt modules with a typical searching/filters experience as [Nuxt Modules](https://nuxt.com/modules) directory. Once you have found your desired module and your package manager is detected, 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.\n\nStarting from v0.1.0, you can filter integration types (modules/layers) from the sidebar.\n\n![Nuxt Modules](https://raw.githubusercontent.com/nuxtrdev/nuxtr-vscode/main/.github/media/modules.gif)\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n### Install \u0026 Configure UI Libraries, CSS frameworks, and Linters\n\n- UI Frameworks: [Vuetify](https://nuxt.com/modules/vuetify-nuxt-module).\n- CSS Frameworks: [Tailwind CSS](https://tailwindcss.nuxtjs.org) and [UnoCSS](https://unocss.dev/integrations/nuxt).\n- Linters: [`Eslint`](https://eslint.nuxt.com) and [`stylelint`](https://nuxt.com/modules/stylelint).\n\nAnd more coming soon.\n\n\u003cbr\u003e\n\n![Nuxt Modules](https://raw.githubusercontent.com/nuxtrdev/nuxtr-vscode/main/.github/media/css_frameworks.gif)\n\n\u003cbr\u003e\n\n### Contributing\n\nWe always welcome new ideas! 💚 \u003cbr\u003e\nIf you have any idea, feel free to [open a discussion](https://github.com/nuxtrdev/nuxtr-vscode/discussions/new/choose) first and let's talk about it!\n\n\u003cbr\u003e\n\n### Acknowledgements\n\nNuxtr relies on the following projects/repositories:\n\n- [Nuxt Modules](https://github.com/nuxt/modules)\n- [Nuxt Assets](https://github.com/nuxt/assets)\n- [Tabler Icons](https://tablericons.com/)\n\n\u003cbr\u003e\n\n### License\n\n[MIT](https://raw.githubusercontent.com/nuxtrdev/nuxtr-vscode/main/LICENSE) License © 2023 with 💚\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxtrdev%2Fnuxtr-vscode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuxtrdev%2Fnuxtr-vscode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuxtrdev%2Fnuxtr-vscode/lists"}