Have you ever wanted to grep your Vue.js codebase for something specific, like a combination of tags and attributes? Only to realize that you can't because attributes can span multiple lines and be in arbitrary order.
vue-grep is a command-line tool that lets you search your Vue.js codebase using CSS selector syntax (like querySelectorAll
or jQuery) — essential for navigating large codebases! 🔥
If you like this project, please star it & follow me to see what other cool projects I'm working on! ❤️
$ npm i -g vue-grep
Alternatively, use npx to run it without installation:
$ npx vue-grep
$ vue-grep <query> [path/glob ...]
-
Recommended to pass the query in with single-quotes to prevent accidental interpolation
eg.
$ vue-grep '[v-bind="$attrs"]'
-
If passing in a glob, specify the
.vue
extension. (eg.**/*.vue
)
Only print the paths with at least one match.
Show the children of matching elements. Defaults to being collapsed.
Directory names to exclude on non-glob searches. (Default: node_modules
, vendor
, public
, dist
)
--hidden
Search hidden files and directories.
-
tag-name
- Type selector -
.class-name
- Class selector -
#identifier
- ID selector -
[attribute-name]
- Existence[attribute-name="value"]
/[attribute-name!="value"]
- Equality[attribute-name=/pattern/]
/[attribute-name!=/pattern/]
- Regular expression matching
-
Pseudo-classes
:empty
- Elements with no children:first-child
- First child amongst siblings:last-child
- Last child amongst siblings:nth-child(n)
- n th child amongst siblings:nth-last-child(n)
- n th child from bottom amongst siblings:not(query)
- Query negation
-
Combinators
parent child
- Descendantparent > immediate-child
- Immediate childelement ~ general-sibling
- General siblingelement + adjacent-sibling
- Adjacent sibling
- Directive selector
[v-directive]
- Existence[v-directive:argument]
- Existence with argument[v-directive:argument.modifier]
- Existence with argument and modifier[v-directive="value"]
/[v-directive!="value"]
- Equality[v-directive=/pattern/]
/[v-directive!=/pattern/]
- Regular expression matching- Directive shorthands
[:prop]
/[:prop="value"]
/[:prop=/pattern/]
- Prop[@event]
/[@event="value"]
/[@event=/pattern/]
- Event-listener[#slot]
/[#slot="value"]
/[#slot=/pattern/]
- Slot
- Pseudo-classes
:contains("text")
- Element that contains string:contains(/pattern/)
- Element that contains string that matches regular expression
All examples are searching the current working directory.
$ vue-grep '.button.primary'
The class selector can parse and test against dynamic classes aslong as it's simple (eg. no run-time evaluations). For matching complex class directives, consider using regular expression matching.
$ vue-grep 'button[@click.stop]'
$ vue-grep 'input[type="radio"][:disabled]'
$ vue-grep 'div[v-if]'
$ vue-grep ':empty'
$ vue-grep ':contains(/hello world/)'
Add it in! We'd love to see how you're using it.
If you have a question about usage, ask on Discussions.
If you'd like to make a feature request or file a bug report, open an Issue.