Fix: Cannot Combine Decorators and Decorators-Legacy in Vue.js - Vue.js Error Fix

What Causes This Error?

This error occurs when both the modern decorators proposal and the legacy decorators plugin are enabled simultaneously. They have incompatible syntaxes.

The Problem

// ❌ Both decorator plugins enabled
{
  parserPlugins: ['decorators', 'decorators-legacy']
}

The Fix

Use Modern Decorators (Recommended)

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      script: {
        babelParserPlugins: [
          ['decorators', { decoratorsBeforeExport: true }]
        ]
      }
    })
  ]
}

Use Legacy Decorators

// If you need legacy decorator syntax
{
  babelParserPlugins: ['decorators-legacy']
}

When to Use Each

Legacy Decorators

Vue Class Components
Older TypeScript decorator patterns
@Component, @Prop from vue-class-component

// Legacy decorator syntax
@Component
export default class MyComponent extends Vue {
  @Prop() name!: string
}

Modern Decorators

TC39 Stage 3 proposal
Future JavaScript standard
Different syntax and semantics

// Modern decorator syntax (different behavior)
@decorator
class MyClass {
  @field accessor name
}

Vue Class Components Alternative

Consider migrating to Composition API:

// Instead of class components with decorators
// Use Composition API
<script setup lang="ts">
defineProps<{
  name: string
}>()
</script>

Quick Checklist

Choose either ‘decorators’ OR ‘decorators-legacy’
Modern decorators for new projects
Legacy decorators for vue-class-component
Consider migrating to Composition API