JS.VUE.REQUIRE.EXPOSE

• Some problems reported by this rule are manually fixable by editor suggestions (https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).

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.

{'vue/require-expose': ['error']}

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

{'vue/require-expose': ['error']}

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

{'vue/require-expose': ['error']}

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

{'vue/require-expose': ['error']}

<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 (https://github.com/vuejs/rfcs/blob/master/active-rfcs/0042-expose-api.md)