Skip to content

privatenumber/vue-grep

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

4 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation


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

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.