Grep your Vue.js codebase with CSS selectors

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! ❤️}

🚀 Install

$ npm i -g vue-grep

Alternatively, use npx to run it without installation:

$ npx vue-grep

👨‍🏫 Usage

$ vue-grep <query> [path/glob ...]

Tips

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

Options

-l, --files-with-matches

Only print the paths with at least one match.

-s, --show-children

Show the children of matching elements. Defaults to being collapsed.

--exclude-directory

Directory names to exclude on non-glob searches. (Default: node_modules, vendor, public, dist)

--hidden

Search hidden files and directories.

🌟 Query features

Standard selectors

• tag-name - Type selector

• .class-name - Class selector

• #identifier - ID selector

• Attribute 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 - Descendant
  • parent > immediate-child - Immediate child
  • element ~ general-sibling - General sibling
  • element + adjacent-sibling - Adjacent sibling

Non-standard selectors

• 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

⚡️ Example queries

All examples are searching the current working directory.

Find elements with class button and primary

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

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/)'

Don't see your favorite use-cases?

Add it in! We'd love to see how you're using it.

🙋‍♀️ Need help?

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.