BYTEHIDE SHIELD FOR VUE
Vue Obfuscator
Protect your Vue.js application against reverse engineering, copying, and tampering. ByteHide Shield obfuscates your compiled Vue bundle, built into your pipeline.
Get started
Vite
npm install --save-dev @bytehide/vite-shield
// vite.config.js
import { byteHideShield } from '@bytehide/vite-shield';
export default { plugins: [byteHideShield({ projectToken: 'YOUR_TOKEN' })] };Add the Shield plugin to vite.config. Most Vue projects build with Vite. Shield protects every production build.
Full setup guide in the docsFree to use with a ByteHide account
The first time Shield runs, it asks for a project token that connects it to your account. The package is free.
Get your free tokenHow it works
How to obfuscate a Vue.js application
Vue compiles to a JavaScript bundle for the browser. Shield protects that bundle. Three steps.
Step 01
Install the Vite plugin
Add @bytehide/vite-shield as a dev dependency. Most Vue projects build with Vite.
Step 02
Add your project token
Create a free ByteHide account, get your token, add it to the plugin config.
Step 03
Build as usual
Run your Vue build. Shield protects the output automatically.
Why obfuscate
Why obfuscate Vue code
A Vue application is compiled into a JavaScript bundle that ships to the browser. The logic inside your components is in there, readable.
- Your single file components compile to readable JSVue single file components, the .vue files, compile into JavaScript. The shipped bundle exposes your component logic without obfuscation.
- Your application logic and calls are visibleThe methods, computed logic, and API calls in your Vue app ship in plain text. Obfuscation hides them.
- A readable Vue bundle is easy to replicateWithout obfuscation, your Vue frontend can be studied and copied.
Example
See Vue obfuscation in action
Obfuscation is easier to understand when you see it. Here is a Vue component before and after Shield protects the compiled bundle.
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Add</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value += 1;
}
</script>var _0xc4=['value','ref'];(function(_a,_b){var _c=function(_d){while(--_d){_a['push'](_a['shift']());}};_c(++_b);}(_0xc4,0x1e3));var _0x9f=function(_a){_a=_a-0x0;return _0xc4[_a];};import{_0x9f('0x1')}from'vue';const _0xa2=_0x9f('0x1')(0x0);function _0x3d(){var _s=0;while(1)switch(_s){case 0:_0xa2[_0x9f('0x0')]+=0x1;_s=1;break;case 1:return;}}Same behavior, unreadable result. The compiled output reveals nothing about your component logic or state.
What it covers
What ByteHide Shield protects in your Vue app
Shield applies its protection to the JavaScript bundle Vue produces. Here is what that covers.
- Component logicThe methods, computed properties, and reactive state inside your Vue components become unreadable in the compiled bundle. The behavior is identical, the logic is not legible.
- Strings and endpointsAPI endpoints, keys, messages, and configuration values inside your Vue app are encrypted so they cannot be read by scanning the bundle.
- Control flowThe structure of your component logic is reshaped so the program flow cannot be followed, even after the bundle is beautified.
- Bundle, every buildProtection runs as part of your Vite pipeline, so every production build ships obfuscated automatically. There is no manual step to forget.
Your Vue frontend is your product on screen. Shield protects the code that delivers it.
Build
Vue obfuscation: protect the compiled output
Vue's reactive magic lives at runtime, but the code that delivers it is just JavaScript by the time it reaches the browser.
- Vue SFCs are compiled before deploymentYour .vue single file components are compiled to JavaScript by the build. Obfuscation applies to that output, not the .vue source.
- Vite is the standard Vue buildModern Vue projects build with Vite. The @bytehide/vite-shield plugin protects the output in dist/assets.
- Reserved names keep Vue workingVue depends on certain runtime names. Shield's configuration reserves them so obfuscation does not break the app.
Protect what runs in the browser. Leave Vue's runtime hooks intact.
Free tool vs Shield
Free obfuscator vs ByteHide Shield
For a quick test of a single JavaScript file, the free online obfuscator is enough. For a real Vue project, ByteHide Shield protects the whole build.
ByteHide Shield
Production-grade protection
The free online tool obfuscates single JavaScript files. ByteHide Shield protects a full Vue project, built into your pipeline.
Open the free JavaScript obfuscatorFrequently asked questions
What is a Vue obfuscator?
Can I obfuscate .vue files directly?
How do I add Shield to a Vue app?
Does obfuscation break Vue?
Is it free?
Will obfuscation affect Vue performance?
What is the best Vue obfuscator?
Protect your Vue.js application with
ByteHide Shield
Obfuscation is one layer. ByteHide Shield adds code virtualization, runtime self-protection, and advanced configuration, built into your Vue pipeline.
