require-expose.md

pageClass	sidebarDepth	title	description
rule-details	0	vue/require-expose	require declare public properties using `expose`

vue/require-expose

require declare public properties using expose

• ❗ This rule has not been released yet.

📖 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>

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

<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>

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

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

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

🔧 Options

Nothing.

📚 Further Reading

• Vue RFCs - 0042-expose-api

🔍 Implementation

• Rule source
• Test source