[Question] Little help with VSCode API

[angelhdzmultimedia]

👋 Hello thanks for this extension, life saver!!! 🔥🎉

I need a little help with VSCode API.

I'm using Nuxt (Vue) and new to create some templates/schematic like pages, components, server api, etc.

But I don't know how to use the VSCode API from this extension.

https://code.visualstudio.com/api/references/commands

I have this:

{
          "name": "Nuxt Page (Layer)",
          "useVsCodeApi": true,
          "command": "vscode.workbench.action.createTemplateFile",
          // ⚠️ IMPORTANT: Replace 'workbench.action.createTemplateFile' with the actual 
          // command ID from your Nuxt scaffolding or file creation extension.
          // This command must accept the full file path (e.g., 'pages/my-layer/my-page.vue') 
          // as its first argument and ideally handle the file template.
          "args": [
            // The '${input}' variable automatically triggers an input prompt 
            // before the command executes.
            // We use string interpolation to construct the path: 'pages/' + input + '.vue'.
            "${input}/pages/${input}.vue"
          ],
          "tooltip": "Creates a new Nuxt page (e.g. in a layer directory).",
          "prompt": {
            "text": "Enter the relative page path (e.g., my-layer/admin-dashboard)",
            "placeHolder": "e.g., features/user-profiles/index"
          }
        }

Thanks!

[angelhdzmultimedia]

Tried:

{
          "name": "Nuxt Page (Layer)",
          "useVsCodeApi": true,
          "command": "interactive.open '${workspaceFolder}/src/${input}pages/${input}.vue'",

[angelhdzmultimedia]

Update

It would be nice to be able to enjoy VSCode API. In the mean time, I achieved it with good 'ol powershell:

Powershell code:

$LayerPath = Read-Host -Prompt '1/2: Enter Layer Path (e.g., admin-layer)'; $PageName = Read-Host -Prompt '2/2: Enter Page Name (e.g., index or users)'; $Cwd = Get-Location -PSProvider FileSystem | Select-Object -ExpandProperty Path; $TPL=(Get-Content -Path \"$Cwd\\nuxt-page-template.txt\" -Raw); mkdir -Force \"$Cwd\\src\\$LayerPath\\pages\" ; $TPL | Out-File -Path \"$Cwd\\src\\$LayerPath\\pages\\$PageName.vue\" -Encoding UTF8

Quick command:

"command": "$LayerPath = Read-Host -Prompt '1/2: Enter Layer Path (e.g., admin-layer)'; $PageName = Read-Host -Prompt '2/2: Enter Page Name (e.g., index or users)'; $Cwd = Get-Location -PSProvider FileSystem | Select-Object -ExpandProperty Path; $TPL=(Get-Content -Path \"$Cwd\\nuxt-page-template.txt\" -Raw); mkdir -Force \"$Cwd\\src\\$LayerPath\\pages\" ; $TPL | Out-File -Path \"$Cwd\\src\\$LayerPath\\pages\\$PageName.vue\" -Encoding UTF8"

[angelhdzmultimedia]

Solved

Thanks anyways. I decided to use a PowerShell Core script that runs a node application script which I'm more comfortable with, using enquirer (or inquirer) for prompts, etc. and using the unjs ecosystem tools.

$TemplatesPath = "C:\Users\Angel\Documents\Programming\TypeScript\nuxt-tools\commands\nuxt-extras";
$OriginalCwd = $PWD.Path; 
bun run --cwd "$TemplatesPath" dev add page --original-cwd="$OriginalCwd";

👋😁🔥🎉😍