I work in a large Vue.js codebase with hundreds of single-file components, so it can sometimes be difficult to find what I’m looking for.
I would usually use grep or the “search all files” functionality in my IDE, but often times that wouldn’t be enough if I’m looking for something specific, like a particular component, with a specific string inside of it, or a specific prop.
I would have to construct complex regular expressions that won’t even work if attributes are in different order of if there’s too many lines in between.
I wondered: Why can’t this be simpler? It’s all just HTML-like templates, so why can’t we search through them with selectors like we do in the DOM (eg. CSS selectors, jQuery)?
To make finding the right component dead-simple, I made vue-grep!
vue-grep is a simple command-line tool that lets you search a directory with a selector query.
cd into your codebase and try it out:
$ npx vue-grep div
That’s it! You’ve found all the
<div> elements in your codebase!
What can I do with this?
vue-grep supports pretty much all core Selector query syntax: tag name, id name, class name, attribute selector, etc.
Here are some examples:
Find elements with class
$ vue-grep '.button.primary'
The class selector can parse and test against dynamic classes as long as it’s simple (eg. no run-time evaluations). For matching complex class directives, consider using regular expression matching.
button elements with the
$ vue-grep 'button[@click.stop]'
input elements with a
$ vue-grep 'input[type="radio"][:disabled]'
div elements with
$ vue-grep 'div[v-if]'
Find empty elements
$ vue-grep ':empty'
Find elements that contain strings that match regular expression
$ vue-grep ':contains(/hello world/)'
Thanks for reading.
Check out the GitHub repo to learn more.
Hope this helps you find exactly what you’re looking for!