Vue SFC

Compiled Vue components can hide a simple template behind a wall of render calls. With --vue-sfc, Wakaru can recover a readable .vue file so you can follow the component's structure, state, and event handlers.

This is experimental Vue 3 recovery. The result helps you understand the component; it does not recreate the original source file.

Recover a component

mkdir -p out
npx wakaru component.js --vue-sfc -o out/component.js

Wakaru writes decompiled JavaScript and, when recovery succeeds, a .vue file alongside it:

out/
├── component.js
└── component.vue

Open the .vue file to read the component. Keep the JavaScript nearby to check anything that looks incomplete or unclear.

Read the recovered component

The <template> brings elements, bindings, conditions, and loops back into view. The <script setup> brings together state and logic such as props, refs, computed values, and event handlers.

In this example, the recovered template makes it easy to spot a list and its insert, reset, shuffle, and remove buttons. You can follow each @click to the function that changes the list:

Try the Vue list transition example in the playground.

Styles, comments, and custom SFC blocks are not recovered. Names depend on what survived compilation, and imports or complex template patterns may still need work. Review the result before trying to use it in an application.

Recover components from a bundle

npx wakaru bundle.js --unpack --vue-sfc -o out/

Every unpacked module still gets a JavaScript file. Modules that recover as Vue components also get a sibling .vue file. You can browse the recovered components without losing the rest of the application's code.

See Unpack a bundle for working with multiple files or chunks.

Checking what happened

If no .vue file appears, use the JavaScript output to inspect the component. Some compiled patterns are not yet supported.

With --unpack, add --json to check each module's recovery status:

• recovered_vue_sfc: a .vue artifact was written
• vue_sfc_source_js: the paired JavaScript for a recovered module
• vue_sfc_fallback_js: the module looked like Vue but stayed JavaScript

If you only want the recovered Vue file, use -o App.vue. This makes the command fail when recovery is not possible. See the CLI reference for the output options.