You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
-[Run scripts from the VSCode command palette or sidebar.](#run-scripts-from-the-vscode-command-palette-or-sidebar)
14
-
-[Toggle Nuxt Devtools from your status bar.](#toggle-nuxt-devtools-from-your-status-bar)
15
-
-[Install, remove and update project dependencies.](#install-remove-and-update-project-dependencies)
16
-
-[Search and install nuxt modules.](#search-and-install-nuxt-modules)
17
-
-[Install and Configure most CSS frameworks with few steps. (TailwindCSS, WindiCSS, UnoCSS, and more coming soon)](#install-and-configure-most-css-frameworks-with-few-steps)
-[Run scripts from the VSCode command palette or sidebar.](#run-scripts-from-the-vscode-command-palette-or-sidebar)
45
+
-[Toggle Nuxt Devtools from your status bar](#toggle-nuxt-devtools-from-your-status-bar)
46
+
-[Search and install Nuxt integrations](#search-and-install-nuxt-integrations)
47
+
-[Install & Configure CSS frameworks and Linters](#install--configure-css-frameworks-and-linters)
30
48
31
49
<br>
32
50
<br>
33
51
34
-
### Create Nuxt.js files
35
-
You can create all kind of files that Nuxt.js needs (Vue/TypeScript) and special files like [`.nuxtignore`](https://nuxt.com/docs/guide/directory-structure/nuxtignore) and [`app.config.ts`](https://nuxt.com/docs/guide/directory-structure/app-config) files using commands or context menus on each directory. Flat/sub directories structure are supported too.
52
+
### Project directories and files creation
53
+
54
+
With just a few clicks or using commands and context menus, you can effortlessly create all the necessary directories and files for your Nuxt.js project, including Vue/TypeScript files, special files like [`.nuxtignore`](https://nuxt.com/docs/guide/directory-structure/nuxtignore), and [`app.config.ts`](https://nuxt.com/docs/guide/directory-structure/app-config). The flexibility extends to supporting both flat and subdirectory structures.
Detecting your package manager if a lock file exists. Or letting you choose which package manager to use with this setting
80
+
**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:
61
81
62
82
```JSON
63
-
"nuxtr.defaultPackageManager": "yarn"
83
+
"nuxtr.defaultPackageManager": "pnpm"
64
84
```
65
85
86
+
**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.
87
+
88
+
**Status Bar Icon**: In your statusbar you can see your outdated dependencies and update them with few clicks.
### Run scripts from the VSCode command palette or sidebar.
70
-
Main scripts are available from command palette, if you want to use a custom command you can find it in the sidebar.
71
98
72
-
99
+
### Nuxt/Custom Snippets
100
+
101
+
**Nuxt Snippets**: You can use Nuxt snippets by typing `nuxt` for components, `use` for Composables or just start typing Nuxt utils and selecting your snippet from the list.
102
+
103
+
**Custom Snippets**: Easily manage your custom snippets from the sidebar. You can create, edit or delete your snippets.
104
+
105
+
More on this side of the extension is coming soon!
106
+
107
+
73
108
74
109
75
110
<br>
76
111
<br>
77
112
78
-
### Toggle Nuxt Devtools from your status bar
79
-
[Nuxt Devtools](https://devtools.nuxtjs.org/) 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.
113
+
### Vue File Templates
80
114
81
-
Manual toggling from nuxt.config.ts is detected and state is synced.
115
+
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.
82
116
83
-
117
+
We currently support two types of templates for ensuring a consistent user experience: `.page-template` and `.layout-template`. When Nuxt.js is loaded, these files are treated as regular Vue files, simplifying the editing process. Templates creation can be done from existing respective files via context menu item or empty templates from sidebar.
118
+
119
+
You can set your default template from these settings:
Main scripts are available from command palette, if you want to use a custom command you can find it in the sidebar. Besides `nuxt dev` command, all other commands run in the background and you can see the output in the VSCode output channel.
94
135
136
+
137
+
138
+
<br>
139
+
<br>
95
140
141
+
### Toggle Nuxt Devtools from your status bar
142
+
143
+
[Nuxt Devtools](https://devtools.nuxtjs.org/) 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.
144
+
145
+
Manual toggling from nuxt.config.ts is detected and state is synced.
146
+
147
+
96
148
97
149
<br>
98
150
<br>
99
151
100
-
### Search and install nuxt modules.
101
152
102
-
Almost full support for Nuxt modules with typical searching/filters experience as [Nuxt Modules directory](https://nuxt.com/modules). 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.
153
+
### Search and install Nuxt integrations
103
154
104
-
155
+
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.
105
156
157
+
Starting from v0.1.0, you can filter integration types (modules/layers) from the sidebar.
158
+
159
+
106
160
107
161
<br>
108
162
<br>
109
163
110
-
### Install and Configure most CSS frameworks with few steps
164
+
### Install & Configure CSS frameworks and Linters
111
165
112
-
You can install and configure most CSS frameworks with few steps.
166
+
You can install and configure most CSS frameworks with few steps:
0 commit comments