💚

Vue Component Drift Detection

Scan Vue Single File Components for design drift. Detect hardcoded styles in template, script, and style blocks. Works with Vue 2, Vue 3, and Nuxt.

Get started free

Vue-Specific Features

SFC Parsing

Full support for Vue Single File Components - template, script, and style blocks.

Composition API

Understands Vue 3 Composition API, setup scripts, and composables.

Scoped Styles

Scans scoped and module CSS for hardcoded values and design token usage.

Props & Emits

Extracts defineProps, defineEmits, and validates prop consistency across components.

Template Analysis

Detects inline styles, class bindings, and dynamic style expressions in templates.

Nuxt Support

Works with Nuxt projects including auto-imports and component directories.

See it in action

buoy-cli
$
Scanning Vue components...
Found 67 Vue SFCs
Found 23 composables
WARNING 15 hardcoded values in <style> blocks
WARNING 3 duplicate component implementations
INFO 6 prop type inconsistencies

Configuration Example

buoy.config.mjs
// buoy.config.mjs
export default {
  framework: 'vue',

  include: [
    'src/components/**/*.vue',
    'src/composables/**/*.ts',
  ],

  // Vue-specific options
  vue: {
    version: 3,
    scriptSetup: true,
  },

  tokens: './src/assets/tokens.css',
}

Other Integrations

Ready to catch design drift?

Free. Open source. No signup required.