@click.outside to handle clicks outside an element

### Proposal I would love to be able to write either `@click.outside` to handle any click outside of an element. This is a common use-case for things like modals or dropdowns that should close when you click away from them. The demand for this has already been proved by [v-click-outside](https://www.npmjs.com/package/v-click-outside) which has 60,000 weekly downloads on NPM. This seems like a trivial thing, but I think it would improve the DX of working with Vue. ### Naming I think `@click.outide` is the most intuitive API. Alpine.js went with `@click.away` but when I asked the author why, he said he wasn't sure and that "outside might honestly be better" ([source](https://twitter.com/calebporzio/status/1255122630723678208?s=20)) ### API I think a simple API like `@click.outside="handleOuterClick"` makes sense. I'm not sure if there's enough value in adding some of the options that v-click-outside has to warrant the larger API surface area, and kinda awkward API. For more advanced/complex use-cases people can always ### Prior Art - Alpine.js `@click.away`: https://github.com/alpinejs/alpine#x-on - `v-click-outside`: https://github.com/ndelvalle/v-click-outside If this gets support, core team members are okay with it, then I'm happy to take a crack at an implementation and PR it!

Posted by jakedohm on Apr 28, 2020, 1:15 PM

Tags

• support (Software)

Related issues

• Add 65536 size support for maps
• TypeScript 7.1 Iteration Plan
• nvim-treeconfig: upstream nvim-treesitter
• Add the "action" and "method" attributes to <button>
• [FEATURE] Support multiple Connector accounts (same connector, different accounts) in Claude and Claude Code on the web (claude.ai/code)
• > We were imposed GitHub for so many exercises!