Error with 'npx builder.io figma publish' -- Devtools framework not found for X name:vue

Technical Questions
1

Hi folks - happy holidays!

I receive the following error:
npx builder.io figma publish

┌ figma publish 1.3.3
Error: Devtools framework not found for /path-to-repo/ [
{
“name”: “vue”
}
]
at Ns (/path-to-node/v22.12.0/lib/node_modules/builder.io/cli/index.cjs:1106:9982)
at async YL (/path-to-node/v22.12.0/lib/node_modules/builder.io/cli/index.cjs:1355:4877)
at async VB (/path-to-node/v22.12.0/lib/node_modules/builder.io/cli/index.cjs:1605:1224)
at async noe (/path-to-node/v22.12.0/lib/node_modules/builder.io/cli/index.cjs:1871:1406)

I’m using Quasar
% quasar --version
–AT–quasar/app-vite 2.0.2 (–AT–quasar/cli 2.4.1)
vue --version
–AT–vue/cli 5.0.8

Vue dev-tools is installed: v6.6.4

Any ideas what might cause it?

/Ed

This is package.json
{
“name”: “quasar-app-cli”,
“version”: “0.0.1”,
“description”: “A Quasar Project”,
“productName”: “Quasar App CLI”,
“author”: “Ed B.”,
“type”: “module”,
“private”: true,
“scripts”: {
“lint”: “eslint -c ./eslint.config.js "./src*//*.{ts,js,cjs,mjs,vue}"",
“format”: "prettier --write "/*.{js,ts,vue,scss,html,md,json}" --ignore-path .gitignore”,
“test”: “echo "No test specified" && exit 0”,
“dev”: “quasar dev”,
“build”: “quasar build”,
“postinstall”: “quasar prepare”
},
“dependencies”: {
“–AT–electron/remote”: “^2.1.2”,
“–AT–quasar/extras”: “^1.16.4”,
“axios”: “^1.2.1”,
“pinia”: “^2.0.11”,
“quasar”: “^2.16.0”,
“vue”: “^3.4.18”,
“vue-i18n”: “^9.2.2”,
“vue-router”: “^4.0.12”
},
“devDependencies”: {
“–AT–electron/packager”: “^18.3.2”,
“–AT–eslint/js”: “^9.14.0”,
“–AT–intlify/unplugin-vue-i18n”: “^2.0.0”,
“–AT–quasar/app-vite”: “^2.0.0”,
“–AT–types/node”: “^20.5.9”,
“–AT–vue/devtools”: “^6.6.4”,
“–AT–vue/eslint-config-prettier”: “^10.1.0”,
“–AT–vue/eslint-config-typescript”: “^14.1.3”,
“autoprefixer”: “^10.4.20”,
“electron”: “^33.2.1”,
“eslint”: “^9.14.0”,
“eslint-plugin-vue”: “^9.30.0”,
“globals”: “^15.12.0”,
“postcss”: “^8.4.49”,
“prettier”: “^3.3.3”,
“tailwindcss”: “^3.4.17”,
“typescript”: “~5.5.3”,
“vite-plugin-checker”: “^0.8.0”,
“vite-plugin-vue-devtools”: “^7.6.8”,
“vue-tsc”: “^2.0.29”
},
“engines”: {
“node”: “^28 || ^26 || ^24 || ^22 || ^20 || ^18”,
“npm”: “>= 6.13.4”,
“yarn”: “>= 1.21.1”
}
}

2

Hello @Cuchulain,

Welcome to the builder.io forum post.

Currently, the Builder.io DevTools do not support the Vue SDK. For integration instructions, please refer to the Integrating Pages guide.

That said, we plan to include support for the Vue SDK in future updates to the DevTools.

Thank you for your understanding, and feel free to reach out if you have any further questions!

Best regards,

3

Thanks for such a quick reply. I was coming back to write I realised the issue.

I had successfully added Vue components with the:
npx builder.io@latest add
npx builder.io@latest figma generate x y z --spaceId x

┌ figma generate 1.3.3
│
│ This command will help you create new “.mapper.tsx” files to connect Figma components to your code components.
│ Check out Map components with the CLI - Builder.io for more details.
│
◇ Repo’s framework is not supported
│
◇ Figma component info loaded
│
◆ Pick which ❖ Figma components you want to connect to code:
│ :white_medium_square: WF Utility App - Desktop (already mapped)
│ :white_medium_square: WF Header (already mapped)
│ :white_medium_square: WF Logo Placeholder (already mapped)
│ :white_medium_square: WF Tab Bar (already mapped)
│ :white_medium_square: icon-placeholder (already mapped)
│ :white_medium_square: WF Sidebar (already mapped)
│ …

Just assumed npx builder.io figma publish would work.

Thanks for the great toolset - I’m really enjoying so far. Very powerful

/Ed

1 Like