Work in a large codebase? Use selector-queries to find what you're looking for with vue-grep

Story

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!

What’s 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 button and primary

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

Find button elements with the @click.stop listener

$ vue-grep 'button[@click.stop]'

Find radio input elements with a disabled prop

$ vue-grep 'input[type="radio"][:disabled]'

Find div elements with v-if

$ vue-grep 'div[v-if]'

Find empty elements

$ vue-grep ':empty'

Find elements that contain strings that match regular expression /hello world/

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