# vue/require-expose

require declare public properties using expose

💡 Some problems reported by this rule are manually fixable by editor suggestions (opens new window).

# 📖 Rule Details

This rule enforces the component to explicitly declare the exposed properties to the component using expose. You can use expose to control the internal properties of a component so that they cannot be referenced externally.

The expose API was officially introduced in Vue 3.2.

<script>
/* ✓ GOOD */
export default {
  expose: ['increment'],
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

Now loading...

<script>
/* ✗ BAD */
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

Now loading...

<script>
/* ✓ GOOD */
import { ref } from 'vue'

export default {
  setup(props, { expose }) {
    const count = ref(0)

    function increment() {
      count.value++
    }
    // public
    expose({
      increment
    })
    // private
    return { count }
  }
}
</script>

Now loading...

<script>
/* ✗ BAD */
import { ref } from 'vue'

export default {
  setup(props) {
    const count = ref(0)

    function increment() {
      count.value++
    }
    return { increment, count }
  }
}
</script>

Now loading...

# 🔧 Options

Nothing.

# 📚 Further Reading

Vue RFCs - 0042-expose-api (opens new window)

# 🚀 Version

This rule was introduced in eslint-plugin-vue v7.14.0

# 🔍 Implementation

← vue/require-emit-validator vue/require-name-property →